{"_id":"storybook-addon-react-docgen","_rev":"451-d8bc9b51b46784d55e0b5e1bf82e9f47","name":"storybook-addon-react-docgen","dist-tags":{"latest":"1.2.44","canary":"1.2.45-canary.68.2242.0"},"versions":{"0.0.0":{"name":"storybook-addon-react-docgen","version":"0.0.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"github-semantic-version --bump --changelog --push --publish"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","github-semantic-version":"^7.6.0","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"@emotion/styled":"^10.0.0-beta.13","@storybook/addons":"^4.0.8","@storybook/components":"^4.0.8","nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"gsv":{"majorLabel":"Version: Major","minorLabel":"Version: Minor","patchLabel":"Version: Patch","internalLabel":"No version: Internal"},"gitHead":"c3088e8e4321e488406f272cbefaf67aa1575035","_id":"storybook-addon-react-docgen@0.0.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.0","_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"dist":{"integrity":"sha512-A8X8lbEFUYdrQHtGe2OJdO5S2dBubkpGk0M1I/bVD+UPZ9yhmOV4y3IkRLfdAX7laNd58luLdFQ/rvr0ahDz3A==","shasum":"f14c29a6f10451f2d5eede15fe54d73e83ede08e","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-0.0.0.tgz","fileCount":21,"unpackedSize":61913,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb+lu3CRA9TVsSAnZWagAAoVAP/AoumYaDfTURZXQJmo8O\n1iG3ot0RaF3BfYIv5POYyxJzusoIbrgYjd2Ne3B5ZQ3FKlLDwcYjBIrO9S5c\nuTErs0nzZbeUy36oL0aS3FiaMIyxgKCX7ZtNEvCWba+cNx6rW+NiJDFCGNUZ\nCYANQ44YH1o62K/jhYbwp7BwdFXWIb2It9G3PRVHHkE9it9N+I2nRXWu6uOI\nctb/DbS0cFSS+u2gjZzojvcrw+/NjTSn8kf+yYZT48cbNGGCiqXowV5vvYfB\niLzL9cSkk0srz/3Zq4QD3m2YJBZ4y/0DnANteWMIzuYY9weSklsb+IDQ3bfp\nD4JS4Q5xixaOmadiUdyG6/0toP/0tLYAFnnAZ6HojsCkrJFMpHL+q8FedECZ\n6YetFIGrekVhYGvedsf7vZoiHKl4MptHV32YNMXojaF3LS86xs00DTMdYPty\nTUGrcCAqiTtTBpECiur6bw4ChSJJAZEim5U/I5D/VCnlTt+LWDEWG8OEY2JV\nKejAFmXYNZxmwUhgcpKbwR5b1xiNt2CN5bQOo9Tkuk2j8PeC5t9jyk6Lt8/4\nHD9jNJ1dIK/00h8//YRFbXr2kJXiDJSAdHVXNzSDsAtO4yfbQ1zTFL9pYZeR\nUIkKKUalUfQGKbkesvKztJLJQOXDahbVcUsF+JRgJK00h0HPJBnhjwdR9v1F\ncVZe\r\n=dw8V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBOu4IsQU2mQ9uulVI5zTvt6A2ZPRe7QJLI9APM58S4XAiAyUDyg4Dl3Q+x37E+aYQOBT2YeQNwqFMhJCUR0rijjSA=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_0.0.0_1543134132498_0.9215622692552308"},"_hasShrinkwrap":false},"0.0.4":{"name":"storybook-addon-react-docgen","version":"0.0.4","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"github-semantic-version --bump --changelog --push --publish"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","github-semantic-version":"^7.6.0","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"@emotion/styled":"^10.0.0-beta.13","@storybook/addons":"^4.0.8","@storybook/components":"^4.0.8","nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"gsv":{"majorLabel":"Version: Major","minorLabel":"Version: Minor","patchLabel":"Version: Patch","internalLabel":"No version: Internal"},"gitHead":"7730ae22c5bad88fae7972269d00a78db8a35899","_id":"storybook-addon-react-docgen@0.0.4","_npmVersion":"6.4.1","_nodeVersion":"11.2.0","_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"dist":{"integrity":"sha512-gQbIn2LxScyDEpI+8MZAwiYrQFbhzeUjQnBRJNsf25ja5WUT1n80Bl6AHyIN3oShjNw5hrc7tAMxv27QtfBAEA==","shasum":"2b0cabd0bb7d84223c1d7f84e93dcc4c489c8203","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-0.0.4.tgz","fileCount":21,"unpackedSize":62057,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb+l4NCRA9TVsSAnZWagAA2VAP/RPemdYqaxUTUZqneYV0\nwxTT8QPMED/TearEbufP9yQCJNCcx6J6rPlA/trxkux68prSRnIKWIqR7Puj\n5p8Gs35EBL9UfewbkErHx48XUZn51vtFMHR+mJZMvr/STX8z64cGmWbMChgl\nPuAl4kdQUvbzj1WI86bgQVs2kamkAm4i1F62HzWsXVsjw9tosxLY9+9mIq/E\n8w7UdJwhsel53g8DR3w0SVJDoyNC3GMJ+EDhyOWCjPOwGWhobrRdH3z+tUC9\nq/c+qqmmmK8mUL3SHZVfKXoSkWLCVC54bilp2v9j160/zcbu/q8Jr/kA8ko0\nbE+T3UL96ttxY9p64aiKYRLa6UjvHP/ZbJiSmtz6ROVHn/wf1tFiSaCHfqlN\nNaqdN0Jj5I820wCwfE2W584J1V1/q5vHCQyrZSYQKy3XNtsKlGqBFXOaRcu0\nFjMAhgFLE1xvq3WDtnw5EmOmB4Jtqoh9B20mNIBShRL6QXEPw1eCwLgMtC+B\nYvsBTojVPfSBrvm/RmfK5zyrJGuSl8xZRVyFaQiqvJ4nwSgTBfBwGSZxBvC2\nTD3jRmnup6LNp2UF/46SOrqWgJDq4AqxhPIiHw0YYawWd9piDbmiFM4btAc9\n96S8+0RTd1ZVrVsrfcpMR6KsDAvoxSunXzRvFYCDXyNdU3rrvDTDI7ok3eqi\nIbKN\r\n=iFQg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrJDdeq+SsU6yNuAEgnL6QAmXrVPeDNpBlY3udZEmFIAIhANNC9IA62lX3lYuuch4Ikqz/pwjZ1xToOhnxOEVaWs6G"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_0.0.4_1543134732918_0.30327117847498974"},"_hasShrinkwrap":false},"1.0.0":{"name":"storybook-addon-react-docgen","version":"1.0.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"github-semantic-version --bump --changelog --push --publish"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","github-semantic-version":"^7.6.0","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"@emotion/styled":"^10.0.0-beta.13","@storybook/addons":"^4.0.8","@storybook/components":"^4.0.8","nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"gsv":{"majorLabel":"Version: Major","minorLabel":"Version: Minor","patchLabel":"Version: Patch","internalLabel":"No version: Internal"},"keywords":["storybook","addon","react","docgen","typescript"],"gitHead":"52741101a761869330d100938694292df8fdae5e","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"11.2.0","_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"dist":{"integrity":"sha512-efPoG0Jqr52IhAbhprfsVUvcFT5FsEPtFo0VmQ16wjITwI0UylZnmxb3yUsxYJuI0jubxXHvqPNNEcUrVJ33yg==","shasum":"50f81edf4925ba3816794e722f5d6817efad088d","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.0.0.tgz","fileCount":21,"unpackedSize":62930,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb+l9zCRA9TVsSAnZWagAAT9AP/14ABLx/COFKGKlfI8gt\nmUTqYDahZ2TcozSaSolpFfCBvZbGo4uTlGi/tekFpiDqkdCuGoj2k5+/UBxW\nuSXPEYnW6+xKIFH6O1u0bz5vKOCj9am+AoZw/dX3GF0pg2i+AI9D2KaGq/29\nkhovJSEKbrYOEhZduOyJmb/QKvAI+B+4eUM9n/PfF18jM37s1RUo3mqehyFt\nzEezLbOMu8pXL5pA/fqPBUg7uQsnEinIxa0v2d3dxKryR24UdIpPH/yZ9Yb9\nwWm9jzbxSx7NME6i+CW1vyyZCQIaHkO2x4vNSBF6pkakG6ehybb0xJXZMN0S\n3H3rPwt6eKFtyc8SORRs82IUsKXHjhvk7Ibsb2X+b1UJSp7ckqo08TgLK8ed\nbxB1s63JrfDSAGagqgBl2/yryzwYe22ehrWN8DXi4cz3wRPzV5NWhjShPBxZ\noaRfLeEPxvtU5dNWDbh/uI+JmjpQQGUid9t+VfGyIBjNpPBavpjy9gG0Wyra\nZjWPJw7OE7ltngMu4RwGoBnn6AYy6rqBJy6cgfPQTQmD/Os2LKFF/XbB/AEw\nquk7dNEx+gKVyLokHLmB1lZ5tb+h0NKtqJEJwqlZ5QgEfi6HNhRmXNE1XZF3\nUAirGDZuVC4SpVOevpCzsm8vfTkmrAQf2Y3XDE0wrqEWdkGY7po6h8TQS/Fe\nWN9R\r\n=xpfz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDkb6sLjwYXXXwlIb3oj9CBuZLOiYMwJzhPdlhW2FU4+AiAjciAxZAUxDMDCDbES02z3BLZNPJz6GsGM2zHUtlNdNA=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.0.0_1543135091093_0.36787603645565925"},"_hasShrinkwrap":false},"1.0.1":{"name":"storybook-addon-react-docgen","version":"1.0.1","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"github-semantic-version --bump --changelog --push --publish"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","github-semantic-version":"^7.6.0","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"@emotion/styled":"^10.0.0-beta.13","@storybook/addons":"^4.0.8","@storybook/components":"^4.0.8","nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"gsv":{"majorLabel":"Version: Major","minorLabel":"Version: Minor","patchLabel":"Version: Patch","internalLabel":"No version: Internal"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"27841a813b43e5e2a94187ab054016c1a14dc311","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.0.1","_npmVersion":"6.4.1","_nodeVersion":"11.2.0","_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"dist":{"integrity":"sha512-vmaAL6qz2+skJgxuu7qfmX9slI6/vDR+iL6+HjX+jvHKO3k03YzAa8NhXgqaQO5axYDXyHHCuPWUc6wxbLd8wQ==","shasum":"245092e32cdc33929fda36166971e5d70b48bbb9","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.0.1.tgz","fileCount":22,"unpackedSize":64413,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb+mUlCRA9TVsSAnZWagAA5BQP/jAtbApg/GuGrRFdIqE3\nonc41DWHU62ycpDNtc0kB4PO8RDbhqxfP3/XPm1nAxB7ui3cybwOlxsn6Zlm\nbjdQCgm4ezlJ5oa8Lj6OVkkJ+dpBr0s4yFOfogRC/QfRVQmWabAoFCa9B36r\nfZBYpndxFTTIu0bci8r/4Bu7okDgTm50DolWM6RkADwS3zAwZ905Esz3yqIR\n5muFKZ0bvwqx+RpqPxBrBWDi2rHvvpg5D/rrF5AQLjyLClWrWibUP1U8WUoU\nl9UBzacPooq7VyVlYAGpckxuUvEVxA7yik1US42Q37kPcRdNfczQ/vqpam05\nx6DiCoAgXAEcy2QxHRb9D0sI+T3tTPSXt0MRZp5GGL+A6eRcwTDamFdokKe2\nDGD5z3TiKXHQDLo370Qe2EZuwo+ov0Cgx9OYr5YVnnPrizTW8xNgrCIdo+6S\nyZtQWm/dGptUdNItjkWGnWnFxGIzFraheDCaXyo1VNLyGpbAB+OQRHjSR+Vt\nbXAmfs3fUdrcJX0QOFOHVyOk3oKibvq7t12H26DLk/xga4Smb6cbVspekLJK\nv1caFA4tbiZMISM4g5msiWv/9H9lwTCf2SUCS32CAeu9WBWJm0iI1lFcj1sQ\nYX1/KdrJsU+6CdmGloKikeXjPw6WKVvevl2GNHDohO0RzIMp7pNMx1wVNjuF\n6kMQ\r\n=GrnZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdHUKZHRzgo70HRpYqmJxuhaMkaECtmBW3tZr2P4bgRQIgCsppFGjd3bD0x4IwrkloQDR8Ed4ClCDJ1KGMk1jhs40="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.0.1_1543136548248_0.9999535171496503"},"_hasShrinkwrap":false},"1.0.2":{"name":"storybook-addon-react-docgen","version":"1.0.2","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"github-semantic-version --bump --changelog --push --publish"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","github-semantic-version":"^7.6.0","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"@emotion/styled":"^10.0.0-beta.13","@storybook/addons":"^4.0.8","@storybook/components":"^4.0.8","nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"gsv":{"majorLabel":"Version: Major","minorLabel":"Version: Minor","patchLabel":"Version: Patch","internalLabel":"No version: Internal"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"f5969e0c212cd38f495eefbf3ba8889791e8e062","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.0.2","_npmVersion":"6.4.1","_nodeVersion":"11.2.0","_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"dist":{"integrity":"sha512-jImSk2rIPugELUy0zl/HeR+GbhUp7Vn+DaEQFVUBP7+pRCzQqrlw1dnG3d3yQ8Kur9Jvye3HCXSHQRd97jvxSg==","shasum":"c68d042b0cd8b76a9ea92b1a6f7cc13e7da89e3e","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.0.2.tgz","fileCount":22,"unpackedSize":64675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb+ocACRA9TVsSAnZWagAA7YsQAIaJju5Z5EMB4f8mpIwO\nM7bRjGFPt+nk2R1PaW1uX8HQsoRf68EqHEHwu0LtarSgog85Qy46mUcgPDz7\nNy+qM4ihql7iR+NSPZ2Ed0QDx5M1cVqbVjEL0CpIFENJDqZIbMC3lCuwG93O\niTtogWclzNNzLzXdT/3pvN4uGfMruZu3dZYt5V4Xwo05TZ/9X8bJOhVeSJaN\nZmfHITS48KEP0a+h4Ryexsxa2hvpIzVeyp83pcwi5Wj+GKJJF5+CZlbnqA8W\nsNvldeHNahUVL9MAHpRJ+3VVscGpEMlJNK6RoWSrEeWLu23htiszypbbNkTM\n+W3YqlqxbHN/6mwqGVqv9pEKS3SCpELWPiPEcHnHabMm2ngTci3JFVXQPwGo\n7dtGdnUsnUhCvTyAhKJSb+4TLm3AwjPMI2UaiKuFmZsp0880/jbaXmiaQAdy\nHJGFLudlS2/J4OZy0VVNBx7yXNOyrO8xuCQQi4+NIZ7Ilky0IVc8LFSM0r+2\nTXcFJ8OBLR0+vu+LYwKmbiEK+0KeDoSHlEfdgMVyzjaRLu1YegsKxL1UC8PV\n0g5bC0VVooecOqlcd0Frmts06hIxMoawP4WVzPRaXBPHl1NbyK2tso9j5z+3\nu6P1FxNC3iG/nOTVcC1R3KUMaBZsz5Dy9uixoCtT2Qn4zpPqDDQWJI+b4X8F\nQfCX\r\n=tR4x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoJPz+Rm5oZi3eHt23Sy1aYIfSbdyYFCch+qkOn5iWTQIhAJsCVNrFan8cPebhtwv66Cis3Gpf2YyzXgqYT+Xw0G0G"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.0.2_1543145216023_0.9191342404179281"},"_hasShrinkwrap":false},"1.0.3":{"name":"storybook-addon-react-docgen","version":"1.0.3","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"github-semantic-version --bump --changelog --push --publish"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","github-semantic-version":"^7.6.0","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"@storybook/addons":"^4.0.8","@storybook/components":"^4.0.8","nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"gsv":{"majorLabel":"Version: Major","minorLabel":"Version: Minor","patchLabel":"Version: Patch","internalLabel":"No version: Internal"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"c6424d7835c5b1afe40bb27675c1ddb4f7a41fdb","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.0.3","_npmVersion":"6.4.1","_nodeVersion":"11.2.0","_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"dist":{"integrity":"sha512-tnHOHR4vPQcUALlKlJoS4F1REFXXru5sAxSvEnlunn5oBsbGDx4ZfOHvM6PMD/HPWZl92gm3g2keKo0BhG3y9A==","shasum":"a384c2b9fa8ec817afc20a3ef993ea06a47357e4","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.0.3.tgz","fileCount":22,"unpackedSize":64633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb+pLhCRA9TVsSAnZWagAAWFAP/1FfVPcwmaYH9Pfh1aVc\nIF6r8+Dr3Q9rQmtV8iGlqfIksHh/cq9RbGo/84X41Uj9LIqT1gzJJ7AK8dxX\nneDToBMSvPVHBp8ey9ulUXz7Rok4mp5JXwBY/EQ627yRROY9Og4uNmJJ5GAN\n1/y2GX2IENZyECUID/AFS3qb0VfAQsIMxwOGfoyK1u28OxusWA0wz6926O/Q\nHtzOQ7U65K3HXD6bv2GTpEnr7XexGOAhpf+pW1wrf2scxBVSHRGtST66itro\nKx4AGpk6sn6v2r+GKw+013zn5CcZqg7p5Kvbh3bKN14LmrMclMoccEcp/FxI\nBnvcIfY5GJiPQgCazXpL6hrFnT6XekfUMlQJUqUczJp51TDwT8anRHMTnZeT\nBk24cvJcuE2pK88aXGrgPDMMMc0H6sYMAXgDIjfbqmHC8hxKsOWp6H8o876U\nXMuH3jOEolo9IzF1RVxdQcF4MsEF0pzSNjRWPqMGLVw0fB44cSJs8JY/GT1F\nWxGXSU37w6JJIvYruSb/Gb6hqQH0gk6vYXXTdMwa3WpY95gDJprrlK7+rWNk\nYnvbLtm5IPGOpqncOQrD8ggaCwGNilShjPY7TMfx8gQsVPANzPcCyMW7XH/7\nFCmMMeLYQDcd8/yXreiskOkGKBbB4Sqcxe9oAmU4AyeI6QNMG3+timEM3Zxq\nbpoi\r\n=yk1m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICErkp3P1M4Kr8X+B+mgvwl/a/ZnAmvqINvkkYVyXhRyAiEAvMB12BFPmDBnwlOPcjgK4hCv4BmeIa72Ec0tVPhi7ag="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.0.3_1543148256937_0.27474778795457544"},"_hasShrinkwrap":false},"1.0.4":{"name":"storybook-addon-react-docgen","version":"1.0.4","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"github-semantic-version --bump --changelog --push --publish"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","github-semantic-version":"^7.6.0","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"@storybook/addons":"^4.0.8","@storybook/components":"^4.0.8","nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"gsv":{"majorLabel":"Version: Major","minorLabel":"Version: Minor","patchLabel":"Version: Patch","internalLabel":"No version: Internal"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"31c18d98c13204896d52d8b9ea9ddfe58df57d00","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.0.4","_npmVersion":"6.4.1","_nodeVersion":"11.3.0","_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"dist":{"integrity":"sha512-hJObvKwDVuiLURq89onWgr7QggmR5ufSGExZIL+dWHuOMQUVCOPJa6v2grA8ZFaLVSLVCE1cg0llAH0hnjgu3Q==","shasum":"9b3110bd020c6083b9e5809186a59330b2930787","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.0.4.tgz","fileCount":22,"unpackedSize":64631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAZPhCRA9TVsSAnZWagAA/uMP/jWE6bgf16xj3ZwLb9bZ\nyOKQ685enHFEK0eUIGh4QhMCfM6jHHsos/0D+vAzuaiTYH1oKkMWhTqt5Dxx\nNxilzxSdfmsJhjWo/j0V9JYg2bn9445QGunVChbaR35qao5Lr+4hC37/NQOi\nrc09zkvCkEDybPJ9ngy9ZZjtOYF6nU4OzHE3Lcuv1AJryrPFlfkWbtr8X1Vi\n49GTb/+Ph6EchP0JE2uBv11+k/QBIva0DeYWGFl6VD2aMq2iANCkv2SwGexX\nR5rJ9KjBoN010Hxia1OHwWird3RZrBhRL0y4MFPeRG6z28e8y306AXx222SN\nEfq6R0XNP7MqOzu0x7eS5juiQRgU9vFqExxgza702ozEJ2ncDK4MdZExVfV+\nHMsEcnoiZ+DWf0haxDGvVQLeTAo/CmJHGHql4bwBg+0ToROSpMp+05Ahm9zh\n3DI8rDU7jcJxUrMeW1nZAABCuzf9ajWfI7QJlRqxd6MaQLxGu+8yYnpesrT4\n7usxNpf+Y70Qj57us1g0wrlgQlEPae8s2A98nYvhH74YF2L13H7tVFYFBT2o\nVaF0C2iLm3DWsPKVyt6amU2fAUkxPjcCgvwoATVI2pa7IA42BokJjVf6W/zU\nif7115n3QerUoUOEbN2n1wh8CffRedK4poS6UMxsvBzCyKeWSIRJOSWlykea\nRiXC\r\n=Jdvv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICKzj4n+CLbdclC+lGUBCjY94k4vTAdiYnXk3H1TPnAoAiEA1kqlwonyish3XlQ/ak5nUM32Asy9JD3OLm2ho7zJ9Yc="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.0.4_1543607265008_0.8404839249620519"},"_hasShrinkwrap":false},"1.0.5":{"name":"storybook-addon-react-docgen","version":"1.0.5","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"github-semantic-version --bump --changelog --push --publish"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@storybook/addons":"^4.1.13","@storybook/components":"^4.1.13","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint":"^5.15.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","github-semantic-version":"^7.6.0","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"gsv":{"majorLabel":"Version: Major","minorLabel":"Version: Minor","patchLabel":"Version: Patch","internalLabel":"No version: Internal"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"3cafad93b52df4642bf24885d87a47bdf01b9cd4","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.0.5","_nodeVersion":"11.10.1","_npmVersion":"6.7.0","dist":{"integrity":"sha512-i4n0rhdzfbKV6PGQnGg2dlu38aFK3x4kUFU2jffTQ/QI9utdMJLC6bbO49kcgRu3ofgEF5lTSkuzeLuJ3bfKiQ==","shasum":"fe18de36b51705e4671c9f3dc2f3bf9786633626","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.0.5.tgz","fileCount":22,"unpackedSize":64722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJceleUCRA9TVsSAnZWagAApuUP/iXGcebdhn+yH8jxgjtg\nkALcsFXIuknUewr4f4CIA0Xr7oDXdqLWg/vwqGJr/nVwPR0YQjLnPyPl87d6\nPcrudqBXRWHk7FV5B8TUu+GhUXimWsRmNC/rxWY0c1qtS+0O3wEVTxXzcMcI\nLdERd2hM44TVwKI6DQKqLeb8fzyk9mqLY+zhG9HdMZlSY95LCxhXEQeMNPVz\nlvKGo4eY1/6b9NIxoxzaFeolkt72IWdWoEjBF8S6Cp1wEWMuZUdXVfj17/Za\nmlhgUUIyfTEtlgoX9nikL2QA8khifaHg96wf2HcRBJwWiMV8n4EVgBS7EKb4\nbFeOqNJfkySh2fBZylyvA+g63urn3HW/sEk7rCMnYb5YvFrKArSzgB22rkP8\n05cE538s/meFVBSDimzjqWecS7HLUPZFn1mbjmdflbybillE5GSg+UU45/gx\n9nOtBe4h0fYbI/DOgiLtsIre8QXLy+nPja95KKd9zOYCSsq3qlNaSdXthc5L\nSLOwdTq0TLzZ8WXB7oY6guPEncUT+mW5LedAyjDr251UOQUUdnalqVZfrJ60\n8YCIgBQ56+sDkBXUNnEbrXYZXfBcYdFddjJRdodWnEk0DuUgDaHBzPWE4M8t\nSSJYW65wr2svUPGL+aHU+/Udx7fllat89A3ddTj/9EgcsurMQiSeiKFoybf/\nRQdR\r\n=prvL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICjUUB84Ux3G72vEieG9eT9Orz+wxB+yn1okP4SQRkmoAiBl77tyG8pwzHNkJr9Nsz9jeRBxd6epbfYjOs2UEeGF9A=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.0.5_1551521683600_0.7632189077781382"},"_hasShrinkwrap":false},"1.1.0":{"name":"storybook-addon-react-docgen","version":"1.1.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"github-semantic-version --bump --changelog --push --publish"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@storybook/addons":"^4.1.13","@storybook/components":"^4.1.13","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint":"^5.15.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","github-semantic-version":"^7.6.0","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"gsv":{"majorLabel":"Version: Major","minorLabel":"Version: Minor","patchLabel":"Version: Patch","internalLabel":"No version: Internal"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"ce65929ccd61bb451b0a5df8532aca96a2e23575","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.1.0","_nodeVersion":"11.10.1","_npmVersion":"6.7.0","dist":{"integrity":"sha512-Uwpye5VLTonDq/O0ZA9kmufrKPB/W8r19JnRYGT0dQICIbySBA1icym+m+zSE2xKT14YB5fupB15wPMDJucYGQ==","shasum":"1ea459d05177323ed01a650e2e005da91976aa43","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.1.0.tgz","fileCount":22,"unpackedSize":64983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJce59rCRA9TVsSAnZWagAAKjYQAJcR/uQeuC/j3pI3N1NZ\nm6x8aR2q65rSpAO70/mrAJqpsgg8dREMSh6a70kyjJCjp+r0iTTcfL/HifVa\nwkprmNdQOHnf3OO9zomJO9lagw4yHz2YgrzyS3Dqe47y5YrnRwZDycOjsqMm\nOB+cLo6FOjqpzuf/MIwJMbHBYw3eooAaxlCbkMG8GQ0hEvA+HWz9MtNDqx12\nfqOcgPpu7tGrwEsuDgBZA4/9huQTBrbKwpDl+O2t9mjFsbIFD7h9aPMbOL95\nSO5kpPJmqHlfYZo3B4V68do9rD8ozlahfu8qma7ysnYCEfR+NlZpkdUuYWm1\nJ2fe7VtMxE3reZwyjkOBp6LfrpiFasechfmGFAAlfzs+P7k87ObbMBzay2k0\n7PcVk6wEYY+Sq/p32Lfz15ybU9ar7qq6/NlKAlvjpd7kIZD435rwJMPjFAm+\neuOmqujBb9vyt1y7HSvzOXTqad0Rdp0fNhtiD1dJrfOCPKoY+7J3chHy4aRg\nHTABmd5h0dEJD/l6droE/f0QBRAkA2aPaapR+ogWkYFEy5bqMqnmnwusWICM\npFyyiF/YcMSiVmK2ONMba066npJn904Zrqr/mwmMgY+GL6TqEGtcqZPO0c3m\n0+1i99ZCba24ujp9IpZ++wqeDnlQfwowN9b5ZQwOqodHQbE2MYTQ1Cu9BNyv\nopbi\r\n=b+Qg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEG44mYkh67mFs8rWwTOu1WJF2gJP/D/ewgdXUv9TGr6AiAQBv/bdhLsAXLwSPAA0W2ErSOreIrCJpVMJzv68khZbg=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.1.0_1551605610461_0.642478038355796"},"_hasShrinkwrap":false},"1.1.1":{"name":"storybook-addon-react-docgen","version":"1.1.1","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"github-semantic-version --bump --changelog --push --publish"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@storybook/addons":"^4.1.13","@storybook/components":"^4.1.13","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint":"^5.15.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","github-semantic-version":"^7.6.0","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"gsv":{"majorLabel":"Version: Major","minorLabel":"Version: Minor","patchLabel":"Version: Patch","internalLabel":"No version: Internal"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"dd6336bc0e118edeb3949cd41ebbbc1d6878d8af","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.1.1","_nodeVersion":"11.10.1","_npmVersion":"6.7.0","dist":{"integrity":"sha512-13lAfxEfQR6BSac3ZclWfah7V9dUBkFvgCkXrzfRJJ9apmeX+UrYorHsZKWFavVzmFJ3E0DAmQuWHnW+TQlpuA==","shasum":"1fde29dac66105eee2b6976c3da1ea55de1efec1","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.1.1.tgz","fileCount":23,"unpackedSize":64983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgCweCRA9TVsSAnZWagAAoNgP/31mXfzTat7tgGJaER69\nDd4pzriUQAqTgkfkMUA6tn4AEaUM8RWbZiZNqHBtnBLl4dvxwvshXbHgBK7J\n6Lx0p+zWHjKPDns0Nuykd3NATQsfInGrg+I3iqA9liDOwPX7jRtpTqjjPBIx\nZ4Gs0GdoyPk8KgKyWqJUR6c3mGcBPi+fzlC8t0YvIGnerahYobdau5XkV61x\n0ytw8a7XkluYBwbnzmhp1ScdDS9MtbBgwUbNLmqa4KPTwE9uYnkC0Ettpct0\nBRHOufBesM8rWbeYtkbpVam72GX+Po1OQeh4LF8BJ5cHQPmWnVQTrvRESFjh\n58Sr0UqvCFqhLxLHshB+lrI8zL2783x+e5taXOLIeZCwzEg8mCW4qhQ4PkY6\nw7SMbfHt1RyPLBbjDZEKaGCh6qqDHt7TayeZNytvhaEp46jgNpnwHOtR8b6f\nyPeERx0TzWWQWZH1qR1Um/X0zyNxUrdz8cEnsNAer8/Jb+wIgT9yjuQwgKjz\nH9Z8hY38et6mlYfEbwerWVmNhYPStCoOZRwEb0Ofk/arvux5IPLt2x9/RM6A\n1R/Ve4eKaKtl+6WAyuTHW2sk7SYOVuIwXIZ0zN5oSsntDVf0gKmLjm0lCbtl\nsWIQAYfHZSf/hDJGAu5RDgVAKac6y4UlTfyQuUtPh0vXTeCEJ12c9WJzDYAW\nNHju\r\n=ckkz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmk5IDxDyhsPyftEJW95QbEUfe7P37qvnHWz7midgphgIgVfBiSQTeweEm3VoLVc7McMgC651wMqRxVTN1P8CaLV4="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.1.1_1551903773710_0.7405899885981186"},"_hasShrinkwrap":false},"1.1.2":{"name":"storybook-addon-react-docgen","version":"1.1.2","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"github-semantic-version --bump --changelog --push --publish"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@storybook/addons":"^4.1.13","@storybook/components":"^4.1.13","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint":"^5.15.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","github-semantic-version":"^7.6.0","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"gsv":{"majorLabel":"Version: Major","minorLabel":"Version: Minor","patchLabel":"Version: Patch","internalLabel":"No version: Internal"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"b2b1e7d9964746b09a21551fb7d821614a018662","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.1.2","_nodeVersion":"11.10.1","_npmVersion":"6.7.0","dist":{"integrity":"sha512-74Xqy5Yx3FSzhh92xm2ItlrpeguOF8+Tqp9cgrLCUBCtY2bIuNMR4CusddHNpeP2tPWemAKLsCDDeqKRl+gAgw==","shasum":"f71be15290742735c9012e4796a82c1896dd3668","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.1.2.tgz","fileCount":23,"unpackedSize":62939,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgEOvCRA9TVsSAnZWagAAedYP+gJ4pVA4oJR7UrrWTFqV\nSZ1ioa8DQCC3HTnfBxgnqirTTMu2XOCOdNP2xyb5O+vuwkolKE6ySAwstNAn\nAHY7ZZn2zx+PYRl2IqrbLVE3tNIYI6Grg5YgdsJD56CtSV1MdviPJliTyE7B\nkJer5ttMQfhMU3p+UZo16A06HnbZyHCaLiYHK9vjcriO0PBV3LoUhOkCceq1\nAdItyes77bSGVut0x6bfniq6k6LtDvJw1J/DSTW2+wymue1zLv5g1edgpKAJ\nGVKXPrY1EfZDDksIV8L6ZyZHPonhPgjoBbJQPaLnqJ7Y0PXIETLCTsL1BMRL\ne/CzRHh+/+CkxTbqnfbGqXnMNceI7vMJPkbjQzIbERQOcHYrn7k2rmaboGd5\nEcWUoZ8R3C+MNXclXxM1ibDbzzo1MKlXy2s7aCgYeS4yyFn/GBshfJ2ovRF3\nxTChPmtx1TPL1UWkYrtNireMBTb620dc8Rfinogd0Cao2T41cemNtIvEqt0T\nB9O0FWmPYDFA/mSg8YK7AnKhD0xQUBx2enndyljjM21pAFKEU9MsejiIrlda\nLNsf2d+YEFIjHRlWFux3pqRTOtCE2YxeIX39wf/XMDJ1cGOYH7Vj3LimMLCe\nwaBDK7J2AmRLAmyHYnjY91fzTozmY62o7HXip+AiSqB6yCFQWkXK3G8HlM4Y\nAULO\r\n=PcdZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBbqEfJMbWRFNUkh4a+MUT1n9UoGSzj0KZJ+W3Ccfs2qAiEA7Rw4vbHthZEEtxqbD3nzvmtdTUMiNom5k5T1AYQBskI="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.1.2_1551909807162_0.15607989038285575"},"_hasShrinkwrap":false},"1.1.3":{"name":"storybook-addon-react-docgen","version":"1.1.3","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"github-semantic-version --bump --changelog --push --publish"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@storybook/addons":"^4.1.13","@storybook/components":"^4.1.13","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint":"^5.15.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","github-semantic-version":"^7.6.0","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"gsv":{"majorLabel":"Version: Major","minorLabel":"Version: Minor","patchLabel":"Version: Patch","internalLabel":"No version: Internal"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"ad516730ffdd253362f29d65586f33451c0aeb83","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.1.3","_nodeVersion":"11.10.1","_npmVersion":"6.7.0","dist":{"integrity":"sha512-te8fOIvKx8wtqfvbmVhdfB21wW2W7crQOmSHMkxXU1xLINJkQmBukhXzE2bSwVNYdD5eCt4ycuQ0KdLsm+Wo/g==","shasum":"a475dc171fd5e4b6de7fb5d78f29a7ef2b6745e2","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.1.3.tgz","fileCount":23,"unpackedSize":62945,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgFSHCRA9TVsSAnZWagAAjdAP/iF/iXn2xFVl81pz7pvW\neflwBImmo8TTN0dP5Lt0KfHXn3uAEAUgZ73wMuKlPwEKBOj2seGmbfEK9FtG\n5T7yJnsgIJkUl9wwNaSSOKxJRxVC9RORaM0Rj3ZN4iVHzzTivHh6LB8Ksb59\nZGuMi6GtD5GTZBSMEM4BGSR/LhoiFYCuPVnzZNFD4nYzcP9AprlV0/8uVjy9\ny8ND4v4Lnm8kgBLR6UqFzRPGqYm0BHcn8TLF5euTHJ3VI5jL4UC0plLJQtq8\nBUM8RfSYaOwPKrmIYU6ZpKp2WsiKjyuvUsMnHqOdkb9usr9PC8mpXsl5JHHA\nBQGrbK6g8KFSFniXflmddyfn7mGqhyLimfiAkptsTMXQyhCn8guQii5H4i6v\nU+EuD1bujMNmYwKyOWvsjq7eLkM1o16jDRqVW75Z10f2maPaV8cBD8l4kuxO\no4vKbt0x3sSH/YorOIQszB4oAZrngHc8M1epn19oMVPH5lwKMFNbIa0VE2Ye\neZXYHqP070oPpwrycyvyhFxgnRB+ujeAE3SYmGEoY4GMNGQDGqe5ZbeHQGEJ\nSN5rWGD9l0uvGU7vXTIudOpURsh9orm/tq9Wnq6SvJT1I7ySRFkc7BzQwLOb\n7SfULClQYFImdsttkJI+9OM8smNYcckJS3Lfb4oTb+eNszsMvfN3AfBGadRW\nYeCz\r\n=8o5B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCWV3MvvIg7CWMp550XnMvi9gbO/feG5C7IDlUU4OWUgIhANjB/D62NU3GNLfMeKDXcsVFOLdbpL9VNczDrGCXDd48"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.1.3_1551914119096_0.3356621787253775"},"_hasShrinkwrap":false},"1.1.4":{"name":"storybook-addon-react-docgen","version":"1.1.4","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"github-semantic-version --bump --changelog --push --publish"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@storybook/addons":"^4.1.13","@storybook/components":"^4.1.13","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint":"^5.15.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","github-semantic-version":"^7.6.0","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"gsv":{"majorLabel":"Version: Major","minorLabel":"Version: Minor","patchLabel":"Version: Patch","internalLabel":"No version: Internal"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"b3b008a3398bb8af428def8afac30af8ce563495","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.1.4","_nodeVersion":"11.10.1","_npmVersion":"6.7.0","dist":{"integrity":"sha512-H1hcuEZHd20/hNFbpv111PLouHt/TpysrM1uYAkN44smWeIJU1LACT7WWS/AVDtpPgLxDhdU1zN33u1wo0E6MA==","shasum":"c1c71797e9ebc2b648cf536688be55cec91355e9","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.1.4.tgz","fileCount":23,"unpackedSize":62367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgNMFCRA9TVsSAnZWagAA6bkP/jZTFRp537lPEhn3vJa5\nziv2OGMpg6Zpeuc4nrWT9LgJCaNSu0RoT2zomapjVcQQ3ajC3PXqmo1k/Z1w\nMCgMS46MyEjmsRmU4F4ZC0PKCkxnhsgblRPRipMBJm6lCD7UXIzlUnurPO5T\nRE3eusAhMBAmvQwA267tHPxLkoWpyXpoxczt8uL98gs2P/yyjaAayQc9rvtR\n9y7YCerbJE9dg+f27Ns+9GIYWGeGqFjeTeivQGQGby/+7q17qG+lteQcNQqr\nA2zAzH69WrVsvU9Q1CoIgKmAO2kq/pb7589bzlb1WlAvRvAEyci0mxPsrSi2\ng5RW9hM8bSx2dN0w2eF8tBad7Idb7NWPQA3X9c69rzD5InOFcxUlQLUYwnOS\nLd3ioxp6QoTsb8yttIbxwWNx1afUyIPL6ou5zaiWFNYED9lHtq4GRJhpHK8R\nWakEqXqH4sOq/k3M0u3B9oXEQ1IBBvS0xXOUc17GfEEz3te5rj0kenEYWWav\nrMuihB33avsOG0nUu5T9zyJO6Gb6IYOyp2LrrSBjRI0oGuO1RFmEjAQ4KysA\n208Hnx3yrOS0T+T2knuRWQ6dz6uP2b51exol5R3bZSMI4Ntrt/3RvIEyTXbi\n0Bvtym0suJWn0+JSB1qQ8v8bIQdH4r6XpdM9L/XZ/pFrtKC5r92FvokXpozv\n0fea\r\n=fUF/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDj+FhJXIoHqkrMY0CNRbbtM+9NOX3x7pbYFj0BSj/mBgIgKkKmM3yVBIMspSgN36fYeak9NwpmChpYVvzvRVmDZx0="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.1.4_1551946500108_0.6889362381834179"},"_hasShrinkwrap":false},"1.1.5":{"name":"storybook-addon-react-docgen","version":"1.1.5","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"github-semantic-version --bump --changelog --push --publish"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@storybook/addons":"^4.1.13","@storybook/components":"^4.1.13","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint":"^5.15.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","github-semantic-version":"^7.6.0","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"gsv":{"majorLabel":"Version: Major","minorLabel":"Version: Minor","patchLabel":"Version: Patch","internalLabel":"No version: Internal"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"497bc27312282eaee443e2a74a627a06b01e5369","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.1.5","_nodeVersion":"11.10.1","_npmVersion":"6.7.0","dist":{"integrity":"sha512-t6jfbdFZqgr/dBLPsTj4RFJYliQkVDGHn4auju/J8hgkSz8qKvoqI5nrdtLRbi4N2RXvJydvqgY++4Ok6JKZVw==","shasum":"5bfcc144963b0f81ac503666eb076f9f5ac9ec98","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.1.5.tgz","fileCount":23,"unpackedSize":62398,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgueqCRA9TVsSAnZWagAAGSwQAIWN1GhBptBRgZ5G41IW\nkxao5S4qF4NwAZ/+aVfMqBb2r2/fgf/Ruz3XOdVZzF/lal8VGxCbFWUzE8H/\nt0LPUsTTlhofZxPujyvGbSQIq5eCQ1+rXyzdN/7SctKMpGGn5Yrp1yCbk+kl\nUmBj/DYU8+Ngs+EPD00VByKYNcMLwajOPv7WjBZlzUjSwVnFFk5XMuHe34jh\nKzDY4A/XzPGYl9yeuKzSvV83JksR7tDOth95ll07vpgRkTO3Und7oe9D4xfJ\nol3TOwYEGUmzU88LBvI3vJ4Osz35/rVLtwBCrrUvkNdEswhMA/mYEYpo15MU\nvipcPOVf1Um6uvwcHE53M5jlLMTKFl30YKqZqHu0zQAKnVDC1UJXrkW/vy3b\nl+4vGz82KiVaTh4879ssH1iHTDmbHdNwTgssilDe+pN4lrLsQl/xxuj0mZaq\nUxOXD2mlhpVZLcTnEK0afFWNWtayOw75fmoti4rczNmtStWMlfO18AzsIgJG\niEFzy5cND7ItxkU5sRAnEFZf63HmFz3GUDqPJp8S9LgEHzKZomUtvLByKGIJ\n8EUZMDy/cTRGdI8xe13j1xNaP7HdeiOQ1ha+Fa+6j4GvM5NWh1KYw0W/jTgp\n37HaVpYoq8iV4e8FCqVNWYHVL7z98m9D39mOcYwdj2JMdw6y0fTzy/xAC/ij\nGTQM\r\n=qtpM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEPtvopWGdHTlbtC9BeXUGmaIOyJNzrHLKFxirjbb4poAiBTJrL3uA8qlvVb5VsDGVvx7ZSIU63LQPxNgmAHCeTd9w=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.1.5_1552082857683_0.5331650731042263"},"_hasShrinkwrap":false},"1.2.0":{"name":"storybook-addon-react-docgen","version":"1.2.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"github-semantic-version --bump --changelog --push --publish"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@storybook/addons":"^4.1.13","@storybook/components":"^4.1.13","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint":"^5.15.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","github-semantic-version":"^7.6.0","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"gsv":{"majorLabel":"Version: Major","minorLabel":"Version: Minor","patchLabel":"Version: Patch","internalLabel":"No version: Internal"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"43cb29c5cc6572bce62577ba3d58a1195889ffa1","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.0","_nodeVersion":"11.12.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-7xljgGpU2DIaPa7SPEgn/C4AO/gtJfJMP4JcPdKAaL+z58rdbetx79FEaJ14XL58SOtuJYvOLPl9ZkZXMUMTjw==","shasum":"4c4c0c75b45a5d9b83141f7c1482ce4d1de9daf8","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.0.tgz","fileCount":23,"unpackedSize":62703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckpJ+CRA9TVsSAnZWagAAHuIP/0uX/oKFyCdANOfX4FN8\npMT5j4A/OBLTpzBN6nOFl8aIO2mxb+XpYiVZYdOvS2snfuFB8rZyDUBTMrrk\nb4KhvvLbxQ3bYmO6+owIF2R24MFPXyX5qLIr2xgrO4GQZ9xdmcPIwr/zcy3b\nqtGBPTo6rcHLz+QJ9mPfkCkMjc9p/orMpX0nf/HavRs+sbARCCkWJl64pfnv\nCWx35JhMrT1yEfk/eyhDTbByjrJAx9txfhM9ZgSKw0O8KZA10xVLa3jZXUJU\nkNIVpT6SMvRosrdIFBP1yKZuo4Xa/h+IPhkgkzidsiECKaLJ9U7O4LLi0c+t\nRvIXPUdCdNHAhGyhfDeEZjfQ4O3uDzSbwS6mQjMagivxpX+twbptuTfAby28\nOoOtf3Tj3Q9k9iVb/24g2k94S5iiSsO3pyRAY9296xp3pwmwLeOwCaVHAaeY\nE0aKDhp1XRo89uqgNkMLZaSzMacqfunTqJj5aJlGbLIqMBCqch4vzHn/0u0S\nwjaF6vQ+QKMpih/GWoZh/UqWzo0cWxyWs1eHfE3wJbLbKO9lE7rQ+H3HRx68\nus0KVp438abuQ3Hj77SgUFhcl7avh0Q1RKIJ4AkjLJ5iHGhGas1wd02ueNoJ\nj/6ECmXqU5zybI1tbTdI95nLCQsQjGniaHDzif/tKf43qMR1TYpowapMj2uj\n4SEs\r\n=Lw87\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFgz5lqKFQHR6JZKsQB6wiJa8doYm4SxnEXCX4X8WHBUAiBKUZrPGyUoxMUPFplGJKA3CNfcGDrDmyw6LX1r6iT2eQ=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.0_1553109630207_0.17036254512762228"},"_hasShrinkwrap":false},"1.2.1":{"name":"storybook-addon-react-docgen","version":"1.2.1","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"github-semantic-version --bump --changelog --push --publish"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@storybook/addons":"^4.1.13","@storybook/components":"^4.1.13","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint":"^5.15.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","github-semantic-version":"^7.6.0","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"gsv":{"majorLabel":"Version: Major","minorLabel":"Version: Minor","patchLabel":"Version: Patch","internalLabel":"No version: Internal"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"caf18b878de1efbba9f29a2e16571772d0876f5e","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.1","_nodeVersion":"11.13.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-wXj1Ah2lhP9zvH5n6RzNKlv1Ok2Bar+mwie+ayYzGXrPZbg7WkzOycSLu/3KJSQ0eoYwEH2IZVQhNhBcpb/9fA==","shasum":"ec18910273c61463eafd6298f40f4d1b620557a8","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.1.tgz","fileCount":23,"unpackedSize":62588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcp+BHCRA9TVsSAnZWagAAsUwP/iOc9UwDQbUV6Ni/5A2d\nG/i0GXlv3mZ2R/GK8n88A7HD4abjCtHAveGeOFuhMB/0OkqH/ws6gjeo1UhA\nkr4hIA6HfO1EJMN3ZAkOBaYhV1HcS5WingZtJguQUbFyXCh/zmP82dUW+XpZ\nAWq6q7I2TpnK+MpiVyLEM0/fOBWdOOvQoI8RROYUoEDpDTiE4thjR4fxT6FH\nXHLEB7L4VQTJPwcYl183rz2hBIvvgrTuismW9XRADT8/DxbHXB6qxmcKoT7H\niEqiQ4lyIJtp3hZ+k+VyPWNrDt1/4Ls+IHknnPOIj1OY3JWXysCtDEuK0+Gi\nwpuqG2ExfJ1AZBqhxlp5MzpAUtpVz3Lfy/+iroqHtgtEEDn0KJs0PdgxtOYu\nB4u66y8NKbdc7f58wbqRYpzrnTAuNxOf4EGd0djUxtO9bhQvX9ryKIga/44I\nSubXBbKTYt5Ka6yI1MINp3CHFhY2DEup4BoP4i7wgW1uiBEZIWO6AYNxAlGt\nCy2Q8QLFCz9NJyQ7wft9WZPfCEQxKmn/8Mm3OGXns7BAvgiMC3fhbJx6RtVd\n++UQawwRFQeu6TbzUtGihM1r0cagi3paPl+ViUO/Oi7k4dTzvZB+JyLFhDvr\n33c0axQ/RVkjCTV/Km8RT2wcOWe3rqRC6BMoSzwxuOJ0Ncb9AuVjynP4hRKW\n5uvD\r\n=29mC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG/eWPZXCQq/ugPnZtZ2pX62aBTpZLh7GH4FuBk/l3wEAiB4RgsW9JUFdwbWGilYf+otHbqzc3g5wHAHAh1Mh0B1OA=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.1_1554505798171_0.1714486544027629"},"_hasShrinkwrap":false},"1.2.2":{"name":"storybook-addon-react-docgen","version":"1.2.2","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"github-semantic-version --bump --changelog --push --publish"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@storybook/addons":"^4.1.13","@storybook/components":"^4.1.13","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint":"^5.15.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","github-semantic-version":"^7.6.0","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"gsv":{"majorLabel":"Version: Major","minorLabel":"Version: Minor","patchLabel":"Version: Patch","internalLabel":"No version: Internal"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"ccc1ff66297e2cfac227ce6762b927e6e65c7bc4","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.2","_nodeVersion":"12.1.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-vRJUQvrmX4sutQjEmvlQjcTWDtf6Jw1qQMoyK/UNJEo9oTR5RYoT12ozYe7Pjz4bcEdU03j9xXnZ0AIX90qbjg==","shasum":"eefca64b0d582fd35898801eea791a0294bbfc9b","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.2.tgz","fileCount":23,"unpackedSize":62588,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcykh1CRA9TVsSAnZWagAA194QAJqQidl/4ZljPoP+tEm6\nTDvWWVMDrQI+qzSZhEdNZrlX/lI2gZunoZqBkubok59jhP2nJndPVjPf2nSG\n7oHOvYS+P1al/brmr8DZm5TCCASf/1YFQew/M91Re2kaR1gQFyXFlbZFRrSr\nZhFbywCRplT6EbqrdMAEoq/Q0qmoFiR1II2iuSb4ou6UT8VX4kk1HoQpIOlM\n/ZatFF7QY0W7JBXj4efD0F2xVb1sTjx5l+r9DiWZQfihjkYwaXLLj1MX7trn\n+Ke30oo57yj8KmPGy7ngsIfKeQbzT2gqmGjQJJt2xnR8V6XVsLLLBgjyDDPM\nm1H+XqhLST9ecT3fePWH3QtezBDTBAAqqRhI5SrVfv0UsGilUbug18WL5HxP\n4SD+4OAz1yNod60oEIt7+fK8RSO2gWQqulqjp/Mcuazdbxy7BN1MH4sK1Rz4\n2qQK9svSv/yN52jZEEY+ykXnV5OQqRxSeIXuf1SBWTdOetWKpHD4AItc+v/P\nrNtW+nTDKvFkLI/hP9W/5gxE5IsHsqiMejKGGLVD58WYDP8GIm6FHuWlCbV3\nNp9dP+sP8LMACjSbfMWygxFxsWhxkrYH7Zu6lH9PjBAUVDAgcDqJ1Jo/Wgko\nWjWQsk9us141Wn2JRls5vjkDzPl8DYSDMKtMJeeNv8X+IA7iBjHciM1Z57Li\nmX8f\r\n=ok8w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBsZGl0DM79ki5eUd68YDaXEFTgpIGjKwQ6yjWZ6VUsYAiBdEMNwtEmgU+yMEFA2/WiasdzhJQD2ZGg+UtEsQ1bgMQ=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.2_1556760692312_0.3935157730287073"},"_hasShrinkwrap":false},"1.2.3":{"name":"storybook-addon-react-docgen","version":"1.2.3","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"github-semantic-version --bump --changelog --push --publish"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@storybook/addons":"^4.1.13","@storybook/components":"^4.1.13","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint":"^5.15.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","github-semantic-version":"^7.6.0","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"gsv":{"majorLabel":"Version: Major","minorLabel":"Version: Minor","patchLabel":"Version: Patch","internalLabel":"No version: Internal"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"58004e93fbc4ff99bace1bece031f6c835a73d3b","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.3","_nodeVersion":"12.7.0","_npmVersion":"6.10.0","dist":{"integrity":"sha512-tI1K/vPydaKu4c+ODEe3+Rx+ZT3MmhW35VA/UHYS8JLjhyEnXkqxH0liokvHKhaYkIhhtibftJ13jUkEUbF79A==","shasum":"8ac93a042620e8405117a47baa5798dec5111651","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.3.tgz","fileCount":23,"unpackedSize":62633,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdTc7fCRA9TVsSAnZWagAAo0gP/iRDbPenpH0R5zcObWyx\nltcyXqXDvHqYQaEaEcq+VlfRZR+z9oXCJ7vnt5GlnUaCwPvjSrDq0dKq6Gah\nHAFhwQ1+mGJxtnKmHJuiJnBOIOr/9JI25Hixyq252SdKkslNXevGTOvGDKoE\nR2eYh+TyPC0tBGZdwnklIOWT0YxFGkSF2K8J35O4kxxWLzOM/ZF3DKFZn+Wk\nrIHpsnhlw6ScA/CaXT/t6PKD13EH1E2Zgp0zLX8HB5pbvsijEwYkaKMTIwca\nciz1+5U/jBx7IvO49dvJVYdLUgGRGSX9fN/ikn6cpAGc4RAiZjsYnaQ+XATH\nq0vwLc5+gyqqQUJt55AaOOBzGjqCwmHFKKUt8OUQhMRehcnqbkES79vzSgOS\nOPsTcxd+8vJDMBtKp0uSEr85/XWOmRcvY/H4pLoI48IVQxHIZxzasEXY9O5d\nFQTq1znEtguPgvPeyK3YJinIyqBd978gDueNFCylOnVg5vS7J4I/Cafbbfyr\noByBY3OSGI/bdUoxjtn+x6Vc+Cw8lKYG9GzUrAUdE+MugR1we3vAsFgzPCYD\nhAJ8hyV9Bj1aliU61JfDfPjefxi4IiAPNk7lkJ02MNzw20gZR2+QnEookLgL\nAFgoOaLGP66+KzK1UdMhPEmXLkzo5uNhUM7xo5x2vhgJr9/HZ6nHE+C8wgRJ\nffiX\r\n=HHVE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC31FY471l7ycA9jQp9zwbgVUrwYCzrO+WEIk1Uqin+NgIhAIWMYqPazglrGYLdEKsu6VutUycdGrF96kJ6mPNcHflH"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.3_1565380318570_0.5556418068252842"},"_hasShrinkwrap":false},"1.2.4":{"name":"storybook-addon-react-docgen","version":"1.2.4","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"github-semantic-version --bump --changelog --push --publish"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@storybook/addons":"^4.1.13","@storybook/components":"^4.1.13","@storybook/core-events":"^4.1.13","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint":"^5.15.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","github-semantic-version":"^7.6.0","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"gsv":{"majorLabel":"Version: Major","minorLabel":"Version: Minor","patchLabel":"Version: Patch","internalLabel":"No version: Internal"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"6b077404782d770c53938d305af56744866c7cc8","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.4","_nodeVersion":"12.7.0","_npmVersion":"6.10.0","dist":{"integrity":"sha512-zltaDOTCFI7dupakWi9Gc6lI8cANmUUmKUmTc1R1v/1KjO+fbM1+61QTZXUbF4CEwrOhwYUE8GhNeu7N6BXaIA==","shasum":"35b8745f527d8dea28c7dc50ae22830ef3bf7632","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.4.tgz","fileCount":23,"unpackedSize":62741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdTc+CCRA9TVsSAnZWagAAJUgP/33UBbCyu61bc7BDmYug\nVQdxE86EFDeY95MVqEHoKf2MFjfkKow1LHVILdQSsCjSqVSOujoBDddZ9J8B\n8WxuRceZrtHyLatNNUCGCstgz20R7toHdJFbKom7r29GZkCci2NUNejArgC0\nTpqvS9lD1ur/38EEfhMmqHi5/+U6eHktWUT3hdc90ZWOEg7SQMn5oPs3bpqX\nlBH7jr9ugPYNRgp2Baf9B5QwxH+0hnF06Zl8f/b4VreqaH76hwmb61SOhGeS\nsPG4tFq+z5oHVmKNE9WIkYKJraK0t84ZD1EvmixjJkk8OCBXpchlUcZUHv+Z\nqDDPQTgrJTNu08237GpNbqfnTXF3DCj0yy+y9JiPqo/Zu9js0i1tYBHWgazL\nlOSKLRJnCG0rvR7mTTGm4A5C0iuUb3bEqpxzd0jzdFKdKm/bMTQq/p/37hZz\nCyk+9jRVI2LSiuoRQw+EwBogvxuV9O37hoCOkiGyMr4yeTBEZg96gYsINisI\n9Ewdu55iQrgOJZgcGkz+Z2uGMi6kUzO1D/vJzTIeCasVUaiOfvj4+GXNLqKv\nwXfywjoz/Qxr46Ry7wLPH3ugk9wnC3VtxH4qUgNsak61rF/0KK+rSOUwQ+kC\ngnD+cfCOLDa6MKNdv8Kx7wZTPwCQQENozb9ZB7TiwAQYiuesfZcE/RgQh9Ug\ngkeE\r\n=BAkA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH/6qqhLi+z5H3W3v4FHzbOzgzfmTPoEDKogauVimjQgAiEAwv6OU58glbbMC2YI6jk2VPA6hI6qaGOiIj43RCyXvN8="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.4_1565380481141_0.892809399239255"},"_hasShrinkwrap":false},"1.2.5":{"name":"storybook-addon-react-docgen","version":"1.2.5","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"github-semantic-version --bump --changelog --push --publish"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@storybook/addons":"^4.1.13","@storybook/components":"^4.1.13","@storybook/core-events":"^4.1.13","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint":"^5.15.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","github-semantic-version":"^7.6.0","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"gsv":{"majorLabel":"Version: Major","minorLabel":"Version: Minor","patchLabel":"Version: Patch","internalLabel":"No version: Internal"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"0994ac3a7db89122647c7849650f978ddf703288","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.5","_nodeVersion":"12.8.0","_npmVersion":"6.10.2","dist":{"integrity":"sha512-BwSoS2xCeI9fqup8CHPm8bOwFjfoE4KDhpd+zK9RpBYMjg3OYsWtaQpwxifiXVZq/JjRzDRiVDtTM4bj21ev0g==","shasum":"08efaf0ee9a760bc2a0d710082ed56cdaa7c84b0","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.5.tgz","fileCount":23,"unpackedSize":63169,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdT3sECRA9TVsSAnZWagAAqcsQAJdI/F5zlEraFdOpD3Vz\nttbb7yn/RxSYdnpFUIVifWg5N+6GFgFbRkjFmFpWw7kr2SFQS2U5UYKReIBS\nzC/OUwWpivGZZfVU1CQ59Y2489x4EfDOEq5MvCddRNn8LuqboF67IliwkYyy\nh0bRo2KCcVegaDxpDdhM3TJFbFLUZEgqGSISY74zFug/XFtq4nvil3wHUuEL\nXSTdIKUMuuw1RIGD9xG/D2WL+IFhY4q3tHdA91KpU4POtdI58YXAz0yrlFOy\n4MIYxOYiYipw2wQstkRUaOHzD/3QDzawH2QtLH8bWOKuEgw46z6nGp7X1jux\nizFAI104zOVQwnbBT8K5EQB+fp032StpHt2jEkJvhf8tXf/4pB4nyGYFmLzQ\nElOxQLE2qMNyq44RyUo/4cAoHdaMI6JxF5otA8nxv35EdrCB+zObA8oiHdCQ\n58G8YRHkSKUfAp2dRp+cgZ+O8ADoBB+U/vNXDILDX0j7xveN5Z3hrAbcM3kv\n1n8zs+JVKKRZtNFpiTmzyRo3Qmp2gGRQaXujbhx2NBC9XnPHnPDgF6ukhEPF\n/Ek0hCo7bPPhWAe5uU7z7dcIrK2pTqOrdVeOj5085olURjtNhhE6HiI6zyob\nhIXRa6e3TejUuBclPPQweBMxA53Eyj6QOQKI3MTFMI/VTDuD2w1UaXXqK6g7\nyYDg\r\n=qMOD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEGnbokQJsKt156OCXAUCJluDAFV2UvOfGMsfSqs1ElkAiEAnv2uXC6SRwdrba8fi/hLFxoCRiWVbHCkiRaLIsEw67c="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.5_1565489923545_0.3018989010693236"},"_hasShrinkwrap":false},"1.2.6":{"name":"storybook-addon-react-docgen","version":"1.2.6","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"github-semantic-version --bump --changelog --push --publish"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@storybook/addons":"^4.1.13","@storybook/components":"^4.1.13","@storybook/core-events":"^4.1.13","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint":"^5.15.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","github-semantic-version":"^7.6.0","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"gsv":{"majorLabel":"Version: Major","minorLabel":"Version: Minor","patchLabel":"Version: Patch","internalLabel":"No version: Internal"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"421557e011773e53b55cbe190829d49315cc1047","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.6","_nodeVersion":"12.8.0","_npmVersion":"6.10.2","dist":{"integrity":"sha512-F1MzrgXQ0RjsxdfEvjlnKgGObM5ZY8vDWMqiFCHxcT48U79INBXgRtvoZ1SPjmcH/lNTQKKBFEY835J3R4KHAA==","shasum":"48308879ca2837b70d28edf92069d76bafa718f4","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.6.tgz","fileCount":23,"unpackedSize":63185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdUyGhCRA9TVsSAnZWagAA9QoQAIglk5K6RpxL2ZIy9/4G\nU93QqUtDr4AcG2i4RO2KVy/vxGSlXR1P4vpNO38I1Grt1pel/g6bdGUDLpRs\ntZ94uyKK3/1JMslSUp8txkn7eJf5VwGYs+if5qGfzM3pKakJgTZRGPiCNEJY\nL3HhTsic7DwLcsYbV5wAOOM5BBsv3y+ctgDtgCUJdSv9tV2Z3OWR8NE5DHuY\nTNzXeezzlUFzmW+rewx+S+LXAZQpORT9RVOXlQqsQEvv2zKUfujy/+g0HNBo\nnBuBjU4FoYxMi3+TuoILfgtJUW4H8m2xAjkKA5k+IDDHvzv30MahWfIxF8Gz\ncU6TiUbb4FekV8Fy4HXhbAWqFCo6B5K6mnDh/VbB+huOVzH8M/VvAuofwdmp\nrXrFXD/qxooxJwyBubLaBo8KOmxAfB99dNFvlhqE+/HrVkl1kalSbMoAGakO\nxxthquboj7n3doQKJVbcls+SWaF7cDRBPluQX6tUIdt9pzkqRlydd1bXhsEr\ni6OVtTTPiNSCDefNaJjprCsobbUEz/tFS63HWzIMBvKwbZ0ng4dDOONvXRY9\nk9JPtGM5iqR4bA9wvMiBHNzvJhrG5bGVVJ3e+qwfkUJIEPZCfYabiqbmVglf\n3clQjWn7gPT4WXZKEz45zdi6XX+cJwYma+aJJUVlU6EN8GxsxrQJLt/FS61P\n9PNk\r\n=imf+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID4H5QApCzEFeMEoOIyKQHLFtq0Anwlcs4Y8XsiDdD4lAiEAnP0a0TmIrv0uPLytCPexyZhs52fjkaJS3MSXjgVMoNg="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.6_1565729185254_0.2361441396142816"},"_hasShrinkwrap":false},"1.2.7":{"name":"storybook-addon-react-docgen","version":"1.2.7","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"github-semantic-version --bump --changelog --push --publish"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@storybook/addons":"^4.1.13","@storybook/components":"^4.1.13","@storybook/core-events":"^4.1.13","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint":"^5.15.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","github-semantic-version":"^7.6.0","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"gsv":{"majorLabel":"Version: Major","minorLabel":"Version: Minor","patchLabel":"Version: Patch","internalLabel":"No version: Internal"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"584adb2c931dbae06df269913f175fcd6985dafe","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.7","_nodeVersion":"12.9.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-qz7R/8BTjgJf0ITSzAgEsqiGyjoD36i6bZJpryaFDG1vV50HqCnW8Vjs2gZRssCQlhodhFNdFwPaPSMFo8kpuA==","shasum":"719203df72e733a785e36d30d160d979f8791334","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.7.tgz","fileCount":23,"unpackedSize":63185,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbo8fCRA9TVsSAnZWagAAmQ4P+QHJx4PJBEln8ywyc7bh\nUkUpGN57eQxy4HgIsbRsBgOd5D8lC1v51Q+tfe1ojKWNEvAivJY0t2mEafBE\nan2TVwADpDNelV+XD/TOQNNXoFj37f3uH1XDKT6dom7aSMSKtsu/IgvJcpdf\nPStY81tV793qfX3qNSipOsQJ0/Tyq4mDuk2xjN3UN0CGu+1ALaKw1DA6/Ifj\nU5Rh7Hqg78aiABQvvQwokxD8R24JeHW9/E7NWPvloD9sFTZ2PEuT1bQ3U4Lj\nSZvEyeR5rr0vOCBGKhkThMr6ciXLfnHJAglq03U6DccYsh4IdpTl9pJCPJrX\nDmUhDJvwTv5BWsGiKTLqcNwHaW5rsCVNzKTtyo2SK/KTguGxiJR5mRU7pAsQ\nr6SKhBFzriNHaJp5VbREt3TP61qq6h/c9KxFjVP+iiW1IDsVb7uX8hj1ALaQ\nWMb60OAIMVlyc9UA05t5k/sEtDYbbCxKF6BKG6jXjiPMq+zJXvWgi82Rgp4I\nyE2mzdjgmeN9a9jbgaRAZRrn8Q8B0D2txPi3TI1jPz3YXHEBv4F3pgmdOtWZ\nVO/CTf+VzmjFe92OpWrLDQyN7VVzg67V5/zvTuZvxJbuAMk/vZlmla0sP7fb\nBT59tC1pzhZxX5pgrNllFxxM+ZyHjgFC5goP9XKy9CRsm/j+FxLVhAfywVyU\n9zo1\r\n=I0tC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDp8N+BYp3mikdFylyZzWu6lwwpVYmT4EYDSuzwUErtaAIhAOFYRQ8T+Un6tEc4Bbooq+BGjtZds+p2yo5zm/c4DL+e"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.7_1567526686852_0.5852357073118355"},"_hasShrinkwrap":false},"1.2.8-canary.a48cf60":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.a48cf60","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@storybook/addons":"^4.1.13","@storybook/components":"^4.1.13","@storybook/core-events":"^4.1.13","auto":"7.4.3","auto-config-hipstersmoothie":"1.0.4","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint":"^5.15.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"a48cf6091c872a527776505615b97469c379fbc4","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.a48cf60","_npmVersion":"5.6.0","_nodeVersion":"10.15.0","_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"dist":{"integrity":"sha512-wE3Ts9FPStdyMx6Hpn9NbtJFR2gv3IahIYogQMeujatx6BXHteun4LzImINs4C/GSAIipfi19XZGb4jZic4qbg==","shasum":"a4746f46d9b908748127c079235c1326b7637f7f","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.a48cf60.tgz","fileCount":23,"unpackedSize":62815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbqRICRA9TVsSAnZWagAAc98P/3d5+jXYe8ZCif8iqYlD\nUmyH7C/mjxnvdtT+Bh/+R30xbdix4X8Z8si4DRcbiuGRuW4kLARyAA/G8dAX\neJpBrQYWtb7wo0k1T3eWK7J75y8nkXaViWlUv2YwpqvpFv9rtNtFZWlozud2\nx3uyws4yDUVWLfAJ7cg6KazWpi/ZHsHdJLWjasOId4ZXsIBlOYKD1MhhqzV+\ng6oUBxdUtm6gbI4VhoeY0ebkRKvm3TdgrKTGiR2kBo0HQwT67r7gFxJO8Clr\nw5kop/AVrlVzXQ+r0WAjTXROoNXiM5TdxbKOU/3w67XJID4f7WJcKoiHl5zM\ntkMh8sWNsP0wInjxPp2CZPP4Rr0Jrp63mvXyqumudQj53dyysekI7eXcZIfU\nPNBy/y9Rpvgk+Nvs07+Vr2TYAfqxSeyIHATM1xwZ2tAY19KqlkxDlUKNdeMs\nr6h/eNOsz9YztLvZzbWioa7GrF0V2mMCQ3ElNSOZBrRF7WREEAKCZeVmbJPG\nbEO+x+N25EMEQPfhUu9OlQYKH2Ve96B3xVZF7+rMqPLTXBOxAycLCzS2ZINr\nrw55Tg0X9DiUkHtbJz/ZA8LN1gBUkhhhac20MxlZUm9RVD1+inZNIyC17mRV\n9dc9F2L8Wa0vK5ufr35lbiyN6Lp017FAf/nhK92HN4Rp2h2JEkBcH5xKz/k2\na5sB\r\n=uy1A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdyefoBNItqq1xA/6BEx/M/kSvkyjwJnuM6MVLwdnqkgIgO/2rDZ1mtNtVYLFLluQSW0BKR1Qn07Ux476ioja7De8="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.a48cf60_1567532104298_0.5966202658977109"},"_hasShrinkwrap":false},"1.2.8-canary.123.0.732900a":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.123.0.732900a","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@storybook/addons":"^4.1.13","@storybook/components":"^4.1.13","@storybook/core-events":"^4.1.13","auto":"7.4.3","auto-config-hipstersmoothie":"1.0.4","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint":"^5.15.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"732900ad696176d98dbcb1a5e56ca704cedf40f2","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.123.0.732900a","_nodeVersion":"10.15.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-BZucbyhaMCQAchj7l9Kms4PimsB2mumiTomhZhxKQ3greRlLr6nXqTna+OPlVYGwfXwOM1L2z5mBxtIgUS1ZnA==","shasum":"2df607a7aa4ff5374379c7c5a91c5b6df708a178","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.123.0.732900a.tgz","fileCount":23,"unpackedSize":62824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbtE9CRA9TVsSAnZWagAAMQEP+gNZRg6syCtNyBGSc3/u\nnyaYSelG9rd7Nljvozi/w9Bv2h7EdJFjZnTOnUC/JWFJKGh2lLVExhFT312b\nppD5iovCrIljT08k99hXNH8m+KTO2tk3MeWsNYZZ7vXsqZwUMZ6uGa4zRpaL\nuQ8kyfA8NwGUKlxIKw8rvq/6uLoCNmZs9eQl8Pdw1ZSdqvyXcsIAvbi+zLUk\nGY8LTXD1NY9x6gAYo0pnFxkQy95x0rfMw77ACCZjv5e/1UkRcGSNNXAvSbuI\nT4J6w2/Doj2ljeYx1mhqaKiJHbAkdz0CF5HoHre22yJZbaiFpILpUDehTh93\nhlRleufeiBfkhe830SEGY3oeBqCg4rrlwQN/jUYIkMoqnw+ZOoVwJnLJmWWp\nCNXRi9J0siukCr/y/qRNpDGpd1tlRQA7sNF6Ds1cYCh+Ojb7/AmGZH0jLFFS\n7BwRr6m5GFfk3MrbdF8CUz/WADtgNLv4qnQ6juNVtk+mXVfTBpclomnfnKEb\np3zIa1ESs6mbsT0rKKyVNjusnEDVeHP9wva0Ed2cr/jeHtc8p4Q+0oECQjnm\njvxgKg3nDSJh3ZiSMsFJgpP+lT+GNo3owyZXje8dDrLgk1op1rDpZhgsz07y\n0PPXhbaM15xHJUrgvdxXiJ2lo5A3kwWPbwX9wIwLf5FenY6qVy4ACDjZFJdl\nyDpm\r\n=JnvQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF/mpyRErCVuyLvfkkUG58Sqw5kOHf7gzAPdH7mkKZIUAiEAjpjsxfhA1ZPUuL9fiWrStdl7PUJpEGXevuT7IFf6yw4="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.123.0.732900a_1567543613180_0.3411509377129387"},"_hasShrinkwrap":false},"1.2.8-canary.123.1.732900a":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.123.1.732900a","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@storybook/addons":"^4.1.13","@storybook/components":"^4.1.13","@storybook/core-events":"^4.1.13","auto":"7.4.3","auto-config-hipstersmoothie":"1.0.4","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint":"^5.15.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"732900ad696176d98dbcb1a5e56ca704cedf40f2","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.123.1.732900a","_nodeVersion":"10.15.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-HXqhPgtFg6ir7ASjPnVeX6XbYAiQj2/y8qFp+VYHoCK3bf4rpaRu8q0u2XnyfO3jl3zgTKlCoTPXngM3bWRS1g==","shasum":"0048e423eab7974ff4f2262326795667da4a3c52","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.123.1.732900a.tgz","fileCount":23,"unpackedSize":62824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbtFrCRA9TVsSAnZWagAAJ6oP/1hpsGKqtVI05gcFUsJ8\n5LW2DkQnBH96SXn0+VwqkCnErM02GZtvlFl3NibcRELveeLdfJs+mhqKfdLs\nh+rbbCXgSeZLwc18dYppII6goFujtA5xl6py/brLGkUKGP6x78oCT/stIlY4\nYxjiDqInoTlUEoHxEfjZzmuZ6rIyWZa+wuytNdjviQIykCvZLZDWEW7geHWT\n6iikDCGBr3q/43BhVBdDvDnfCmkFCPLZuxefVv1ynQNpg+jXeLX1eL4lMjhs\ncyHaHfwUkXZUJUHHMObH1vxs41EkMjpMLYxLV8Vk3plRIdcRNwXFrCTmci19\nh/0Iu2m/h74x5veZiL/kS2O5wOq+n3OKVD0nM7atKCLZ9MWb9FWQ5dFL89vx\n49VPGzdXRgF4okv3aHeIn0JThGa9z8mE/kfUdk43keSffOetspKyKPEzKpsd\nsK8Io9L7NoWJM9X4o/i2EqYNrQQ8QWbAkCJpmnfyuJW68i0VKj9Wh/LhjR8B\n4ctCY7dxzF1ptZlWyx2sT2BYiVa6gw03J+TWuxH1b85HWltsK5OFt0gpyxle\nSHMgExKr01bGNQE0qGO9F6wzdvv8pESGbob5OBi3Gw7q41gagBzGwkUZyRcn\n7006xocxIEIxawKz653eEvd+Rr+REnBLwDNrOFzKfQfuDoFVsQ50NEwifdRb\n5Ir8\r\n=Ck6P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4okY/URNAXVURZ8gcyuePGADSKQXN7S/dVu2BFPE+uQIhAMI2HeSc85WUS8D4R+ypH8E1ITapg6zmPYSOWNwd5RD5"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.123.1.732900a_1567543658606_0.3551280582528662"},"_hasShrinkwrap":false},"1.2.8-canary.123.2.732900a":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.123.2.732900a","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@storybook/addons":"^4.1.13","@storybook/components":"^4.1.13","@storybook/core-events":"^4.1.13","auto":"7.4.3","auto-config-hipstersmoothie":"1.0.4","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint":"^5.15.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"732900ad696176d98dbcb1a5e56ca704cedf40f2","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.123.2.732900a","_nodeVersion":"10.15.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-7PjerzHcWmSslRnUBe7DBg915E7jKrvAP46vt3vazQKo3wjHOq6H4dDSMlgHBZW4le8mlAnY8YpgVTydKvQWbg==","shasum":"991864267700f43c274367a25f7dcf1d0762b8cd","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.123.2.732900a.tgz","fileCount":23,"unpackedSize":62824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbtNnCRA9TVsSAnZWagAAhIIP/ibAp3ybiYAVfmfEaafb\n1UwH6/9NKG60l0tmT/L1ptEcdYVqU8MeGprABDzHgmzhHfYGeYa93NZ2+JJe\nyvGmGYPVKgaT4MX48LM1j/6bKPGf5HE+WbDkgx/dgQia67pC/yfARkkEZIUV\n8zQELzp+fRFd7xa37kte3B/M3j3inNhbMV7Zp1/BydcQMx8MNIT0kCylJXMQ\nuhF6awKyusxAv6BeZ0V+B1gF3N2eLlCN8FHwh48h8zH0RXyHzQX1S7T4GH1Z\n3w3Owek6gzjvt7mQaVsrBLMAYFivItXZIMt9i+Z9tBkgowc8yJ0ua5olXs3W\nz2Ppv+oDNcaqQEpHSpXAcKzollUcxl+27ftNrX10aUN24hwq+RHXUn8466Eh\nqBXPfn/P9F2FeREA06UPoeTxH3134Mzw/Ortmx29kObk5cBEkBdK6dWi31c+\nZ6NQ7kzsVBJR54aQ5ckcCxEc5AOZhi4UhRwtbqB5f3hwspXQJqxiqRzPtYDF\nF4b5boWO59QPlvlAwnKI/tGHHQIvdJz7tsnefg+gK+rWoHopa/0x3TT5AqQ5\nG+/sKdas7HMBYUNXnfyf2sfjxFxsDAE36SZGJ78GWzH+4+/IoU64UtBOuW2A\n+o/GyHsfxeTKO5o0O0iX8ftT6Ckr803UgRdmn6ff06h3uNDZt3ztJynniAJU\ncxhO\r\n=2qOY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEotrZdScGsM7AKNmjBYqkBpPfRVqMvwRRrUVUhd2CJNAiBlPWgGmJ572MaJv0ILBAp0hY3lF4Jg+kKf5A/gxeeJLA=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.123.2.732900a_1567544167109_0.8341764828323028"},"_hasShrinkwrap":false},"1.2.8-canary.28.214":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.28.214","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@storybook/addons":"^4.1.13","@storybook/components":"^4.1.13","@storybook/core-events":"^4.1.13","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint":"^5.15.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"66614bdb2707db564fb4f7871150783b980e9fc5","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.28.214","_nodeVersion":"12.9.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-TNQwGoMrbinKoM695QOwZyZoKe07kc1HB2AXFOlClHhQWtTo+5wdJfbU2lVNlJeCZPRfPOYPYBCAZisUhUYSDA==","shasum":"7e38a4ab3c1eeeb7934a91d2571afd86d24316db","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.28.214.tgz","fileCount":23,"unpackedSize":63223,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbtpZCRA9TVsSAnZWagAARycP/0FtTkkOjsSf3wFBk7Fn\n1hikNpIo1YkdDIUDIsDeDQz2cF9eaa3nzuvkAged2QMd1rd93wSOf6pgqIRj\nj4vmFwO2mgC6qYO+aHejfELZkiUjnPbmRdh3+lcBXD4LKmUT6Qlc3a5+Qopc\nRGY3Z5NunfPlt8PIlfuchrqbRv+Vtv2N2zIYxweXbNFYHMYBCX/2XrIhpMQG\nGQ+dphO3DnyrgsgOOnCmNuENgNP1okSR1stcd5QV4p8GBz0WVy9t/VsDcbZI\nCee4YNU6wqe86smQaHst15JxlkfIXIwWDgXAoPwPWxqOp75j9c5Ax+IKscX4\np4hSD0QNC8vbn4419K5+hUJi0leJDxD41/t4Xo1+nTehyrZ81Z9uW6vfp9Il\nerOKMxGbj+YG5ZqGVZrd+w1vPE9QqKYlLlzB8H+06mDDKGYnJeJGhLEGJnMy\n6DQb/99Mb180Lsu9maGFremK36OaYzb3LXve/kcMUsmAJGISRvqTAs39RwLX\nMROEhSIymdXar1IXRrmiOw5r6pepLQM2jrJ+xpx6SD9xN8WVh4d3j2bt8l7X\n7xIWVBlp8jB0xTA1FLYuJu7F4DgDIfXHRVwk0V/kck3PneC5vvlD/r2Y2vJV\nQpzmtSI7u4/J0p1qQB3KBn+t76szKOV6jKMX+w75nrn/fNOeU7f/Exz/YMbT\n+2zb\r\n=wsdv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2BjEi9oDv3yV8fcZUNBibI8uq4SU+F27x37FCkWHWcQIhAPukirWO+Vd2lC4WQjbK5py2wBUfAJaYTlrjbe8cmw5R"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.28.214_1567545945000_0.9199186568662627"},"_hasShrinkwrap":false},"1.2.8-canary.123.3.66614bd":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.123.3.66614bd","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"^7.1.5","@babel/core":"^7.1.6","@babel/plugin-proposal-class-properties":"^7.1.0","@babel/preset-env":"^7.1.6","@babel/preset-react":"^7.0.0","@storybook/addons":"^4.1.13","@storybook/components":"^4.1.13","@storybook/core-events":"^4.1.13","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"^7.0.0-bridge","babel-eslint":"^10.0.1","babel-plugin-add-module-exports":"^1.0.0","eslint":"^5.15.0","eslint-config-prettier":"^3.3.0","eslint-config-xo-react":"^0.17.0","eslint-plugin-react":"^7.11.1","husky":"^1.2.0","lint-staged":"^8.1.0","prettier":"^1.15.2","react":"^16.6.3","react-dom":"^16.6.3","xo":"^0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"66614bdb2707db564fb4f7871150783b980e9fc5","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.123.3.66614bd","_npmVersion":"5.6.0","_nodeVersion":"10.15.0","_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"dist":{"integrity":"sha512-Y5ubtccZfb5jiuagIG6UTTNIhAVV8hVR17EYeWX8GEg7PskKhdcty9dAi1P5AnImeL3imfWvAHiCNCQBwTlZ/Q==","shasum":"a6f476fde8d81b45ba916e2a1bb990539bd52998","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.123.3.66614bd.tgz","fileCount":23,"unpackedSize":62824,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbtppCRA9TVsSAnZWagAAUTsQAJQVWKU7zh/TzePedj6R\n+55YOjg0uwgZ7QFDGf0EB4JT8+DSjpBj0Pf7sRefdUGmbWvNa7Qcr6YWTQmS\nqSBN68d3cNY6701RUtLzbVUkaXvvY8ynHcddPezCC3HWYkhZBHKUl9Nw0sq2\nfT1RTYgj8BRxDeSNGkLvx9+nmNimSYlFv2z0xTLMCjkJ/faiJ1P5FJ+kPcxh\nsFoUXch6ybH0lOUW5lwENo65n3cWp+nXoNUNoHEsdF6q+6HRtps7zD8lBodZ\nhwL5g98r3exxTnZGmuYKDKjXGzGulCOulzZy7edaeoEev24+K2+0sPey7u8X\nGSMx4TsEo2Y0TrzEfcy+yPJVkb5cFpEWPWB8XWK+WT8onDQOZ21S7JeSrYl4\nzwt7lsUDEgaegYUdVH61QUsvSZyZylI3a9kcq+Xsg0fOABx/AKH4C4LnsgOg\n0c3qYklNl6qv5Osql9+c3svSj+cstcuSjVHmToH2hRTp2LpDQBwd58u3WkyC\nC3Qpb7//4U2xp0LGQxUnTksUNGLflPWoOsOLRqKdB5D8jaq54VpSArjK1cM4\nnOACLxHn00R/vjAqzlvVBN7nzdtPwxWDek/s5CuUjR9D65cbe+5cVQbnepGH\neRF0rlQiZWozXX9yWl4mmLWI+6YTSWN2jmHDD1W9l/NRN+N7SFmjue7RFGzj\ndR7g\r\n=u/an\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB1JwQscwOUixkYsxdqUe+Taz+JX0CR36JLlO2Ii1HcaAiB22ICJkwgTW5QT+n88XFOlpX/tGwMd+c5wH/SUIeV2NA=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.123.3.66614bd_1567545960581_0.8282083279235657"},"_hasShrinkwrap":false},"1.2.8-canary.27.220":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.27.220","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.1.5","@babel/core":"7.1.6","@babel/plugin-proposal-class-properties":"7.1.0","@babel/preset-env":"7.1.6","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.13","@storybook/components":"4.1.13","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.1","babel-plugin-add-module-exports":"1.0.0","eslint":"5.15.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.2.0","lint-staged":"8.1.0","prettier":"1.15.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"b0ec8895257736e8a15f9697120a371fd9d6239f","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.27.220","_nodeVersion":"12.9.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-j6VO+8ZLkr8Y48rF+XtHy6I6UiGYw95+3eFn/dSQWqgeWF2NFJjoRpxbTUwkLAyFB/QEADlFqRqdv9FY1dQg9Q==","shasum":"b8cedc5a8336eec2add6a66f93f03ae80fcbed55","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.27.220.tgz","fileCount":23,"unpackedSize":63204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbtsnCRA9TVsSAnZWagAAEkoP/1X3CjecdAFWyKUJyaXd\nsB0uuEGSUaU95MQSRzjGx/XcNFxxY2umDoLcLmZyDKV2wtfnMS0NRFpzD9lk\nfTCcXhT4lCh5mx9KaGCYU1HoQUOZLN9B3IKAj+3+N1NJgGWYCX+Nr9QWtL67\nl2ZriWJzrJYzf4FMJoWKzKFeMsDYvagGwFG74yVerBiVQ+D3p0LU5k2XcaZu\nvVWOtZ7CDGqmQTUTY8jvWOoxrldA1hKOujHnGJ6ShY9z9KUMDOhQFVDF7SNo\nBn+9gIif5DlPKQMIZN07V6Q+3eDUWW/3dwtPJEFL5vixgRgus/ZgEBapj6Ht\nc1TULr3ZmfEssALcAmeUk+Iup+SJaUnxQun/rj793hMh0gCWorYrB/s1koVu\nQUHxn4hb4cDuKnafw33VeAjcbLNrIi9jnrj462ej/4K6UoF5etDRKzBn2Nau\noyq3x1AGqpoxOApvO8RjcEFd3fTzBDQkrcPq6DSER1DMJ9AcH7VsspY+irr8\n3CHvoUhjPr4jB8yhRb3OjK3LJiLISHSNrqtFooFmWeoI0dlpBFpA1dZfGPkd\nnnyQl4ILOi+IZ+2chgkEQCdsLf0+qX/COK/JxJPZXzc5asqhFYwCkWamBBFY\nfAjAo+9i1L4q6aZ1Lg40yzJsH74faTA/5djBurbqfxHxMKkCfORyp62H7WhD\ne58l\r\n=D7Ol\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGBDK9pXMWlK9GnPHVzGVlbUAAD+oGJmhqaQahmRe1hpAiAoW/efeUdzNtPCMbOeOAE5fjQ/elzrg+cVv1TMO//XhA=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.27.220_1567546150853_0.9019505690442411"},"_hasShrinkwrap":false},"1.2.8-canary.30.228":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.30.228","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.1.5","@babel/core":"7.1.6","@babel/plugin-proposal-class-properties":"7.1.0","@babel/preset-env":"7.1.6","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.13","@storybook/components":"4.1.13","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.1","babel-plugin-add-module-exports":"1.0.2","eslint":"5.15.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.2.0","lint-staged":"8.1.0","prettier":"1.15.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"995313717cb9790393f54be37682311f6207fb81","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.30.228","_nodeVersion":"12.9.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-Skb+i0ZT4+UO6TwmW6RmAKnmNTeMHlhMp93rEn147Sn4hHtyfQm+7sVIWe2fVr+zs4TwrCU48Y0HeDwQSq+kqw==","shasum":"9bbad26a4e13b96696d05781a1540318cbf7a201","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.30.228.tgz","fileCount":23,"unpackedSize":63204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbuJWCRA9TVsSAnZWagAAHSYP/i2xWqY208tiid9VH5sC\nUOixVlMT+QGuf32Ifq3iwo8gwkP7gopTysGH2QfgN5xNfsMCDOKCYR/pb++9\nq7AAC6Vx9TU48h22O3krGdN6UctKWZiE9uhg/oA97N2H62/Xeql3jpDzYHue\ntEv9aP/YzICtucO1SSmSW8tl0BOgw9O93xhIzn9YmH1H4Bvre2PlLzowbrlX\nmzasQszHEMrgik0wQinMvwGejymuCe4qSq/UiL5WXjCf88WPzPUck6US4yop\nhEB7ysDW1ZrVbFh8zaDy4mOyEZ7T4sAJIjIfG0KHN+Fi9FWpgcFrn2M8bXvG\nwX8Kt4UE0YRI+lEWwqznxvgYUhRebAN/8tWFsX/4MO1B1crfNgTV1+DK90wO\nGP43VjN9QfLZav/3xQR1M0ohUEu+TvzcmPVEt7EVb128LW1ZjHHdtgRO/cY2\n4iNWIBbCvENFLO103OKbxswsY9NtZAxvfnAglgbEawhhahEk/mQ/rJ8r8g7d\nRj0tVtF+YbWbQ9lJIMGz+8Md0b6r5g7ITaIOvSEPr1BJoVBF+cEEualGQQul\nFd2KjwxvFPXiBTFdnvjgaNb6mTo9QAYRghofEKLvcO4DivEjyaSyNhUFKyU8\nVDH6W1VxzV2rUKrLjYS4cE81XSz2u3DMLP2v5iGKZnUtK0++xDLnpclqfJnU\n0qjy\r\n=OMT5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpa5z/UsDeTrQhNsnr0wYiCDYbqlsLzmFZZAR7JgFlkAIhAMwY1FyyIz3eQjgHFLyvZ5V3dc1yN0ueTwGUTtF6wFPS"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.30.228_1567547989632_0.08391724749464369"},"_hasShrinkwrap":false},"1.2.8-canary.29.229":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.29.229","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.5.5","@babel/core":"7.5.5","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.5.5","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.13","@storybook/components":"4.1.13","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.0","eslint":"5.15.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.2.0","lint-staged":"8.1.0","prettier":"1.15.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"10950569d5ccd42561f6ad01181b0cee3ff6b55a","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.29.229","_nodeVersion":"12.9.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-POcFVmwkG4DunVBm7RDYj+gx1uqKT30Lks7kbGvKeuWi7fYLyMUHQWEDeoan1OB8lsblID4Eza6xNrjUJYKBjQ==","shasum":"20506d63614d7aba4d6b6d09363dee26b91259c9","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.29.229.tgz","fileCount":23,"unpackedSize":64115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbuJmCRA9TVsSAnZWagAAvoMP/jMcjWTzMR7C5dL/UhVe\nXe6mYcekKD0tbBYjNOeU2xrldIahUJSMPO4sZP3zA6pls96BOdO1BAemE4dP\nzAHbQePM1k18Wph6gjoPgBdng5N5jkP4vuvEnDDyLzByRIeyxdSCvumADkD3\nUf3fnimUgK8nGIHcKaXfd0HYJIUsGED6SST/FexF+33SPe7vQFfJmz6GjUn4\n753p2o33XmO6SQOYHPeUZ/ZvO74uig9YaNUuRTYp7MP0y8F09mTFalAxWLgB\nmpG5QcTbxtGUEGVRq2M410/ztGqG9D/5ZtKNRDkbtzYwrfz32LGrOU/NbRMj\ny9Dr1xY2jENIyB4hsKDAKtWLjM8vptFW24hR7WNtMUa6VzGWijxfInAC7sBr\nj6TpbvAD02v9Z7KCl8uGoKNnvZl3QHAQy1WAQwcA5D4Oe3sPpsQdQ3BpMuKi\nda+H5XSIAuP8oYtCmF69vboOh8R8UbNYrTE8fSjcAjLv5RU0cCHYaN7//W2r\nB4O1kahCmnpaY2TlMLrt9d+55cvPnuSPELjeGRSrn75VNe6QvJdBqUCqCXa7\nFNxkbCJhdtXBntugTGZU7r2KeH/ErDEWK+00xwsIXOqN9Kc+NuUVBR5q9caA\nAz+X/GYMt0zZbDWZ80uwYoIlWzozqv3CoHe0fk8LzZR+Xc16vZj4xi1d2Cdy\nTJsL\r\n=IQzl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAtJJWCmdYzEm+mkeYlA6wmgsbWMDKKENtz3bPRPs9EIAiAP771LO02f0dsow3e+1KvxMW6hsvU1l24avnb4VgNDFA=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.29.229_1567548006085_0.7928703346402055"},"_hasShrinkwrap":false},"1.2.8-canary.31.233":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.31.233","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.1.5","@babel/core":"7.1.6","@babel/plugin-proposal-class-properties":"7.1.0","@babel/preset-env":"7.1.6","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.13","@storybook/components":"4.1.13","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.1","babel-plugin-add-module-exports":"1.0.0","eslint":"5.16.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.2.0","lint-staged":"8.1.0","prettier":"1.15.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"f1e363d8705fc636581063b0b148e53e35f04b49","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.31.233","_nodeVersion":"12.9.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-Tm4QSWl36b5jvjTnEPeKkdW9pNXa9ljyAAQvE9y72aYUWvFXzX5Pn6H+Vq3I3nPSp+S/LGqSWBOFhsxLuZpU1A==","shasum":"e1ba553a37352c152a4fc6962282d1f826f909a8","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.31.233.tgz","fileCount":23,"unpackedSize":63204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbvt4CRA9TVsSAnZWagAA0BkP/3IK25Rfumd36PTR6B6q\nzIzEAMQk89dsiWavQR7JE++E1OyI8s7gzRY00t8fxtzhH+eO5zbLes4Tizae\ndxskO+Di1uyix5ZuttcHM7Mn2G5Z2rrxHuW6WYCONqAc5cKOqb0I4BBi49A8\neqBG4vJoWi7HfPPMi1ef1zWmymJG338r4tZRskwDKlop7PUHHNCaiwqbXD5S\nt/n71Np0Lm4NXA6TTi3AsPv1xl5iCgB4n/J6JUG9lm8Lff7JV4//m5PQea+M\nSSVXQu66e/Yvl1t8UmWFW0wJGxsOlAO+xS4cDJnOvV/cFHaFct3cztblBnBa\nS8w54sRop9HeDS12XR+B/yHyvcXQt8nPmTTnY6i2Ecn3MVnzxpGkwaygeUNH\nEj5d16zNNEJtwnekt3a4l9td+jWznAiRny2SqEObDKU8c1ZOlEF5OCWjtzg1\nHDfd7ft1b27GBIaVJ+jtsHvaM3Sk+On4XAbvO9icKrPzNYCv9JjlaMNiI0IY\nxxhmNwo6tLF7yZp5XXbjO7Qw7wQz1z7D3ZZA4m1gc3p5bJI6FSkBUVCFEdSc\nOlG6siTbR7IPDIJzbuLfe71KWPhF32KpNLnRM/dwk5hXjIpxP7I1x+5uodjd\nJ+3VM0ecivniqiYD3V/SgIt6IQJWZnCzS6kpGU5fkjBHwV2Cqq8kkHgTIMXd\nBF7q\r\n=reoS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBmAiYovy1jHHBgOzDfHuMSTS0JvvnO7TybbTCCrXJk8AiEAgQ1EoGTVzPCt3N5njUh3/lWm4Lnlg8eb7dIRQqHvi1w="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.31.233_1567554423906_0.6352047541792585"},"_hasShrinkwrap":false},"1.2.8-canary.32.235":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.32.235","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.1.5","@babel/core":"7.1.6","@babel/plugin-proposal-class-properties":"7.1.0","@babel/preset-env":"7.1.6","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.13","@storybook/components":"4.1.13","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.1","babel-plugin-add-module-exports":"1.0.0","eslint":"5.15.0","eslint-config-prettier":"3.6.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.2.0","lint-staged":"8.1.0","prettier":"1.15.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"a27ebbacb1a8959e3d3bdf1ec1a304ec16e20783","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.32.235","_nodeVersion":"12.9.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-4wWGn1lpCe/+cMCi4bmfusKPmJ9XMtbgUGdAwA6CK9TGoQsDgHT89ldymlj+4+S8La5521CILQ9TrlDSRddTkA==","shasum":"d9340805203df9b7b0b27f43900f2f8540d30f44","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.32.235.tgz","fileCount":23,"unpackedSize":63204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbvufCRA9TVsSAnZWagAAhc8P/1VfhDWLAAoWGoiLeM4r\nDhRaE0te5SGNWCTmiFAZzAZKye7ROgQF2VcNkxQGHon/Qx10pcbwCs2Q+0/f\nU/XPfiJkdb/Xul4AlQpzUrTMoMeUe3la6wNj5MEEibc/EijSga/ayfCszBwn\nywqDKB/1CzNKShrdW6PTbyKNP00Dq3ESrATfrQl7C7R6wcOZPJgmKNRsWR8q\nG3ZKM6ivtPE00Rl05fi9HiEXKjbvPZJHgLLybWy/hHd6kFaaol5TjTGZl2R5\nsufH22oNz+BacGCvwou/TxJyaXRzK6DsGaMAQjrsVgr3oeDZEOuKlWoiYfoN\nBcMkCN+8qb9ESG/dgn0AJ5GDcZSufq78repVudYKZwV11OQBe48uLu65CNTJ\nT2s9x8EXL49SLt9MCGeDxYpN5EuXNVDlmLo1IxEF5kRthBzxRwWo/qRUNTes\nzgzmmicIIQ11y23aHr9x1JiVwVYJ1CBiYQZ/u5uJvnGE7s4XJOB6GqbrEpTc\nR6Q8Xikc0ZedZnZKdgzr9ihtzsfGJ0wzwpAJRvSDHcMEuUiBE8etOwwNGHhJ\nlYY2HAvJnGuFO22EoMOJIY1WWyo0azpb0mLHtUU/Jg1olEkqH2qOFJYT693d\n+sH2j9lKSitECil4tZbl0sUexZfbwd05qz6UJb33i2y36kKl8CRJexcK8LAG\nUV9B\r\n=7RHk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXU2MzEDhhfVcEYAF5eM+Anl+r8s/dE8+QtjY5STEifAIgUwdFIPwx8DNdNrpt6XAgUYBKDkP9qlTiDxn2Pal+yfE="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.32.235_1567554463161_0.5729893277462075"},"_hasShrinkwrap":false},"1.2.8-canary.35.243":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.35.243","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.1.5","@babel/core":"7.1.6","@babel/plugin-proposal-class-properties":"7.1.0","@babel/preset-env":"7.1.6","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.13","@storybook/components":"4.1.13","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.1","babel-plugin-add-module-exports":"1.0.0","eslint":"5.15.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.1.0","prettier":"1.15.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"831f03261ddde6c637c25017cd45374efd1b1a41","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.35.243","_nodeVersion":"12.9.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-Df9Lfg+J2n6XArV7AYqzedrrHip7hP9bmvBZwWfNFkPRSOpwnsmdQiI5gvGJr6mf8LLE2lp5mr1y2JzzaUq4FA==","shasum":"27966c2dc00b5a911fee61728717bf287696b752","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.35.243.tgz","fileCount":23,"unpackedSize":63204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbybSCRA9TVsSAnZWagAAGwkQAIAKaYS6ftUKpM6+hIV3\n140DR5V0fm/+8pu/jIqxAmE5wLgEQMtot+sJW49Gu7m/NpO2Fx0PsdeJ2feE\ng90sMaQvPGCSTRRgzKhdFcxLm6yBIyi7QYnQa21e+KqL5RwUGgolYCFxwL7A\n4DDGIRjGNFHGMDtTs99G/6BVB708Kjrix9xlkcp08MyVtwNWnC3E/2SH2+CO\nvwCTubVeVp3nQTHgFFA7fj3Hlp03ySrupMhA5YOgPZiqbbX4HxgZEwW3v7+K\nIyJysFSpDtCVhU78OmJ3xfNeSyjTCuCEl9xF8pxXR+D/V8mvAEZ9bqglz8AT\nJHbf+01nEmfAYVtZDKri9GttGP7pKzH97CU6i1IWK2F+y70q2rE3BygJ3Iwa\nAxjsvfNDMC7NVBTtSIcl1tpZZxLUIdEwUn9hJHoV8WDMu9W8F40Nm9npmVyI\nvHxgJcjnMBo8NqEcy9xfoubi2cErmE8ogxPaDHEcJZewQjvN79VDeg5wx8Ik\nyDToqTtYBvVDMUvD1J2ydOyheUy3rKZ8UqDnT60k1+bR8PCZlI9o1vLk/upJ\nwVvIILbH1a+phvMUm/9XgPZZeuoVTkV9zYHa5D+WCJtmUTyV0JXhRosRpz5U\nsto5n1f8KEdY5cJogFdovPgD9rwqSBelw+d1Hq320aESwBnl3j6UlPDpiPfM\nrX/c\r\n=uhf9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjZo6jJA59MlvtUFjQ3+QwqsZeD/qutGOyxGLtUizvkgIhAJ1L+okh71pS2YRvVgKEX9hrMQcKJ/bxY9BoWFqgOIHv"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.35.243_1567565521704_0.9198838144870791"},"_hasShrinkwrap":false},"1.2.8-canary.36.245":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.36.245","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.1.5","@babel/core":"7.1.6","@babel/plugin-proposal-class-properties":"7.1.0","@babel/preset-env":"7.1.6","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.13","@storybook/components":"4.1.13","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.1","babel-plugin-add-module-exports":"1.0.0","eslint":"5.15.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.2.0","lint-staged":"8.2.1","prettier":"1.15.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"90c74884844778bc1d2e18002a52cf3178396a6a","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.36.245","_nodeVersion":"12.9.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-ryex1RxUBLbYOphRygWsnNcFpnQJHnRJyIqY6MT1jtbewIX9wXwqWUtKGWGMb48M8usBHiYh3JtTly6Kaxai6Q==","shasum":"297c9f6c3bc6ef5da98b996c2a8a858c5dd5666c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.36.245.tgz","fileCount":23,"unpackedSize":63204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbycTCRA9TVsSAnZWagAAaMgP/0XYxizcDxbFyPnLbIn7\n86gy36IcyZIkIzAV0HuyPmYpwIl87RGw0xxVHG2hPD+razTGpsbsoIAb+ndm\nVRfnpBa8lW+JwX3yCdInjQ0vvyr7RteAxgWSBNZxkG1S8xd9/SdDGwNYOynh\n3vAKZwBlZzZwbsfcgl2oitQ4BoV5eGdZ+4l8/ea8r3tMCjybq+ZYr+AMFF6N\nd19AKdTQlxEGV7SQwQDSrjPzLcqR1NOjdbzRfe63yT32plbTtOJAyRIlYwEf\nVQOSFICHdZ/htq/IwtfImDD5mCR0anY/w9norRS8KXgwZP68WjPXWalH4GE6\nvLXQslRrCinRLevdT1yJJmEumEKNcVTkbLwtSLnNaYiLDxtADI7Ako0ZM8kO\nz1EEvx/KGSYdFzGPQtpLvoc0fM81yoVh9eOoW0jVJaFpFsQeGeK9A3+RwHCN\n8QIDMwI1WxTA202xTzzEcuXKh8HC5gYBBly5siXqWoKKfvwN2T8ae22NWfBA\nVkHKElKkHBCcj08qQOCJ5FNpbhvNUw4NhAWgZNUe7SpGe0aLuVDsgk2Oqubj\n2vCnou0MPm5QOoouHOka1ed2v2XqLxNEn4ca2NStTvBpKVrdjxQQlMs8i36C\no+BN9xRkU5MY62bIFqTqvdBtqRrpv7zim+TBK2tx6Efm8SYH2H55Szll+bZR\nArT5\r\n=QHEF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDkR2pJHE2n78VWOhjTQ2KJqMHMehNHXZdxBkmVxVTyPAiEAiXnpIke+Jxu7xchOBXgY3NQ6umUQ4RLOtawiB3zieiI="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.36.245_1567565586505_0.5924092176579665"},"_hasShrinkwrap":false},"1.2.8-canary.37.250":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.37.250","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.1.5","@babel/core":"7.1.6","@babel/plugin-proposal-class-properties":"7.1.0","@babel/preset-env":"7.1.6","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.13","@storybook/components":"4.1.13","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.1","babel-plugin-add-module-exports":"1.0.0","eslint":"5.15.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.2.0","lint-staged":"8.1.0","prettier":"1.18.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"389895731bfe004a37eff7545dbe0d434143774d","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.37.250","_nodeVersion":"12.9.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-3w1hbW2Fx2q11AX+hCirHLk8Rq0UIhNe7kTNikZ2txnxZJa6N/YNISHZjtkvwYjPxN0cjpH8BR8SZDOVcQo4MQ==","shasum":"52bc7bc50412d34b1b0ada0a3d819b862aa8bfca","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.37.250.tgz","fileCount":23,"unpackedSize":63204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbz4mCRA9TVsSAnZWagAASF0P/3S+2BVLdzAUPupEkDCZ\n6isNnEo4iNEd87StGmCmLK/FdLQtvVRgDFH+odFQHI1pzKDjhNw0E0JTclVp\nDGTcEof1vnOIZRsg93VXfdTKNpDxx10F4nBdTZGsgXo3bYJ0y7V936mennex\n7hkC8jffex3RrpLViNmCy9rWHu4R2UO5+Ye8k681YoJJTVoDMcRgGUx1f87b\ntiDxZMXIUkjwnx3E0iStjAzgHyKaLN6Uhl1NO/SC6njq+srV+LhnEuz+QH/0\nlAWHmOhtFjxDoliXaASThoJMWqCk8Ow2VaxPK0NX5J4cz0TC+F8NzrCjJwoQ\n0nh2nTixZDBRQUKjcHtXVdmvlf1+FeF4e9aSge3A1Qiw8gKIJJxcawEsew+s\nkJPRtpvkwUY3ws/vCgsdG2fbZLtRt42Mxi4/fIUeJzxeXAZyocnEMQ3piioo\n/qu9oJS+YzP6+h+2MdyUjfOs9QlRdrIMRhJGdhJOUxlLEduesm5GE3Dd9REo\nbM77fNAVh1nmly98lphgIOabluqybvH3QpZ6HSc7/7DVrvP0YDEk/Hhp4np7\niol1dRXms4b5WPJdF1DY7Ca3/qq46Zdb4DSAci4YvqhhWah0UNi59vKg6Ab9\n65WpA1mizmhqGyUNPt5/cjOh7hv0o9JOaYzu6xcuI7TESoiXfYg7zh3oUz5/\nSMF1\r\n=zuTC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCT/WyvFQ6V/qfapK7GGWIDBOQcZphTDdtBc3xq0Jm/mwIgV7Z8H+M2aVduiK8bGK85ycNQrBYABHNwRCsMxsYQvG8="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.37.250_1567571493702_0.9760571942370448"},"_hasShrinkwrap":false},"1.2.8-canary.40.256":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.40.256","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.1.5","@babel/core":"7.1.6","@babel/plugin-proposal-class-properties":"7.1.0","@babel/preset-env":"7.1.6","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.1","babel-plugin-add-module-exports":"1.0.0","eslint":"5.15.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.2.0","lint-staged":"8.1.0","prettier":"1.15.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"c3fa687184527dd2f4f11c6b35628dd4bea243eb","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.40.256","_nodeVersion":"12.9.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-0121HTQbm/MqkusQcAPQkMsD/p6MQzwBaS/tB3eOJe/4jgs223wBLhOHeYnOVH4NhnDckR5wlakX4wLs2tf+qg==","shasum":"365bfbd6f6cb2c30f596bb7d868bda696d39e5f7","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.40.256.tgz","fileCount":23,"unpackedSize":63204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdb1+MCRA9TVsSAnZWagAAMy8P+QEz+0VEMwpGSt/8mNpd\n463FbGq8FRPd+s5HMOapGGqVM4o4d+L3fKdkM9KocCpCtEL+5lG0abqJDHLy\nR/9811rAINHn/9DhqlUg7VXGzJNOZppGnqSNq3eNYVX0YvBV0JnpLIxb9trt\nt7q0RRhVSyqM7bCQLH4yuvPP1LgP60K9T2veHhhJlXwX6MShSD0Xg5PlMuYe\n4PfH+lZjYRwlmloM/gOQNDnJvswlHXgIDNp6RG1Ntq7LwxSxV97qwp2rlrxG\nLzzBnBBrByBWz9z7QMJndZckoMk1shzXiBg6/5p7tXABNkxLP6IESBGFyw1q\nofE+AhfuKRKm+mfNyjvO+mt6LlvNDF/SMKYqtoDiNASUe6rO0sOy7otuc2hW\nY/8EUhVhFi9ZNxlbJ/AN7Tktk1bc/QdDKS0ibn/H3iLVu9CfPKu/b8S974T/\nP1v3c63Xy9edlNu7c5sd1MFJjlqSpYFRBdWT/dAVrnQBwGdT6XlmHzhs5RDL\nkPO3XwNZ93GJGESIbLxABQb9WPrWl71tvoTKyUKcbH/E10dwkEfoQcpn6oe+\nsSE910hu9/WkjK1Nh2uNJrlBSW/U1VBjCCRji7CZQWUPHN2mbGTwQ8sxZmvb\nLOpVr+kkTYTIFN/ZYQWsWz+KiLh2be/6QkpMy8xQbg8aI8WKwPDpOo5CWzk5\ncKA2\r\n=DQ6x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAmd6BnYihjm+odJ1PvfpqP3iaQzG5WL1w+kFdxUCFpgIhAOucpjIX/OpPyWHDD3/HD1CMfYNoRb4PbiDY83Dy+Kh9"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.40.256_1567580044142_0.06836106258159891"},"_hasShrinkwrap":false},"1.2.8-canary.39.255":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.39.255","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.1.5","@babel/core":"7.1.6","@babel/plugin-proposal-class-properties":"7.1.0","@babel/preset-env":"7.1.6","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.13","@storybook/components":"4.1.13","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.1","babel-plugin-add-module-exports":"1.0.0","eslint":"5.15.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.2.0","lint-staged":"8.1.0","prettier":"1.15.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"cbc58981ca19f183e0891e05c6f9dd3b973b6689","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.39.255","_nodeVersion":"12.9.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-Qy6uH5+NuEGKcZiMp5c2exiMzTwvlHWjvm618cinXrxEpKMJVG2yWGMw2+wkJ9kTUTFIYO4sfbpj7N5Z3sfYhA==","shasum":"365aaa419456553809edf5a0b077b983ffd5e682","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.39.255.tgz","fileCount":23,"unpackedSize":63204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdb1+YCRA9TVsSAnZWagAAgYUP/R+c8zWJ6i5ty0X4TWel\nPPd6omsdwl7rLTt3ZFa1PqgJciyuK3bTvyLy8LWcurkFVBVi3gfdKqwR1aAg\nMkEpXARi7Yy5pdiRA7h7+zOb56Tls5KNt2nZCQuTaukDn32E17QExer2CMxr\nyTd6DG0Ow4U2yH8bZyYIe8BTdwqc8qlqjvz4i6fV0iD4dAdA+PYz9IgPPPB/\nuw2a4xaM9UH/XWkpFF3mW+pqYZ58EtCB/hNIOVNtAoEy3UeuyoTVXiV2NYxW\nZqd2pof7hBF52du97UAaAPxokJCBUXYyJQd11D2S6Vs5kvuy9FXpFUEcFvWr\nxizPf+tsg6w5KCiNuJtQF1o4ABj/TgOXKNo/6Q4+tGUriUu4rmH69mBd6dBQ\nzpQheJ7ypDdP00jEfdvJykFn1QnO3aTtwKDQe4y2k/i8xvHc0AjCrzPmxRpi\nCchHsweWy6LQgT+C1MNFiIlChMLjaRS7fqhqw+qi5sxi/g/ojHgz3ndwCmd5\nJF952mdV/EwhkSFT7gEicQxHLox7fwKc5G+eofX2JNDEKo5c5k8ZdiHkqdMG\nLTGg7wOXSDQyEEfraqAjHWeSfoB7orxcrnbdp5xtveQIxICZODLV+u+SC4os\nzpNAQZHpjB82/Lge1L2gDDBrJt/ZwPhjKoYRje+tw1pz0XByikEZVLIHroRQ\ntvjT\r\n=QWoC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG6wITI6a2OWd3RZA75hxJ75Hfpoi+P7M1CHMaErE/kaAiEAyiLMJBJkjBoXL0rQJpr8YP8erWGr23TRvn5PEUXaZvA="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.39.255_1567580055762_0.32081479208223573"},"_hasShrinkwrap":false},"1.2.8-canary.41.261":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.41.261","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.1.5","@babel/core":"7.1.6","@babel/plugin-proposal-class-properties":"7.1.0","@babel/preset-env":"7.1.6","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.13","@storybook/components":"4.1.13","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.1","babel-plugin-add-module-exports":"1.0.0","eslint":"6.3.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.2.0","lint-staged":"8.1.0","prettier":"1.15.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"40536fa3517dbc36d4acad3228f9a92754973278","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.41.261","_nodeVersion":"12.9.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-oNXewbT2Sh/AUwS5BUSLfkodmLjdvbhj1m+wK5AbBzLxqaSbdGeYpiltdnaEivInb7y+FTmT0zZ9KphtctIF+Q==","shasum":"b1f07407623a9860b68eba564d5965b42c656ed4","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.41.261.tgz","fileCount":23,"unpackedSize":63203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdb28TCRA9TVsSAnZWagAAdKAP/2MqSVDsZkrpgpJsX7Rg\njPjU9w9T+ZkPzlyQuX8J0I93Cb/qXEd4bavVf4n8F5lJqJcCveaY0HrxfZ+h\nMx5v33S/+CPqOWZOzoO3ZjSn3DODrFM3BgePc5jeTvTXoIipOGwlaBzhOOvD\nM8xEw+PLDt7p2pMffj/LgYb50EbpXc6nP59gb8dIJnBu6JKVYMtZRdGCXm/8\nCPlr//Mb++AXoJtucuHJ80CrhvU38ZkAHzUWoex3Qu3YaCbhVw/vJJhkH1K0\nBV0ABT/Fqaqg2jAm04Rm4gZgBwq+kRW9ZEhuc83P2DvyptLEKNaQ5x9f1t6j\nb+X7pLR4KnClI9+veqTEoav+7QTwW8W3CdYejasxin8h0AAenVNkQuaeHkoD\nWioO05YJI8bRLU/Wa04BNRb0k8Fh3AHge0WjqD/WlotmwQ+cGY3YHz7lg2J7\nQ/+9mrPmS5kgk6ejhyRPjjbRWZ+k1gINkRVnETfuQpqdJrLbtx+osDSxrBGz\nazbaGdj4NfxW4uZz0px2qykRu3HqLBxtfmbClB4+rTZZzNQdnjsxIUUpiHxc\n/QQMgct1wKaaKyO9/YZxc0a3KlFXF1Cs6VonrehPMC8Pf2sv6D+o8tGqrF3w\nIQaAfTzT9xwm9A0a7CMbHJSCDNk+EJPe6egkbZfQce8rZvHLDcwvN4Y4ljlm\nAeef\r\n=tcu1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICtng9i02Tkcmbd14GW0aK4n7TRgUeRMkCSZ4B55xvx9AiBaZIBje7V5aDh5mmv5TU23hdMD6SVakn1IbvqM51GuHA=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.41.261_1567584019160_0.13709666766285777"},"_hasShrinkwrap":false},"1.2.8-canary.42.262":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.42.262","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.1.5","@babel/core":"7.1.6","@babel/plugin-proposal-class-properties":"7.1.0","@babel/preset-env":"7.1.6","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.13","@storybook/components":"4.1.13","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.1","babel-plugin-add-module-exports":"1.0.0","eslint":"5.15.0","eslint-config-prettier":"6.2.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.2.0","lint-staged":"8.1.0","prettier":"1.15.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"693cc0435d603b38a4d60e06a9620ab16b297200","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.42.262","_nodeVersion":"12.9.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-THWtTcebUwubYuPZkOsc8nCCjjssRPkzBEaMGSmS8CubyMV7j2GuAjAwNcMGW24Yjwu3sBlpx5L6nyEKs/ZdXw==","shasum":"45332cc386007251b3d2b07745283de2512f0ea1","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.42.262.tgz","fileCount":23,"unpackedSize":63204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdb28gCRA9TVsSAnZWagAAxpQP/iPkXFpWZdA2Va7xz7Xi\nEayDB6LHeadba8PJuAPVKpL4qyLKPJuPNPbbShedQciy++n5tfq9xBlDPq6A\n33WALGLcFnzmEIRnUAMCa088av7sc6JD96gDbjZ4KF9QMZ0VZDK3mV0Ggp2S\nKapVVBPIFwiwUH1jf4fzau0Bul7r0rL0pMSo9UjtuY8klnCWNFLtogZwGZHD\ndkGDTDW0HyVOMIkSMA4RFcmbeY0HyJlyKXY5tC0RigGj0uPVOEUDBklH13MI\nmUGskcELVyy60sRkL5cuWAuglAgg+ncKtpA016E9S0pT1NHFw11jO9rh8kpz\nt2zABrU4+gPbr1QwJjFNx2EP1a2gVQ6C2UfRH6EheM9ggJcLOnt13rlsybKC\n7Hw3E9Ov89pjj6498OGU9EewooUbhCHw2i7y1MO87xt8oPdJzFn05AvvCjzX\nDFYtBk2XBOxpN3sXA30I2B6yZE1vst6dLtpkq2713mw2dLZ1Qi9JtBeI7odn\niuEvOpMoCtRXm59WSLV3XrqnFJiPVnsS/R6HpImQkYQDb4hL+5WQVb3bF45F\nCLgit8pkmYob9V5R4QT41CN/p2bVjQMD65sDM473HNyaOzGj7w38wEKtar0/\nWHIp3rR92gUozbrG+NYfc9hzPYQAeZ/is4/PZbBRRgTBa2fI5fv7V80/rh7c\nZcsv\r\n=45ez\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxP0uRfIh9sfif+O6ctx+/lWJSSWPw2phvC0cofUOOWwIhAI6fXk7+XFlJ6r6GD0xOXNBB12zDZSL6r4w8pPOEIx/A"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.42.262_1567584032449_0.06286922815405349"},"_hasShrinkwrap":false},"1.2.8-canary.44.267":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.44.267","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.1.5","@babel/core":"7.1.6","@babel/plugin-proposal-class-properties":"7.1.0","@babel/preset-env":"7.1.6","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.13","@storybook/components":"4.1.13","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.1","babel-plugin-add-module-exports":"1.0.0","eslint":"5.15.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.2.0","lint-staged":"9.2.5","prettier":"1.15.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"0c35180bd73d424c367e133062f0730f6e6f6bb1","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.44.267","_nodeVersion":"12.9.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-7WWFSCANE0fMoCH8amipItnauMy6gKIf6Hahf5PcMu7BM0TS4HyPCeiyo6t4F3Y0rqaGIMRBmkhHX/1lpwF/hQ==","shasum":"430fa69742516892330496817330d6baea6bd667","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.44.267.tgz","fileCount":23,"unpackedSize":63204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdb3mVCRA9TVsSAnZWagAAybwP/Aqgia9EQkZb8IdrE7Of\n9TfX9bZwQPrX0nd2nICHcz58+QTbpSVEoLDdYDfviZxqY1V/HgGZ2VYFpCW8\nCePTOIyOXNXyX6AEiNuhxKdadMc7DOjwjeRraOxVrFRP+RsTxQnr7YG2R3sC\n3CX+hOBVnXZXDvEAnKo+0JmtkpMLdOVxvF9oDwplEH67lFYeSh/X7eEjkLdE\n0hdPypSjhYmmIa6ylwiSMMDtVUjs4mMhJYFcsfHrpCoNvIBMRDPZeIoc+704\n0lUOYde6sFymLVfg6d5YXlzKLqUQHCRDOsK6m0eC3p+RmQ703ncDrnR773N0\nD1f8jGL5PpYnFozPlWuZOPi6OaOXA3saQ3czKRIDUpp75PHsN/qA653LY3wo\nSHu87KUm0exdtpjqVjhEwaYnN8Uwo5VQaxXG49j1mLztZG30ZPZnDQByA0jV\n3hKX4xBtdYl453kKoV/xCCx7S0pZVKwWeLBMON5ca/7mHwvANx5UaTBVPDwy\nqiv3iAnRffXFIb0Xnz9mC7UCUWBxcehG25MwbI+nUd/OqQDLAnSgq44URkJu\nZ6EgtgnbcnVxlCtoMyRyPSI7u022ktIEWVQWOgtcF2wp+x0sCkMTf7Zxp5i2\nxVAp3IoNrAFLZvx05OGiPIwrWDcqKoZEVBx9xZLNOC3CjApnFUkcW9+YKJFl\nmXm3\r\n=NtHZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICpQZRI3lbw4rDwtYgzhpFUMgYO/xiQzjGU2UCDCgQoyAiBxR9vnyW3Zw/TXvE+RhZtDA7qJlxQc3Zoh7v5a7hj6bA=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.44.267_1567586708439_0.8493443373118226"},"_hasShrinkwrap":false},"1.2.8-canary.43.268":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.43.268","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.1.5","@babel/core":"7.1.6","@babel/plugin-proposal-class-properties":"7.1.0","@babel/preset-env":"7.1.6","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.13","@storybook/components":"4.1.13","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.1","babel-plugin-add-module-exports":"1.0.0","eslint":"5.15.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"8.1.0","prettier":"1.15.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"27a2e651a4474d08acfb71a985c552e2cbb3c5ae","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.43.268","_nodeVersion":"12.9.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-EFKwHdQqWXnBwJXXmcTUWYBUxccCkeb3+XUyDxmtv/oxPMuG2kBInwTgWgpPjLCxXnp1qrmDxNJqzBJuT7FINw==","shasum":"008e7983f62b1bc005534662c704e55f4c4cff41","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.43.268.tgz","fileCount":23,"unpackedSize":63204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdb3mlCRA9TVsSAnZWagAA2CQQAIODSXc0U88VP42gYzHQ\n+Me1YKix2bswn7REyGSOIBsKNqIKw+dhRBMWSKMawABY2hV3e5T0WIk67NqV\nBDh7dR1cSkAI/ddEHF1yVal6vKuEBpmZfAlhtZM2iMrMK8Dev2ivsDOSA+3Q\n22KzSf7ckggNMCMnT7OKYb09/hxX2itQKcnRSbGBiip4bZVLXxlGvY2THcf2\n4orl+MEt/HGZXew6zrcidx3rqAf7r6akIoJior9x3yZRMJgGMVQUBZ3PyPrX\nZd4JQf/3QA6jGo6qEF5vslmvxAt8Mojrn4RbOicyNuBaT02YGE1MR900yxcd\nNp2CDXR9HcaAQtYOCBh3HEcaLDcYZlsChrdYkdt3upBuiCabi8mhZba2SyK1\nPKp+TVKHzwmHZBBE0eUY9Oql7OBkXMqbSejemJTA9cI7x3/mlL0o0zexCBoL\nQhm8UZ1cX//p2heL6zbAVkifndKgRQex/9f22ltzGOhOMH9UvXxvlSyljWTh\nniSRsiJJ/3qJUPg41Kbl1bLYzFty+A6E0NR78PLMfzVnf3at3H57IHUNGYfy\nn4teil71p5eyAc/chPWhBMhZgLZk2kbbFFg5GonTly5rtYCMEDZSBbMbCXUO\nkBEcbI1GMuZKZyr+l35bVDAEUxtlHYn/Cvx5Gewq23gRo5dOvWnZvmV0aHcp\njHT2\r\n=NKcj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/Xyij6351aLOOfdHRHtISq0mhtlpZi1JDKiYqYY9NDQIhAKCkZhpxdYzWQMY4bSLwcD7PY9MUQRSpkA2sznaZU+UE"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.43.268_1567586725341_0.9851280089701651"},"_hasShrinkwrap":false},"1.2.8-canary.45.271":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.45.271","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.1.5","@babel/core":"7.1.6","@babel/plugin-proposal-class-properties":"7.1.0","@babel/preset-env":"7.1.6","@babel/preset-react":"7.0.0","@storybook/addons":"5.1.11","@storybook/components":"5.1.11","@storybook/core-events":"5.1.11","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.1","babel-plugin-add-module-exports":"1.0.0","eslint":"5.15.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.2.0","lint-staged":"8.1.0","prettier":"1.15.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"ffb9f2ec028dc98cd1a2ec625d104edf7deebb6c","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.45.271","_nodeVersion":"12.9.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-E6uHXM8IN7c+598ll0GuRxUIWDEiP6mx28AcV/cI7yuQ0uinDRhf80MRPB0y1rE8bCswpxfuEpqXpPnf3ZYO4g==","shasum":"a2e8c023f96f00a1ee58007b44837970cc995570","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.45.271.tgz","fileCount":23,"unpackedSize":63204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdb4bZCRA9TVsSAnZWagAA6VIQAKARiwG7TraFPmCn8L2U\no/s4qMXdx9DFQOTqYyOHciDMSWMSOxhMJcCJXrx4GOTRV3IL7lnNSOmxwTnw\nvqHntWIFp+PyZGN2dJMwBldqG7kJ8Vs6kB+yE2Dl/34wuaWxjKHUBnjabdr8\nQcWIhgIL19ZYD0DWLHD4aoRYwbNNkAcU8tEE4mJdn9dZoMekEi1/kZRCIIui\nz0sP7B8bdBESc2JmU0UTCKGdX6pgzqiX+W9X9yytecMdqWOsZs/Ob2gxqBf4\nZB+rT438XZgj2q1bWuPY3XpHcK8mSxZU7qRAybgFZvvN8YXDsQwFCGk3ZyzN\nWWFQ/cTzWAaO5RIDwoA8CB7C2oAhBf73wz8PBiU8jRXD4VWYUccUVG74R+We\nAPdrBSPKjx9jo93NWXwnF3EYljOhGzDqOeBqODR583B+tX03ocsIkBLMp4W2\nkusMAcdsnul6EjC3rdyreu9pgP18wwYivLGRF+ci/oLFYUWUH6xiAz0JhgQM\n7seuJAEdmB7JqiL3mf/PEpR4RK8NNq9fktSSYp6JgeyRJ8yNVqeuW1V85qzq\nLokep77z0Wo9IiRztArZFhVutVxtN0Wb6kM4NajOCJWmgB0LqyclbcK2ogu9\nuC7uJ4FJN/atzbkaEPWY456D3i8WEw+OukY/w9uILY9jYXBIcpkTIPhhHT+G\nwCg/\r\n=GYpX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBIbKanZAZ2yDYXoLtI4rmOP2T36ErFuVkR7vsOqaZUsAiBI2L7YpB0iA0HgIUvfoMebwXkfWVQFO7Ev2ZvNGtayMA=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.45.271_1567590104619_0.4373091671694127"},"_hasShrinkwrap":false},"1.2.8-canary.29.274":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.29.274","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.13","@storybook/components":"4.1.13","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.0","eslint":"5.15.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.2.0","lint-staged":"8.1.0","prettier":"1.15.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"32a90c3389eb60d14c7f8faef0b3168b232106e2","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.29.274","_nodeVersion":"12.9.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-vDNPZk+6ReA2nxZk13ZGMKqrcWlLSzFOE+i3Z6yHvGv4WnjSQLM4LiQR8ePJ/DfuJEQg+b32yc1F6HzSX41+tg==","shasum":"2e937e2db9f2246e4cda8e136d6d076f18d03610","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.29.274.tgz","fileCount":23,"unpackedSize":65318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcpoTCRA9TVsSAnZWagAAjtMQAJF2PsRtEgUNcY8U/V2G\nt+nmNm4Td+U6qewSEjcxiBkrr+I7C4ZCsstMixeuyX6Qe8Pmd27lHRhFXnxV\nGQvDTdh2+dEdY4S4Gt3vxdPv1ph04rrh34NxW6SzVMeyJXEARCaSxPRNbd17\nSLHp1qU4wQsT4VjXE5naHzFoX/To/6sQTPj3G6qIbh93mEoGJBBO76FTUnvf\nIZBjE07kiCn5/f932QLHOmv6wjHnMMrN9GL9M6b6zd9/Z3UkB4hYgATiJujL\nkubbS3Y9ko3jKzkLWXuuUahUCRmuftFICkY5Dn5SwE/O+d85YNZRzgfCgMup\n+1OsbIyTX/BXld96Nr2nGz++eu1jA7yu0Bl08O5NzV3SBFDN+0DXyDY7xTRl\nZk3FyDbZkpClHPuNhAg6lzl+EXM16Grs2j4zJJCjsWMUUild5rQkqlUFom/T\nFeuHUgCMCm837gu9WGJR4LEdTj9wFb3Hpblu11dVgfqGF2MJo8Nan421CYur\n7lFCjG3uqLz3AULjan12D0WkYqCSlq6VNV0uYs2nFiReDIFIi1R809BrQxwF\nLL4XAmsoyNgy0idraf0iVFjQn7pXUx7A9pEoyvzlayOiqQMYyjP7TcuwutQD\nLSWti77cLVsPK26b1WiwzJaf9rgaR5NKx20nzWWSfUMHBElgu4LHoyb93yZz\n9RLA\r\n=vU/y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEnyO4UyhGkHR0+HpFF+21bQV4C66/MZakxtp7dTuTl+AiBsAFyrQDo8YbLQpqi1kcPtqk4ZIK/uqD99t+VxvbVQGw=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.29.274_1567791635232_0.5416757322706427"},"_hasShrinkwrap":false},"1.2.8-canary.47.277":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.47.277","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.1.5","@babel/core":"7.1.6","@babel/plugin-proposal-class-properties":"7.1.0","@babel/preset-env":"7.1.6","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.13","@storybook/components":"4.1.13","@storybook/core-events":"4.1.18","auto":"7.4.5","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.1","babel-plugin-add-module-exports":"1.0.0","eslint":"5.15.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.2.0","lint-staged":"8.1.0","prettier":"1.15.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"4e516a0e4a7cb70f378aca72ef13173883eae1d7","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.47.277","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-vnlg0A0GDjkBL+lvfqqEKURBb3sZCxitEZNuUikFlFlt818jvVmqfOhB1pFpbcKVn5MCk3HNH4JxHrR7CLJHQw==","shasum":"ca28bac6a761695e292817fb55aadaf0c411bff5","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.47.277.tgz","fileCount":23,"unpackedSize":63204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddz1BCRA9TVsSAnZWagAAKbkQAICmjKLG0/M8b1ApT/8P\nq+e7RtwiEQFUWmcP0ozWI4A+WzhoZyyf3NBejWTw8PHEsI+HqYG498USu3PC\nneQZAkm/lH/z4wQCXpPLbm+SYIt0LrnW47dyv3LXROfnA60jKpHazWJYKCzJ\ntktlSryYFpy/dhHRmgyXU+XzvzG+6H7SynlddRPCR8zsx6V/P1kE1o95Y1Os\npy686AHJPk1jEY3SQcZG4/FLzvewbuGuAUJnT4Y6tAxkiGcok0QI7s1rv1e8\nk4TRvqOqrd5FLPnW8Mzya1DGOmnsuMHK8nIRW9op2u6rF0L6tEdJzdpk4x4M\nSjP0WvazFgWrW9BX/qJL33GQ5XmzqFzXND6Du0vNk+DO/BZgz2XSl/6QbGdi\nKm46Uk2Zrg1vMYEwmXNprudIirX5JGXolmhTgxfD+zluFTFQt9VZ3tC2q5km\nTV/SxxWeMAn5+1mBj5mrW+T3TehANNfpPU0DpUqc7GbS5xh7+7Xhip3Y1QS6\n0rJkyYVWVUg/B4eNN4spCvloohAJycXLUwK6/TBtrt48M0rnKV8E+q7g2aIn\n2uGbOmzWwk4R6hHkId+Y+uzUfnnASBBPjZNoueDE6v3wmIVv5fI0lNe7Zg+w\n7LxlAyaGP4JLBMWcVooTr7TpwjT2Lif8HXMtk/5Cnhwxh82qY+RuSGs5XDkq\nqLvq\r\n=MEuj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6QxYQAzd4gFsPnQU7byfat46MjRLBzLYoPIIbua/KswIhAKrRb29QGrO+UeJk8CtogNUIGg4Kw+krDpJFSASiYkOF"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.47.277_1568095552899_0.9269612286275475"},"_hasShrinkwrap":false},"1.2.8-canary.42.280":{"name":"storybook-addon-react-docgen","version":"1.2.8-canary.42.280","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.1.5","@babel/core":"7.1.6","@babel/plugin-proposal-class-properties":"7.1.0","@babel/preset-env":"7.1.6","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.13","@storybook/components":"4.1.13","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.1","babel-plugin-add-module-exports":"1.0.0","eslint":"5.15.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.2.0","lint-staged":"8.1.0","prettier":"1.15.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"3e1768aee0c57d2ba6b44501a0b08e1a3f924cee","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8-canary.42.280","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-pzhe+L/nkeHStXFz4pqVGrj65FXmOe4twXJChtPXlb/gM/MwW80vuDoE1bS9pcgvaRz/CbC8TRYTTWuQzvco6w==","shasum":"4d8acb57342416747ca16a9da2257db7e9cb1486","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8-canary.42.280.tgz","fileCount":23,"unpackedSize":63204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9HyCRA9TVsSAnZWagAAnogP/20wHYjetEjQFmig0j4X\naryYx+hAWBpUZOs5TOON42mIFjud878VqPC0EcMlxdnUE7/BWuyYmAAsgbKt\nJsoIPXnK/6M9cgaDgnatEU4gJVsGHtyvtum4yzqLgRPP3S8ZVx4AJP92tdf3\n0SXG60gf8KW5dONTGy5D1IT8ObcvvMFSLk0mGDkLbM+SHhE1nvl66WrCemDk\nlfdokv3YsI89yA00mTdcAcZoiB0oL8t/FQM+oBrd0IBQg2VF0LD2ZEE2VsdI\nkTCjjY995IrJhoIQI6l+EvuHp8ZN/cabsTLBsium0f33UjlCoe50aa1NmfE8\nmV40GGg6aQB+2v6bgeCRfoV34im8qwteMfl6phNMCo7i7E4Ks8uJii+lMnhJ\nqRNr1b8SkVflDMLrQriau/mtuAQJKozDZJn0PoDENHczxUHbl5xJ08Y5z+9O\nkRj45KbfhvN7pcpUuSqHB2HsPQo+SPFiHpIJceSrFxcIDsf3ZFtK7atauI+Q\nrbEysdwV759wOPOXqeVln25p3rgjMFiMLXje4i2UlbkDGfiwKfnNw8M+/pHq\n9BXwvHoXrz5QCBbfgfX1IM7eTbU3wqtzyLJW78on4a9NPLLkDaJwOxicxbSV\n/PwI3CH3vXxLER5axiEmzELE6yNtw09rWzfmhUn0rMhyMdpijgKabF9F4Sxr\nrhyY\r\n=aLHU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFM1WqmprHP7SeFsAajpzrr++spjI6/0etu4f+EPLkn+AiEAigf/oqyl/ZRMuchbtR1+z1pZ4R1VaGLd8TQra7NEsno="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8-canary.42.280_1568133618138_0.5369105335052518"},"_hasShrinkwrap":false},"1.2.8":{"name":"storybook-addon-react-docgen","version":"1.2.8","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.13","@storybook/components":"4.1.13","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.0","eslint":"5.15.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.2.0","lint-staged":"8.1.0","prettier":"1.15.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"757d73d181af1da7d40f0dcaee66c052c26a7c7f","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.8","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-9vlPqMLwAUde83RWcqj2dZlHHkinoISvw+qh/quNwFjJF6fuIzkD8RnxSJ0TYQi18jWAB5ywoVfbpwY24Z/6+Q==","shasum":"3cd3d458f67ec126152fe16d7429d83f8648f97b","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.8.tgz","fileCount":24,"unpackedSize":65844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9TjCRA9TVsSAnZWagAA7wsQAJHR66ZPUII45PiBvAjW\nY2MillmrdrGUTeMPjrf0k/vAXDLw20KeE8bTXsWmJR71oWVwwUAncvmtWvyr\nDpOBeRLTa+YzLWKdX+gHpIY/MjboUPoxcUEBERLthIFWPctr9sN3w4M/PRqY\n6EM6mCNvsY3GphIguQm3q3Nx0aVr+0a5Fqz0QRi0PAfpE9Qfwl0ym9bAhNpb\nYpX/+rwSJtAtcuVQ1+RAoRMRIrXurPOpzTD6mspnxI3SKKx1MqPjXzjQzMV1\nbqcYwWM4Bzg+jirp9gZfFfL3hJRT1MS9BNlT30xHPoRXq+ohQWPiB9fOHnmJ\n+qjanlxUckI0jWQs4TuWETfkUoC7L5o+U4yy9G/46ODSETV0b1f6lH5kPAZx\nZX0t95WAklxui9FtW35LecKcN5muOEs45gTzDbTEkTOz6+X5rrPgCk41eKvx\naqGHxKUeo9pKQS4VbfSghnbm5Eajl/qv1tJn6XXXlHXT4+m/JfDFOHB7G05P\ntOLH3Hh/z1XsTPFAEafimcmZqWm87x84wvfRu57H0VnMU+dU77s7QWI9V3Ow\n54Pa+gBRgiVVsRcVj+/zy0KEJdUSf5h7ONEc00SYVP9KMgyBrLa2aLZT2ysR\nQHT0Xrl1JwxBTMstmy91oER06Jnp9qT1caZ/CYxjMjVtb1Jps4tGeJ8GH7TP\nqSyI\r\n=c0Pl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH3CdX7SeyGrYEtL5GVJ5AZxrHxMcDSuIbSYjMaUODysAiBZzSgkhSXlKlSJXGoouiHNSPXX5eIcB0H0g2yS15mdkQ=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.8_1568134370432_0.8603665375012584"},"_hasShrinkwrap":false},"1.2.9":{"name":"storybook-addon-react-docgen","version":"1.2.9","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.13","@storybook/components":"4.1.13","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.0","eslint":"5.16.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.2.0","lint-staged":"8.1.0","prettier":"1.15.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"ec4f547bd28b4434c7435bb1e0c42c21a1f10969","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.9","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-aQ5u+6n2SaeuH42J8xw4xOOOdm+h5kK0fhOpII+7WIjN5FFNr/dIijJOuxXmqDmOxiQigU4l22ficMws2Bk2SQ==","shasum":"1b04fc3603efa9581e4114b06fc561c320db204c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.9.tgz","fileCount":24,"unpackedSize":65844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9UFCRA9TVsSAnZWagAACt0P/20QmDodCiB87JHy8rBi\n5j8HNcj0E7mS+aHBBO6w0sxLHORmkopVI4mX/OedyciBJHPv+wger8yrk/ba\nfgjz9GOX+k6qe0jEk7cb6TdAZem169d8rQ4fCY7g7zQzinpc41fDUyp+6slW\nICdXKXDtjyqBTDL2yhFxspSSv99pwij6fbpomN46ee/1Sx49HjHW1TPDiqLP\nkZ5qa+yJuP2snRxL9ghY3gtnoWZZP0IdYJDm9uxGtc/q37oXed1UIDL7QzUy\nJGkijJWYGMg2Ce3loLDCOMoo3EzgrnMms8upXAsR1lo1jaTypGY7Y/UrRe6R\n5yTCAX9XuXYialN+nci+XsRnYrOwReAeseNeQbkqdDvZ7ScbvNLsue3q6epB\nEFFi3fJHiWc0UANq5EA8V97uRcV/yKus0/5FQFHYbeKTK/fmEUppEuQP3k+o\n79Fcweraymo9krDDvdVo/cM9UFWhoC0xqMS38N/B1cWs+enBSmS+D09KsAH8\ndb4UHoAPxejQpH8rlOyKdkqPychMe72+KCXrL9S1MjPmd+I7hQYkme6V6NDJ\nX2dmo/fXirL5B7IAxSSuQSXGicYBk/+XNM/bCBLUt3rKJR/DqYicOGtUR55q\nuKxig3LsjCfBqoVBImTurtd/heJ610uI9pMAV3VUVshwp/7QRXMsK6h/6PpC\n8D3z\r\n=jaFV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkl0lDbyyDsO6LF3XR9T1kClKu/StSe3dY6wbKdmWN+wIhAKjNqaoKhrqjptl6uFNi+NG/sCimllS3Z+8N7teXknJg"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.9_1568134404397_0.17003215419980422"},"_hasShrinkwrap":false},"1.2.10":{"name":"storybook-addon-react-docgen","version":"1.2.10","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.13","@storybook/components":"4.1.13","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.0","eslint":"5.16.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.1.0","prettier":"1.15.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"2075a33c016da1282c07f53ab93578cd61b678cb","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.10","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-nbcYPJqneVT9KcMf5DdDqp/pjpLPWtIrGlgL1p0xFgAluZFqpdD5fcCkSQBcThpkmLF7XglRLqilc4bFJVp8cQ==","shasum":"ec1d93b3344a29ebd1a91235d3652957ff73bcf7","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.10.tgz","fileCount":24,"unpackedSize":65845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9UkCRA9TVsSAnZWagAAP+gP/284SbT7cVu/76ZR+RBX\nthWwMiK9U9LPtW4f9MtRYUX5XC5W2nlkreyAf5H1rV/YYu0DdBJsfLGC+fLX\naEA1fo+KcyWPl08XozB/MZ2P8U8KjF4DsN6phqwZOKz/IrQZ2f82Ny676MFR\ntiSU7etN+RFJi16/lN1vmIyc270fg8hhMXrQtJ5hkzwJVxTen/GlslczGbiS\nh3lEyayQ/XfcmjynxVFX6DWj3YAP2BmzAyCOCGM2Us+h8hOSkftafScHvRME\nhuJ9JN1AyoN4bUSr607eBna/1Nk9nHfiC6Dd3O1xCRxd/GURqyRBKAFHFIcA\nx+0+ehrbeB+nIhoXeu15Y8cmRsK21zaCqTreWy78vDLr7s8QdRhEvPvZaMmc\nYGRsdV6yTNC6HOYzU/NmKC6SDRlzrjZz6ALKPf446oK3Z81kYHF7H7heFbn5\nU9q8e9NAf8Tu5Tjzkxahth6v6+bB7mQ5S277ss71lyjsHNRWkQLj4/A7f6+H\nojLQbP4Fxlyn84Vn5It06aKihglV/Mlkd5bNVPbKLED4GeGj4VAqHRvf28h6\nm/E26a75eRFIlwTa+67bj1UI1F0BA3rWMMy1KSl7DXLJDAfdiIprojMCAwMl\nuTxPMZMwtGEGxuF8/LXrw+n3p8GdcsC1LTatE5SgGP5GTqn45WgYaoW0kA29\n+jes\r\n=422j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGKJZwa/Pi+Zpq+C3QHxXq4DWlmrM91DQdqfeBe2EV+UAiA4P6l/1kd+urgDG6qeu1bZAo+snU9/hBLnVhiqSkgtyg=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.10_1568134435698_0.18814233258310176"},"_hasShrinkwrap":false},"1.2.11-canary.30.323":{"name":"storybook-addon-react-docgen","version":"1.2.11-canary.30.323","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.13","@storybook/components":"4.1.13","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"5.15.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.2.0","lint-staged":"8.1.0","prettier":"1.15.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"9a13a61bc3748609a63bf5076d12f911fb5bf1ec","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.11-canary.30.323","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-StgfBoe4SYlMEBW7rhitynCx8vXPGlmq4deJ3dw9Ec2PAS6a6IlXh8f641f+XSbnwnKswWwyevn8gIMbft+VaQ==","shasum":"d9c664e319c00ac0d07e6160474db7486f868baf","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.11-canary.30.323.tgz","fileCount":23,"unpackedSize":65728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9UvCRA9TVsSAnZWagAAj4kP/3DQgFiln91cS35uEQGW\n48VX/zPCH26wbZHxiFlJCkBr1aqTT6WVxpZXq5XpoR5aVxxoLNwgrCsKsbnF\nP583clOo5V58u25Iu9dyVq2Z5K/zvK/xJ1LETyLm1YxONzrVUpgOjKoKRI2f\ngxWE8ta2jLFM3oe7OyDKWfy1UShKAJiZGRjoobAjtOWY9Uc4PNpd4JEpwQHg\n25DL0rTPPl86K58HpNfap0I6THsZsiLQNjBXlBbjg8BVDsRrRVf0BY7wzCna\nqpiVdA/n3AIOlIM2Xf/2uXSbJUaIghwxSlm7VRfeSUIfLK1fsfA/rNoF/Isj\nEpfYKsBIXltELBnUJlly47YadZz9A+TMpiyxW4b+nudHKzZFx7oVIdZPieC+\n+eg0/7WlT9FKb6OUrADWivgPw+THZveq8yKZpbDiyMHAS3BTUcl39bMRssC+\n4XQTgo8v4rp+l4CHXRgGWcp7P80zX58Imufv7J2jHbPMcE/nNArMWK31tKId\nYLgCLtf7CP7HX7TXep5d69OotGGbwEzmdFsLD2Jr7qI8tV2svNOcSSDQtPYm\nSVoP63Q1+318uaFsrBmgr+qmDpdnkLs8DMsBhRzwdpHJZl7zwicxGv99S4GY\nI4j3we9zBjZYLnG2jU4kqcalRKv1yr/tXBtaQO00cCKC7FCkKuOlEuy+QzNK\nHTll\r\n=a2/X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJTuwwm66l3gMMMgtndo70S12O7E+NRMOXH/yXoBG2NgIhAIcairG0730uoLrmOkGfXtSaeZD73Xjz6V7cYhNO27kS"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.11-canary.30.323_1568134447003_0.31985204273073187"},"_hasShrinkwrap":false},"1.2.11":{"name":"storybook-addon-react-docgen","version":"1.2.11","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.0","eslint":"5.16.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.1.0","prettier":"1.18.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"ae5ba03bfdd450460a57d5c4a37920b0cb4445f2","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.11","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-tLz3QRhA1A6ZIw/6aufy9WUBnADDtddKyP6vRA11+ZNS8ACZV/f6dupncm7gzDKMvb3ABE+1LUh5FKxJKPLDhw==","shasum":"68b5b9668070eb8c2d7d28bd0d7c21f135a3b630","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.11.tgz","fileCount":24,"unpackedSize":65845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9U9CRA9TVsSAnZWagAAp8IP/2t/WOvYaRtvaX7VBoS3\nf10X9aNi1v5Y3IZA96NsR+kXSyQ7DifaLznkPtVovxIUChi3UnAWOarLtpXi\nuAr7NOgI+w+mQkMRg5u/OC5TmkklNStAt7yHvmJjIgDrdZXZBo0mT3VSTC/P\nx2i3Vwa6gwXrpBOSggLEbLyCC5FwxLVqkbBZkEaUtXpzCXI1LKJuyyyl+shU\n9EFAsVmoS4IPUICnf+AH28Kr+tPxY5Qz1r+Od/0+Y4aZdkwpsbO0R1faYj/I\n5WvXd8JbMFdnVeE/mn9xVPT4cOJ81V79vrwrhXX2ntjKSd+4E2a9en+gEdxn\nz9VskoNCQjGN8jGYR9ix77XgewosPIXEo1qeRJHjKl0fxbnmXiyV6VhmF3DN\nTTo2flxuD0Yc92xeY71pOp2SktHhij8k+kVNjtDm7n3/rIexSWfmxf0svnMl\njYOAby10AuSfz4bw5gArQYFwLO2Pb9s7Vsf8HDIQnZ1KGqBieE4xvLqe8jYO\nRC0vsV11hKOO3bcLXpGDjKr6bW3CErEDSY3ypT2yjfLBkxT5Mgw4tWpqGSHw\npx1g+OYKAGmnatdG79NR4COWt1cx5Qc+HJQsRm0cYwtENOMrYvxbjBDtxhwP\ns6EuzlAM5moSK7ha2OJGPLQV89SLvyyEGFRU/pEqhGcRqXBLSdm7intMd517\nz0WV\r\n=v2O5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrRwHaDVc6r7ZWN5u3VgZPyfU2Opzj5N1OWxJCkK8WJgIhAOV0U3s5kSmeb1S+Hond3KLaOT1mPWNGgHz0cxPhg1gD"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.11_1568134460869_0.10605385125049005"},"_hasShrinkwrap":false},"1.2.12":{"name":"storybook-addon-react-docgen","version":"1.2.12","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.13","@storybook/components":"4.1.13","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.0","eslint":"5.16.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.1.0","prettier":"1.18.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"ee48cf0c17d28718cac584087b31baaef1f6a6ec","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.12","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-Yx9dcJKrTNOR3KmLHqMfRI5iqozxV3EjLZNF08y5GA6j5XmVLo/avtSaCm7JBn1v4+jbHYLrXF0n3v3RM3fWbA==","shasum":"ac416a71f3b4985b92363760b0508cdad1ac4e2b","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.12.tgz","fileCount":24,"unpackedSize":65845,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9ViCRA9TVsSAnZWagAAXtoQAIQpuyhpXE3XJri0PMaa\nDkpthRIBecR+1mZuVhG+TXT6Qtzs/BAflFVZFMxFfVNbCiTXsKK7AYGP4P6P\nJYSzOuVeoGH7YMshjMjK9x07G3zoNTrwZcZ0SI8ubdBh8wqvCgTppQ3lZBfj\niIFkzsM3TaXuUtAoJMnsl/IUVV9E1o6N/+8FbyfuW4rTAnZRAThP0s6hEkCT\nzQcQVMn9+4XQz2UVQ9q/1K/kPgl3+guPjf6lbGyqfV3dFoUp9x/4AJTMeZZ8\nvPi7WHJtKk7qgRpGB0jirLX8L5vYientzuZ/1Ny6U/Ze0BVzkugdCHFhHFh8\na57EwodUDR0EwGE03VZBuIq+vkeU/7R3CnHAgmdbpIfFEpqlCILebYxpktZU\nNx85mR32Vsr9F2kHi3sZ8mvxytaoiAruGhFctscA2Is8lL+6bgZqkrtS74sz\nDdeDGzinMb6wr8FRfw2HfB81gbjhH3i1oMoOryDvutP+NUIWTHpoWIiE1fxe\noxugjLkVim2QPhzMVWFNlr4ww+LV31oB30HKDbFM1t8J2l3GqxqjAGvijPi0\nyWd/nm+rUjfPOu2o0DqLBSpdVETMHvahoMUn6o3jWFMBt2QyJ04FWBflYgHN\nzfjYDyXm03cF4Xo91fg/5fVdKivRrg5y8GF5Zx6kaUMeilTJtOif03QxiGp7\njZoZ\r\n=I6DZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGsmhtC137sOPfEG15odRPdEfmiUCgfeJTMlcS+NlO8/AiBRZQ6YBg5QT4wLgIYTLadAAl/Vrm2hp7evFMab/MwEtA=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.12_1568134498407_0.04862156727825773"},"_hasShrinkwrap":false},"1.2.12-canary.32.330":{"name":"storybook-addon-react-docgen","version":"1.2.12-canary.32.330","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.0","eslint":"5.16.0","eslint-config-prettier":"3.6.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.1.0","prettier":"1.18.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"1b7d76b323e361155f9dc9433e300beda96a9bf6","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.12-canary.32.330","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-NCxKeNHM1HFNTUrPKFeH2g0jOaGSCfi3fivv0zUGeiZfqYjLL5WpQI4t6zJ8boOE8LeoGl8rsP0ymV7dGvcp/A==","shasum":"ce11d615e0ffafc83055ba8479d7fe581eb8d857","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.12-canary.32.330.tgz","fileCount":23,"unpackedSize":65319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9VzCRA9TVsSAnZWagAA8ioP/2jQJHt6QOoICTmV+kpD\n1YUYJGOMNBq75/voAafNGylXKICpDSwjsBad4yNzVLXSQBW29mWsUC/+7UyY\nDVlS7LjRI2BK20+CBKe+Xesl7mDRP+2cA0UuNO7pe7NxHXe4WAlRk6DFzsqd\nOkh68HsqWsfEv5KPGid5I0GtSqz02BxWsnzCsZK8dg8+y5fkxtsF7CYQ76nl\n1RfatSTa8RyaDgLIaeyOH+e5Nv0WYlxL8LRPnYMDPtj4PrTECIdZVf0POw7n\nGnxySx/quOtjxdfaOnLAPS5aMkN/dkxTw8+RA1/KmVEHeSo3JRapcTgPL1x6\nuZmu0RgBrJ5Uy2Veems5zEk4m2hSUKP4Q1ORWn+iqz8aErXNt3lZYHRwXo8c\nKrBhRY4tXODkPQTFj3TzLZqPqHYj9aDH7CJoklnMAYe+ePemKK8ms9RoC8XU\nh7lSuVPpP+89IQ505PGGogHkpARXJp2HvfFOgt3L9CJpa9bb+TSADZBygblw\nr5XWLjz84qIdhg6l7uD3BjiIUdC2umHqPW57dgU1igyaQrPT6L7M4O7ER+4e\n+1A7ngLMh1hLKPdc1ckVNAPLnmMgH8n9Aj8lUJZxVpftyUW22ZWPu18KBvhg\n8vReQOMc49QJaaUzduWq9RDML+RFCMktzeBTCq39PkZbSBvBCxbR7zVtr/fg\nCawR\r\n=meEc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEgA6osYNxJscdzbqXF4Sy9XESfGdiANl/BZGkjmjKRRAiBIVQ/GHGqESkCMIHKRuoOqrJEt6dfVG4p2gGUDiJ/B4A=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.12-canary.32.330_1568134514346_0.5901978778644408"},"_hasShrinkwrap":false},"1.2.13-canary.39.331":{"name":"storybook-addon-react-docgen","version":"1.2.13-canary.39.331","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.0","eslint":"5.16.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.1.0","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"f3c29a7967a4fba3513ff502e9fbabd7600c8f9a","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.13-canary.39.331","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-uHWGS/ppEhkdDY50x6LU9TAHULxAKUPC00W0LDXHdllEHoAOV1gMZ+TM/OjwF68LURhJMtajw83lrB/Ptrnw0w==","shasum":"d3c68182efe408758ef1a62b4ef8ad791af9fb3d","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.13-canary.39.331.tgz","fileCount":23,"unpackedSize":65319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9WOCRA9TVsSAnZWagAA+FsQAKUm2kpNChOFG8Wxqy10\nYp7ExTenR1oizZlyK1wqqdCXWzZyGkSJGCPfCdpBKHs8CcPhX2JwKkhrqwWL\nEyL7tbqpFPcAasdTuAkZf0XqJKA09yJIYgBKcyTWok6KY5QTJr04Omguz5AR\nT96+8+1z0EfRZV1UX3IUe96v9t2Em+ajzKHf9W6Es3SyteCwakRNUkGhuAsF\nP4gTaLcdu7YKrHtv9F+L8B/33WUyuvmwzK20xIOlq+EWLb+m3p6LxNzd2qOw\npZ9sq63CtgByI3kyOGmHA1tkpbbtAzb9PVpIWe4uGu/as6vOcerfirRhgTre\nN3E86mTNtQQimXUaOwIf+MkG4iinH2VJ6QNMXYVAs5e/rbekWMVdPZ0QE3V1\nurSt+vhx4wTzBR20GquvX4UVfDbIc6a/gBVm2cSPC7Qr/hgYNJ1kOoiukL+5\nTncvairRmuK+E1Xcol/2jpdxTyE5TDfwx7g5kixudbO4CGVvXRdpgNujCLj3\nsWF64JTokon7CulOgpIJv23u/mUPZ6zc9Lg9v0coNXKcZKxeUg5/byYzjKz9\n5mSk8UB7co00a5RskU9Ejkk3w/QtRZd34dLT2d6akekR2sMpwS3Jf/ec+Wdx\nigU/cBSn+KVO0IlSdFBtbrmKCRjoZvbxjb6dZRD9y3Z6zOY7atbCergT9I/R\n1Reu\r\n=Gylw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCciLtLAECGvbbIJtsnemlkNl/D+MgdFFEHRRkkBFiFKQIgEy5TqtbiXJ7i2tpk1aOkYHRJ1Z8AQPHbeQ39Iuq74u4="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.13-canary.39.331_1568134541501_0.7922229420483002"},"_hasShrinkwrap":false},"1.2.13-canary.36.332":{"name":"storybook-addon-react-docgen","version":"1.2.13-canary.36.332","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.0","eslint":"5.16.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.2.1","prettier":"1.18.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"5d42802df6713d61e82d51d6c749374af1ca97b8","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.13-canary.36.332","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-vDOu3SWsYHHaAbCtH5SowNhD2kI5Ge4J9Uh2f5jY4TWOWx+i+byMEGLNPoa6rlL6hUhRm22SVLYcKeWwVC3c/g==","shasum":"aa349c7c05b6bf43ac67da4d1376d8ab13448258","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.13-canary.36.332.tgz","fileCount":23,"unpackedSize":65319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9WqCRA9TVsSAnZWagAAWLUP/1caxOT/CXhxiVshYXue\niZi5nA1C+sjVJaLE7ZbkE5Op/0bsuEZK9ZaJcjZ2De0kxXM0LmOL7q8U7pST\n/QNOPgzcMcYmH6V0vcvrMlz6lmrcSnBCRr+ecCtyxjdyEF/DXLNpYv6hNL78\nBRg/h+sj2Odc+aw+1GLke0zuFy29wyrYfGiqB7fwKv/+hc4u1Pga6vAYukQC\nQrMP2I5uBOyPs7SpN0qFQiBr2rFE3iTEiXb6SzH/axCdrVJu/Nibg7hpewqa\noTVrRRs1x5+LXdZNfZ9K7aPPVgsJ2SEgERuAo6QHNniDqQMZWTGPXUG6z94k\nPsZ8mbr5hLemLygUbrh7+cCqthP+7KWYlybv2sxwrzKq1jsUUJ/XBEHKycuK\nJOTCBUQrlSCNOmaOblxzN6wVw0vOIFySOdfX+9BfbXZbV1j5LpJVJ976qPPz\ni1lo6JVumELFzPF6PtjqIfuucPe41/jA5x64cusKTq/jrRRl3WX6lwLuwYQd\ncwLPNLhigokJ7svXpNcD2j6ls6QiUzX0O0fxheqDX0mb1k7gLnpU9T1yt9lU\nqEvn1RD4Jdm7/3ZjyUM8XBTbM6Qd/fxEIwVD401TCoMJFDthi8IwCU1SzmuA\nGhbveGQ5kktev3PZhnZC0x5iQDeBbLBiSj/ijiMJyIXET/5LpMfuTLZtKNtp\njgGN\r\n=SV/u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBVdaH2V2Ly4pTGxY2g64cW74VEnKKwUcdVK4kdHJ7eHAiBstdmfbf3aabaTeAilnf96tlGhsw2/XkPklYFbf6FO/A=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.13-canary.36.332_1568134570077_0.5280444075966584"},"_hasShrinkwrap":false},"1.2.13-canary.41.334":{"name":"storybook-addon-react-docgen","version":"1.2.13-canary.41.334","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.0","eslint":"6.3.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.1.0","prettier":"1.18.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"c8d4ef77ceb807f824a907720ccbec43b993044f","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.13-canary.41.334","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-90WWjJjZV7t7uHcZbOZulf4NTPaA8VjC0FcE0fSewUSDu/mQhinVI/6rMJT+CwQ243kHS1xuZ7snKlZACj5m7g==","shasum":"1cdd4849b914fd1101e918b3016bdac07bc5543d","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.13-canary.41.334.tgz","fileCount":23,"unpackedSize":65318,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9XWCRA9TVsSAnZWagAAd6YP/RD8X0IHkhnH8sRWg4Dz\nk4INJbMC8LMEGpTYj2oDT9VBNJodn+VA/rWyvMjTKXXNYDBWM41Vdc2WyiEI\ndKg1bGek4BKWdVZOOIR97oJxmPB+3tL0XrkTxOUhGEZAKBOePbfWZwvW4M49\nilVaWrUUrSOkbtmOWfBq02FqZ/ad3Zd16/XssfbHEmXROndvjePFyCOgtuyJ\nFRBgZIZZqNvexFjMWtSAYeGoR8ty9/XYwA5yVKIjYGgHmMITJa63+lpEEen8\nV7xgm1hOI54ciZrDv76kBItXoYh/U4YVLJ81XJzbMkIuQ1NPm9smmnIHiQDa\nbMPLDzRGsiGW6LPLvkAjQcaGD4ngVPQfHdq/JVMJet5qamPcHXewY1IREYqp\npW4Jk1jZmzU54PEBFiQJWDgIkN5fyqZkr7YpToprcaBcFF21zqa3m7h9bfCN\nXjzJgN6jUykDrsP1MGa0KH71ZyHeVniA11AdDbkSpRas8GzL+4KrvX7DAtfG\ns5g1YzGJqOD0JPbXSaEp1y8pRsRrq9QP/6/9WzKbhPSinxyqliijgzCedp/n\nVpps6Q6EhAumx8zgzjv6/UJDmhJC9UKRy+Fw3H5armUXZCiMoCW8z3y9Qj0x\naQz++VrfYbhjBObYghI5Ja0yp6aYwL2nEstOePuysfDryv7A9tsBB2RvPAf4\nslhw\r\n=nH+W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaJ6PJBYbAonoegensk/C/cD7H2nZTgIOdyMhhVQlj3QIhANKWsH4hdUrDx01Uxm0c0Lv6hCuTkz+9bRWORAwsNq2M"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.13-canary.41.334_1568134614023_0.0346219787161004"},"_hasShrinkwrap":false},"1.2.13-canary.42.333":{"name":"storybook-addon-react-docgen","version":"1.2.13-canary.42.333","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.0","eslint":"5.16.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.1.0","prettier":"1.18.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"55235019244952aece8f78eeb7ea4daf191133f9","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.13-canary.42.333","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-QJWg3rtXQ856KkkZv0QZH8xXLwne11rOOFiQvCY2bpvDwDPL4M+b9ahpWDJx48Ouh2MdWD08p6hIpk2d2xKNkw==","shasum":"b68531d24f74d2fe698e2cb96d2d1487b87b45e8","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.13-canary.42.333.tgz","fileCount":23,"unpackedSize":65319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9XkCRA9TVsSAnZWagAAM2kP/ijA+irn0XBFq62AKfRu\nCS5s6ii1bOh25DCtnqXKIVBzBYHdAsjzH1piR576c3ZcdlsX/3Tpa1u8ylMy\nHBhwHGBWH5ZO8DMexpOlRsVCCiyxjcj00chxWJf+4MTeJRMStzsYQx2TU/+4\nKToKbZZeQar8SntjIvgDCWqHAHu7afnkGX2tcmHD8jAb5zB8OAqtXgXqsvu9\n484AmvID8BZNoaSCyi1860Ge1UMO5g0sQOMhHsxSUsuotXJ/IUuAzy/Am2p+\no8foh4M5gO4g7yJx6rbdOMU87p/Iju355P6KKQokvbWJm3rwBgWSlToJm2/b\nOVy85CFtaLyV9GC4ccRDEkmtu9ZxNJ8eBbjgiG7R/2TCsP8OHAOTPql6uWcs\nNktmTyXHbSBMKIRSeTYmC2eN2wZXWLKS52LjUDCsdEtNknR4BxqQfm/NbDF9\nspKfc4Zj7FPN882bpPn2cVYfhCTfcpTbnklnWqC0gkrPwp9QTOSV2L666Cte\nfuv701avXJ4jCr0317k8iuerL0rk55jcTAu2twpECPOK5o1brIFRJDXBD3T9\nKLeDJIdL2LwRQbU9ea6PP271uQajqaFqHK50Y+YbEKHCfwNac8AV20K6eID3\n0o8Jmq3R2JvOg76Aou7d1OkZ3REgme4gbdnqyTwH+/4k5wxRxoFs+Qvt780h\nb704\r\n=gh1p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvcV8a5EzDtXvCpZWmUA0B6S7748+1htjeLj50naavPgIhAI5T+MlUv97TOUw2KU90pnbDHBoz8p5ftIEEm+lrUQfo"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.13-canary.42.333_1568134627361_0.08377690622433476"},"_hasShrinkwrap":false},"1.2.13-canary.30.337":{"name":"storybook-addon-react-docgen","version":"1.2.13-canary.30.337","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.5","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"5.16.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.1.0","prettier":"1.18.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"db8a58b1a8fdf50ad7c7c4c205b9487c60074450","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.13-canary.30.337","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-flfrcSVmVfkMuCyHNue/sXjkeMA+GJrcoAtirr29DNHr59uxBz42+ZLN1L5/cr4fo/RtOZ5+2+QH/awxP8AzvQ==","shasum":"21d6772f2a2c94d43c7811de48a1a2f685fb3fb4","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.13-canary.30.337.tgz","fileCount":23,"unpackedSize":65728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9X9CRA9TVsSAnZWagAAvooP/23PgLaRFQM1HzqXGowR\nV6R2Wip4g81SbSzvFqDu0FeXtQ1C95LJ09VmEFSynSV8aJ/KFQdFg0xwyhmD\nHH+vRksWeH1K2AYT0yB2QHoRdymOqRJQxm+wAfCtzM2sAvNlgtm+U3SSnIzc\ntdwQ9fjTNIRVDZEJS/MglDw10z+Ga3YaEDFmcHPKVzqgb65SLMZSolHBEs2r\n4pBj4YFfezBUmH5D3DWstCvFW9W4daxPtXA4bmgPeke0m31H4wIsPNhsScM+\nbxNSuKY05pM/DpFgyu1eJ6Qs+TOOLRTdpYS5b8FTaYdBb9WzsUVOR1IxbYKs\n7cHrRBhIXl0vPlnla3QXVRvZVezFgf7PAjphb6BZ59hSRtIyHArxAtmQe5FF\nM8eKdJlA4KSwWpJpvC4ZPiWsPxeefuNZi3v+2D3V1P76raV0XeQV/mfkrz+j\nRuBFGp8kKwE1NeyGusbDhb7M+Herxy52r1XzSAtk8BX5C7JutncPZy05BCQ8\n9xVYsglQ+tT16sD7T4jI2rCBozwkktHc465H8ghfPfCZLtwaHkGHw5SbQ7BA\njOLPLWpfw3qr1Z8yz7LvW4wWBDN7o8gZMq/eNld+0dcPGtPJ/H56CdaybJap\nFcs9f+ae3dtwnwDPtoavZOGcb5z5s6zsT81R5JGvsS0ysMm9Y7TZjEaQngyk\n0Vfj\r\n=4fh3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHRjg5PButgx7kmJZBKxMEIqcCdz6it3oFaTly7Waiy4AiEAk+tHYp7STMqnwvfv3T5SpUv7OqFF1Yv1oWrYxzlNOys="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.13-canary.30.337_1568134653293_0.4757245402421939"},"_hasShrinkwrap":false},"1.2.13-canary.44.336":{"name":"storybook-addon-react-docgen","version":"1.2.13-canary.44.336","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.0","eslint":"5.16.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"9.2.5","prettier":"1.18.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"f70eee3f74709a9d4c94a095b2f199f281c2b3ba","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.13-canary.44.336","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-rBXBYjT9ouwM4ljR8dJLijlAqSGfzwqHMBu7j6cDD3tOFzZSs9Xz2lLl/pp4s/Cmm+HGVgFscDeiIYuCkuc3Ow==","shasum":"94c1f021804709397848a83d51682d631e6b8f1c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.13-canary.44.336.tgz","fileCount":23,"unpackedSize":65319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9YCCRA9TVsSAnZWagAARuEP/0SU/E53OGzXaTJWCeIh\nheCSVQalFONiIbToEG6LMFQ3ZrIsdjaXc4kySYrL3rhi2Bgx6eWsB44HdE3Q\n+LcCdSCpXlK8c5eQOyH7HtSeodSpVtuUGR3zXTqyJRpZmz+ZjhiunHoTLXB8\nEhV1jLlYqN0fwsf3nHCXxWBeeibOnd3kMCQEYetuLnypYSRH1c2Yt+pP/7lC\nSI/vqD3MoPpTaJmfcb6yzRoJrOkda2F/Q4q4syAvDXO/xxNB89v46vVjsHBR\nETt8zVmZtSg3gcWFo2WsLOzDeMyXOO9xgVUQ9YIgL46BHxYWiVagHGm4o+PF\nqDffy3a32F0Vs/XRZMmMLzaYVlrJD9pQuxcXCjGYOhqB+XOh4KP5srEGsp1H\n/GQRk6fauXrZD334pWyEXzkN2scbrybQQ3vbdZZRwZKpOKnFupdDcoLuqp5t\n8Q2pQ0G7LL6/eOE8mNWy/0qnxZn5RV98t+WkaF9xv3meZY4zNl28zzBso/Ec\nbGinKplkUnPU+9JgkfebhjSwulxoXhA/Ug/HGlC8xcAeWgeEpljHOQg5cZAA\nj7dp/6+zljjVtOUwWCHYcdJtSoI/rXZxEEykk1GjFcKQDStu+GS/6DjtosPz\nLRVni/O+76DP/DjYiAeWvyIiKp5ngK77717osB263DoP61WDtzoSA5GLsKOA\nmLUY\r\n=Dz0v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGS8KiPADHTVZGEBW5THU5uF1RLyN+hOQTvVInEAy3dHAiBOVqgZSikStVleyBmjTDzsgvNhrzC/vzzBu6PrfvSMSQ=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.13-canary.44.336_1568134658305_0.3555784523877381"},"_hasShrinkwrap":false},"1.2.13-canary.45.338":{"name":"storybook-addon-react-docgen","version":"1.2.13-canary.45.338","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"5.1.11","@storybook/components":"5.1.11","@storybook/core-events":"5.1.11","auto":"7.4.5","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.0","eslint":"5.16.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.1.0","prettier":"1.18.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"987088dc170cef4f10f298b149725a1502667733","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.13-canary.45.338","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-KDFRWFRqJinFP8xXf8EBFCCtL/IsCgZt1nB7S54fj1xR8N7IraAoMwc7yM4dod52x/ZQqxz/ESzNAlpA5yI5lg==","shasum":"9f1495776ac93f1cec97c80cfad7d33fd3ac1fbc","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.13-canary.45.338.tgz","fileCount":23,"unpackedSize":65319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9YeCRA9TVsSAnZWagAAbKgQAIBe2E/DC0/vce+o3e23\nhIVCEx68Q2UHz/h1Ii0Nw3fptPHtZgaN8YvnyAfwI/rv5Va3n8D7YooXzKkJ\nLhnpAC+zhMwPH3PY/lEbsBBJsRgKbfEVSy9P93FkTuGnZDpHCHy9CtAk/9SW\nOWw04u4WyQ8rmwkpX98tsfmOKd8B7kDIX9goTW9qxoWogtMaVZuX9yciFZiL\n29T10D8sPFRahAUOXjwomSEzU3Dg3Exu6rabyl+k3bFJmKu2rX2Ige9vz0CA\nLeZC+TjkBAkyUOQ2s3t3+E9IiTo+CAXGRSkLD8m4Qe06qJHp8G80c5vsxJ8Y\ndniYdRyx8cXwnY3WbrxbiteOnHp2KYQR2tHrzVMwSRQv409EqOuVAReQZwh3\nhY+CBGZ2zknOMMfAci9zRfyQ+KzRPtaCVy/47OOdnSXQQIAHKPRq9lx6PGzl\nGJxCZN7OprDilFLY9/LAKmYIyOkRsqF7z2ZZBoADG2T0evD9JUngOb07ZI3/\nY36q8owkkZalFn3wV7hWd7iLf7mEVZNbTNwLEv5va/X6hZ/UrKAiEt9NKW2A\nc6WAfd4aegTS8re8Vc4BsgbXPMQUH/l62Ko9plxdvXikT/ZRM3o5F1mEvOlh\nzm4xehNZIYmuVNPkMhrdjFA6HzrOHDQgo5g+uTMbo5I69Uy8Lu0ZvjrT/Ni8\nvyrw\r\n=9xTn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDiUlJAJ0IYZ2tiofG28zAUDSU1lWhR8Na4LFBS1dnAdAiBbtSZOSk3/ewLkg/1qQqgmnmz2NuwpnEYDMdV5s0Iz+A=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.13-canary.45.338_1568134685871_0.28716366399324533"},"_hasShrinkwrap":false},"1.2.13-canary.43.335":{"name":"storybook-addon-react-docgen","version":"1.2.13-canary.43.335","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.4","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.0","eslint":"5.16.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"8.1.0","prettier":"1.18.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"79df3ed23ce96dbe502b8ff774f365a8906c54b9","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.13-canary.43.335","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-+78M3Hi5tQeMdWo5QVi6IaJ/pQjdfaiRn/TI/9lgE1x5HYIGO2ZdLidTwY8y4MmzXN4yc3KtTeDN/YkUMmO8ZA==","shasum":"86dee06f130a6cff8b3213270d871749c5240340","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.13-canary.43.335.tgz","fileCount":23,"unpackedSize":65319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9YlCRA9TVsSAnZWagAAAQIP/jja77l6lPETlXXWl/PT\nkswWAbrLOQHLuhr7BDA+OlyAUkMz/H4ASKyYJc1aASlI59y4ye2HwwhUE048\nIZ6KWuAXYXvgHkC5flKcWtlilpoOLqwxfacNUEee8wZy4sVcjvbckb821MTQ\nOwfh7vBfFhi/tzPkJTCnUg2Exlvr8fZwD6+wcLetAR5+uXpFp+O+ir7g6BO5\nH/Btj7Hl8lntpE+uVCbu41qR5vfHVjHfBIVKNdBaG3f56otiQDag4ejDR2fK\nxUNhBRkiyib25FjNC2xiTw4QqHa9La7F4/Owx6+VGbazjCmte085vdNmBHqu\nHTQGzO9lqnVKlup+Z+k56BedKTaF1Hn5090FdP8NKjlcqtO74bI7Md4nIuOM\ngSGE2UwKaauYzmAKnwlQuyXAPphvv1YQ95ODRRbyI21g6R7VpOQxc3O8DY7U\nnoykOgUCKXfA5jT6WPWbQlu/XPxTEuQflPqou5wHRfzi+ui9n9n8x/VW3bHo\ncvVgDSNEWKRh/DZKMRa1ybrXpWxlwLNKpRJO8YPoN8y0f4+2CsdcC4N8RhrL\nxDBT1nL1t/1+3/ySkulHYA9Ges/mtMeoNVNeUUrahSVvUAGRjk3YFyYBY78M\nzYlzwRq7uFrXwYP8KTy8Pr0AwerkFqmbeiTCf1J8wgd3BumdsUoJiyphKd6k\nPzaN\r\n=Jv2Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDl+QNcdqQpxiyoHRt8zqASAEF6FAtJX/8E7wrcYvTtwgIgVvkDSEveazkhpDFuRLeCCI1ItWYY36d21wn7N98piJk="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.13-canary.43.335_1568134692536_0.5230771213563223"},"_hasShrinkwrap":false},"1.2.13":{"name":"storybook-addon-react-docgen","version":"1.2.13","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.5","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"5.16.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.1.0","prettier":"1.18.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"6ecf0f22d728aecae79d17bd95031c2fb15af76d","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.13","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-b18iVTi9YYY984qCsEv4fwXl90DGRPsyI5gblf/A4jW5lHDWl69bAAxhzO3G0m4WNoS7put3eYNNdycmzuG/xA==","shasum":"50c1ed1c4793e09e68fbc729a312dbf412584190","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.13.tgz","fileCount":24,"unpackedSize":66254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9ttCRA9TVsSAnZWagAAK8kP/iZx3KGRguFGjVc/iTT7\nv7lpxRtxs4xyeVTs9ZQALlhvb8g0rCrsLUXj2KBM8RBd/P6OUhWh4DbrqClr\nz+jb8TFa2tIAFymmIeNaTZ/vBcaSNaixP69SeR2vH4iAAnVdErHkpC/JrwP2\nk0nepHLeYufGDBCFkvTWFIQThFjl1vQuzDlNGTGhh7c2q6PW84+hqkNVxOKa\nFXZ4WfFM+GAeRn+68x3a3/OjzPw0DB+j0MPKeNMC/C+6O5XYgdXTMCEqNxnE\n2DKvbPl5hzHamYXgTkB01S1uGbipbbsSejfLE9/g5y5CtoTSiweSlu7Zp5r/\n2TW1HfHbvcmiN8SZQxrpRlG3ujqJm3AtdjGxF6aunHmAl5AqpfQ403+DGDyR\nj2RGx2i1Z+Vg1mj6Cb8gDu1RPKyhJgWB6BlCSjCnKoG8i+7tQKSyMBiqMXq8\nFeHuhPAK9TDCHVb/nn2Ve9w7JpXM57JPuJa6VV7fnEYdrUMqBF5qcraMcwJo\nW7fWw8iWhtTC49k5JW1WwskGIJBbi359W1Z4V7xAtx+XkbT26Tev8N38pZs2\nWEJPFF2Zl7C5jm/GZwydrYfgeAFNXrCFUgfJ/OzTHahWx787r62FZQ4KLtTd\n56MyjON5hJtGavlg+/lZeIuKWzAO5fqWh/zjrmKYV6V0Gdrhp91XTl/Sc9pQ\ne0xq\r\n=Ic8A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHp7mHXRpBanyaDoQokdseks1ZN/PNHaXhVU0dcQ1fFEAiB6dqbx3VBxVr2NT98Jtbl3qaAvM6z+ZNGk+MecmzPl+w=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.13_1568136044785_0.7029828262341813"},"_hasShrinkwrap":false},"1.2.14-canary.41.359":{"name":"storybook-addon-react-docgen","version":"1.2.14-canary.41.359","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.5","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.3.0","eslint-config-prettier":"3.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.1.0","prettier":"1.18.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"2b034e1466594ca310c8b018adb7d23e4cb1e3bb","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.14-canary.41.359","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-Iuroh8HGGluBaD3YICVzcJqdZWdE/9Fla1VGj2Lth0Nm3lMHcPoBpnJF1qZInB+XQZ883Qu1H/wJYonsQphsKg==","shasum":"ca9577a7ce43a3ca690b246de37b841f47bd9f48","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.14-canary.41.359.tgz","fileCount":23,"unpackedSize":65727,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9wdCRA9TVsSAnZWagAA5V8P/1QpfxaEk84sVquTMEoj\n2reL9bDx7I/BZmS3M5oo4eX3Oq42h1kQe9MmPAi7lpp6a8dHUzvwtQ0SEal+\nNcem7K4DopF3Qx1jN79xu31imSAsqWG++ZhAHBB8+WFKNw1QjxadFAA4IeFD\nla13W6Ylb1GYbpZbmahhDuFGJmx3E5W0ImLi1lOn9CNHIKpn6rQ6fd+heRSx\nEDfdlBNpWM6073imRNTG2vJe5+AS+l6oCnqpSpWKGwUudehK+IXpG9Q00pPn\nM8YXwfvSwqSXEUlQ1cwxZmfbLO4rfMcP6pAYjR5iTyWyf4lUQ7uRIiefnSMn\nhIllbRoqKLjHLxcBuG1goWqGOiVj+bFRB8ke8TgwPfOemf5lXOXZPoISUHam\nw5LzW4YoN2CcfEs1qFyALdycPS7pD4j9A0GF7F8fP5+8ZO+TzKl2M38tLLAY\ndaKtHn+qEFiXbZIf7ydC8KTdOXRehIxjuxgW1TPUVOuWOsb5ViG9LvxBwT/k\ntWK0ZVDOzNzOJGCt0cluAepewBkRZA2+BXN/XCdEopVuIdzxfXSWiNkrNIBO\nJlRgcSDF6heAKY3iBlOIF6XJW1fj22YU05eKLnJDagLH/oc8ZpHYI7aN94wN\npkuZN36opby8F7WdSRfu90QIIUdo7FlYFwuFummwhmCRU/DonS5ymE3EAGkS\n1xsv\r\n=W17Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCO7XIeM3KGVMOGhwsZ0I+Nu9PahDatZIsOgE38fmygRQIgSWuL5fhC1mV7JyBjRKABp0bYNUIzCV9zQZPGRbU5W7I="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.14-canary.41.359_1568136219543_0.988286281838064"},"_hasShrinkwrap":false},"1.2.14":{"name":"storybook-addon-react-docgen","version":"1.2.14","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.5","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"5.16.0","eslint-config-prettier":"3.6.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.1.0","prettier":"1.18.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"d42d12c99303b98d6e79d1f6be8fe25a9fd2e70a","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.14","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-E0qlZfE+x16LDbQHeWu8DBWqsO5PpVVs5JDpcmwUo4kcOBGxsmTOjMLk+kddDHh5Cv1zST7LF5LaVnAp+nHA0w==","shasum":"6a886f10d6b350b9d1e5b3732e44921a7e1a8912","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.14.tgz","fileCount":24,"unpackedSize":66254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9w9CRA9TVsSAnZWagAAU1oP/06YN2OUyY6I6/DT06GF\ngS3jRKfwk7Ed4M8jQIsDIQADsOPl3BazFbhGy0HEoEgO+0khcVDtCii613GQ\nJLKL/vCMFv8SvOkVyttMKlz1Ri3JtUQCGAc96NxgjnhDTweIRMYhAvRjCod9\nUooKHuMY/bJmOA41RQXTfbNBb7vyHJ7gSUOBbi97t1KzGZIhqa7JMPCVbnXF\n41Z+JgRcSezH5og9QDo6+j1NjLkK0KV1/D3Iqyr0NoJkTBwXRRm+R1ZD2RMx\nSy1xCG4IVwouLG/EbAeyEbKD8oy42ywCzXvVmjCFB74g4ad1/9hHjKg503F7\nScr4p07LYdBGfb9MBfW4Zgo5Ug6a12UNTL8n/4fgrK7LV6PPluMB+jVO3kbc\nO4zXUTMVTGDxkiwL3F+4FVexPZ0XJcHUBpcDVupTpYnIq1KIi0zk1ZAOxshv\nwrej3WiWOAbpbmjO4sQk1Drzsa8ggZEICrGPCqDEyr57Rdp9yI4XhkDknb3W\nyXzDGd780lEA9UnESwIPTdaK4j6FjlOb2ABjQIP6/KmVhQyF1v+U+EF+za3D\nTMwEvH8yEvscQzZrKCY0oK8oZ579a8TgNq3aVlezqaQ4k4epa3ph5sawQR4L\nyvwBkLzQjHs+9LHYetIlhr8n/1vrxBfk2GxAiNDNS4qlnbVumJg53Jg3Z6h5\nSXJx\r\n=992b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCk661UNigvgVXgYeRUvrg42hLz+Sp/7rtJmpm/gdaAqwIgBYhmIeQBhbHcdLObChsY5uSynp/aJXFOSHmO4qJtg0A="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.14_1568136252375_0.4769321871931149"},"_hasShrinkwrap":false},"1.2.15":{"name":"storybook-addon-react-docgen","version":"1.2.15","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.5","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"5.16.0","eslint-config-prettier":"3.6.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.2.1","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"effe1c05a206b9603d00d6a5cc21c25801ee4a85","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.15","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-g89Wao3Oew86AxxWuhDLaU4opwY4kvAJURnCOIvG/C2bIP5OSG5IReCxtmkTF2UCEKWFSxAPVTURrKfsIRhOtg==","shasum":"da00cfdaa4abd2b842a2181392dee872879f3372","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.15.tgz","fileCount":24,"unpackedSize":66254,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9xbCRA9TVsSAnZWagAAInUP/iCyE+Noi1Go2t8jAkY2\ngcZl3nI52IaxW7eZipIIBfN7eku+RT+dszH8tBRcLtuW49yuvE6Rw9AmW2YY\nyhFX+FEUwRHFBMriz21mHZrlaIKdMyhJ1nJ6EfzQCZv8pTlnQGWK0pU7HEna\n41cp22fx7cYW2FvEIq7TzVQXuB19qPEOc2dUXioW5HZ09hQU3XZREGg/UW9X\nWdmlgY/S3RrgxKXVsf8BIlGlf8FSsSgj5pHY4XCKKThm8LISDxoMNIVsxvss\nDFMKk5Pke+4zjQIwZyTSsis8WfOnEtafkQOIONq/2MAZ+ITMT6S6MQx7iKK0\na4OZycJpCuHXvxOuBTwwZY1zPhuiMl38MCA2E+fITW6zGqpRjkavsoZafhWv\nK/5GpLAynVEyywGLhIMfJ7SvrFt9yD9i/1S27FBWNBbY8PXYSMrWY/V7IMhO\n3K2JgRIhiW9lUDR0BxxRm2klx4y9r1IJgg/oKCFajn7XW0bnCzJZ4tBT8hi1\nFadovzfzTUBVZUOM/b2O0QSjo8qlQrcJHtnQTZi7h5eEBuevdCscM/BmlhR5\n+t4mhM+ceYh181vZSw/2YGCN8U4kUvGlwVbN1UNEuIjtwfUi+8Trsv9GMuN5\nZDH+FMuzHME2EV2vVkAjxlKu/1n2qVw9aK9Di4+YE5dX7sZQki+qGcZ9bc2Y\nP9Ff\r\n=E0C6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGiYFtVV7fzEHYD12Q76ovBi9iv4rYUirE7eJrUwUTL3AiEA5Id0MKG1zr6XmBbTbvXsgwrZCcm4U2a5PhLsvErpm3A="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.15_1568136283034_0.16512844568951301"},"_hasShrinkwrap":false},"1.2.16-canary.41.364":{"name":"storybook-addon-react-docgen","version":"1.2.16-canary.41.364","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.5","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.3.0","eslint-config-prettier":"3.6.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.2.1","prettier":"1.18.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"30f6db87a6556521ef6d5627aa4a9116f748d5c7","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.16-canary.41.364","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-v9qLAL9Z5yw5oMUo6wgk2enMn4qp+HUsbYFCShs9T292GNhEMq1qHy7xzNxWEQLOiHoj3ROpDlSLgS88sxohfw==","shasum":"26f6bb69aebe7177c5fa82c64fc132cf8d12b66f","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.16-canary.41.364.tgz","fileCount":23,"unpackedSize":65727,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9xmCRA9TVsSAnZWagAAdPgP/i3juYPKrk8xQAXTKIHF\nt/eKSx530DNzewEm/WjbbNDsYwDzL85w53+QmNQTDkKQ/evb+J/FDNisPjE8\nlwQNiC8BUu+QrOcNkNw6VnKByBTK1mMUr/9OdYPxl2lz7rowdxeTpXbBuQTr\nBKpTY34U2nvpadCq3DGgYL6CpzbI2z7A/0XFmksMF5MijuGatCUYUdkETPxp\nZMr4Q877TiQexAs404nnhhxwzaakIj7qdyEW5uVQTvxm0pt2ExkcyyGAjSPS\n2A7KyMVzGqlhO8jKCRXAnEXPDDYvWUBFvVs4HZLMUrCCHrVzNOz9KEtuxYKY\nKRr2/pKS6SntEFomzJHhxU+jpNdgDivSrnqeJ+yN39aun+L2iJ/A7QuiXTlV\nEeIePKlmyld/N34FIeAkDRo/+ChIfZcJIG1MKvdHInekpfDrLiZbU8PyAZR8\nelgDdNf9Sdln7cIanMXbCrSUGt/V/nG+CyYEu8sUI7q92ZXaoAXewwftSNVC\nCU5mCot6Przl2C45i09/UoSu+1H6Zm2GgUCCB/o5o1wVhrudFem6wYuwgL2i\nNWXizaQdm1AeCSZpFtddeL0bDtLcKueKJTu9yvc1Q7XY40Cm8puT2lEqx3BF\nuUM0hEbKyoMm5HE4VKMtj28N/CrUQZ/odAEO07hSdOLvq/AmVP6QtVKExPba\nUKhJ\r\n=TB/p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjnPlvHJBVAyTcbkjLkEIChk8mYPaN+BFHJz0CGsc9xwIgN6C+F5FyXfK13r95tYiCF9JrPCw1iDtOqBDnqo14dHM="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.16-canary.41.364_1568136293456_0.723880852859033"},"_hasShrinkwrap":false},"1.2.16-canary.42.369":{"name":"storybook-addon-react-docgen","version":"1.2.16-canary.42.369","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.5","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"5.16.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.2.1","prettier":"1.18.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"e5c5cd99c271265b85638863a78d978a4b5840fb","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.16-canary.42.369","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-Xg9FYdeNp/2dR8zWV8A3O5ZRGKc4DMU1p4v3gfJykfjvar6lX6WM+jNWHs6KCg7lYoZt+G1r5TPmeUp30SkCXw==","shasum":"353b6aea27ede0c0b3aeadc89cb678e871ddf8b3","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.16-canary.42.369.tgz","fileCount":23,"unpackedSize":65728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9yrCRA9TVsSAnZWagAAXX0P/2Mt98ZrHeG46ZF1Bp7L\nhxWwAvsV33KjwLb6wU2GUk9yYhECjQEfDWxOcjRDJhN0SiMngDL0HNehnePz\n7zILATuImG3yXVEZzR4iaZ1+i6Xc05tFwgz8/8qZFKem+s7aSvABYM10yohJ\nySlGjB4Hw6mP8cqRnkZMiJQ17iQp/BZHSlO/vswDrNIqJk3Vxhnml2Prp+Tn\n1eBfCSZYLdEc5K3rq/e9q6qRLX3j0YZ1XXF+bYEOJ3b67ZHNdYsQ6g6WumGN\n81Pt39nbBG4Q5aEw2aauDXVY+6W/ulxbKrFk24KLImlci7ajxmWEKYrep4dl\n0sUuZ3LIH/Syxdi4seWmh0iqx4YpiD+ez6/Uh1A2PpLJ10JFpR2GrjNe7Vb3\nx9XEQaiudy17NZAijcB3jrjdbiMcNASGbd+2Z6YMT72nh1QWt3kNpnxb9W6N\nOh6kYWR7rdJ1RcA1lUrKuEJazWNOF04ZseIZV2Ax8t86kh5VhwYTEZ8sG3A8\ncincIMi2CRIhno0wzyIf9Wrq2RxHwRzc4bAREVDWkanaIdeR3Lo6heL0wNpn\nq3vRF85HKj/4ZvA8idCt0CtCn2YBFj8jpKH+OcPW3PLIAYb9Os7MTY8sGdna\nDIAZOKqxA8cffftUvJBDtPYNloKVWzIkCzD2luwM8rG0GqbDZbNxIl7mUmW3\nhxU2\r\n=q8GX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdPHMQtXIETYcf4gNKbdSUk/IilfcEKwpfPeHKTEYYPQIhAP4qUsKYTCTzgb4KNckqdc+7wRce/JEcQ3TSiYV3O7Ol"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.16-canary.42.369_1568136363294_0.9932125976583879"},"_hasShrinkwrap":false},"1.2.16-canary.45.373":{"name":"storybook-addon-react-docgen","version":"1.2.16-canary.45.373","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"5.1.11","@storybook/components":"5.1.11","@storybook/core-events":"5.1.11","auto":"7.4.5","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"5.16.0","eslint-config-prettier":"3.6.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.2.1","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"cfd22bbdf0112fe8783625c939a2770d809b7924","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.16-canary.45.373","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-4RL/A2rTB9LZQOcgMPX2bzwZ8FrpIr0sXzIrOdSMQZdu4CsUoWm5uwWG3dRgDC1hYSgAvv8OyyWDnObnTZqI2w==","shasum":"9a243efa3cc17638dc2f07e318c300a9a2d4f8a7","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.16-canary.45.373.tgz","fileCount":23,"unpackedSize":65728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9y7CRA9TVsSAnZWagAAdYwQAJ/31qbvk8LH9y/AMeEY\nq2MqkaZnaLIjkMtTCk7vQ0ZIboL7QBnLN7BSZZ6KQHkZKnWUWd3IgYVahKpV\n++rWkvjwnIEsdA6y5E7Ogu4Jh3sf6oGMk48s3aZ31hhvIC9t9+Qgg2b5fCgQ\nXJ5ZBDPhDAGQ6pn9bvshnzWsgWNAzcPxX8JlAy2suTuxdg/UNorCSitSpo0W\nrs+bDgw+fPSum0N/sbsxcdjnNzlnn+RTBnzB2AEylRXYRoLZfV7HiUvi0ffi\n+8XuuSugyQOL7MtPCXkm2W0Ip/vdDGg7OwnnfFn1IBc7ywumbhyfFEruq8Xh\nGm9wFq8urJUk4Al3p3iuZVUBQw7PrviXTslMnQi0RsOfmZPAV4Cr/KscuQvf\nw7P9qVF0rFZ7l4efROH1uCd80+bgaAjk/Ylu5hve4hARpjYJ7ThyanMmCbt5\n89DVQ+IRltJETYPuv90mDkZno7Us9gNcJFFTnv75J7bnn08CDFUOzueWh3W4\nNc9D9kpAPeCKA7fSy6Ye9bU179IW3DWPk9LGrqCLMyxCNSBTW3GRqaaqolks\nNsA5r7fo6FfhasOj8YpQ2ZZjycTuz02LwD9KRY9rwyEDlnqrQtZKr9LVd0ix\n3C5VnIAzpWEtK98rGwJdpvvLWfZkLRVsARiZdeAA+/5QZRXrvY3uoX75eR9x\ntYgx\r\n=eLzv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAUkBs0k6w5btAB82UL8qaRUUI5UqkqP8fe06Cy44RwwIgdtfT9h6aDHny31P0bCoRgkvXKT9zE+kQBFEvFSJ2Fm4="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.16-canary.45.373_1568136378828_0.9166898450604679"},"_hasShrinkwrap":false},"1.2.16-canary.41.372":{"name":"storybook-addon-react-docgen","version":"1.2.16-canary.41.372","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.5","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.3.0","eslint-config-prettier":"3.6.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.2.1","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"73c4e606ca73d74e0b3bc3ca4519416666599b59","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.16-canary.41.372","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-RVObCcCEeHv5lwcUYQs/n7AFTWdXBfMoSBmN0yDNz8S7hcpifwyCzylso0YpR0BwIz3N1G8lF3J3sd6iDnJs4w==","shasum":"1c27ce472ea8b7e604ba6be8950f7af0884b4f85","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.16-canary.41.372.tgz","fileCount":23,"unpackedSize":65727,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9zJCRA9TVsSAnZWagAAxjkQAIcto7n35nkrV29VqWIu\nwyV7EtyJ0bnsCbir4LWbsLOSg5B6hd+ZW4e59hFqaZI5/nMKkMyKrPKbGPQc\n+1r4r7wEjvCSdMcmdjUGDc5ECjVrPdYbBipKOyIKPUtKJqmEjxHxrLF37cT0\nvme2rVl2BWH5QAjGNOLzUeBt0khRq5LCsNGYNn9+wFox1fdU5QZSWUYAZSD0\nv36trmxXa3HY2qSZ+ssDKhcISpyWDyePVkQrLtYiJ8CtbBN0vZ63N6RBctsi\nnXISBIDzIrJz7efbxn9oU2s+I49J/v0g/fo33rZKv+uRW4dEQTGWMqZakxN3\nDU//0RuNwOk3QytxWRW0ZzGZ0zfO/iRJ6ft13zGKCtjsdq9XjYjq1xmnDi89\n3/RPjRvVt4X4JWkWu2su0oj+8F6Wj3cOnQeNX/Cd8Mji0tuZGXK3jwoHoEIx\nG87uVNNaOrt/LKu/j8iZXFcvvErFL6cLXGCZ6N1FKv6Pf+Z640IjKUUKhfb/\nicmVNGc57ouXI+cvWjuLX6C3PuWUhY5RwHzlMMbwLYceiobw0FVlTvhw9Qsu\nchc51rz8e3q/bOWCc/jazjuFjfltQfjvVzqUkoVweU9x8f7AKbfCLAniLN4V\npoEvl4NDwi2LEoixaVPUiLX4sTGQQnoYUYQHKd6iVRGEF8m76uGIGf9xm/RC\nGZ26\r\n=hgM2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbunXoQUtLNLv2ggweFMi7UiS6u3tiiAvwTWNaNJ3iFgIgSLzH3c/jTAB/OuC255XS/3dNpzFwhkLnF+7k4SWIV6w="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.16-canary.41.372_1568136393075_0.5944185345560391"},"_hasShrinkwrap":false},"1.2.16-canary.43.374":{"name":"storybook-addon-react-docgen","version":"1.2.16-canary.43.374","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.5","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"5.16.0","eslint-config-prettier":"3.6.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"8.2.1","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"5c0ff073419ae952796303f0aaa4df731ecd26eb","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.16-canary.43.374","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-etYq25ve77hlxFbXO41UtZIeA68ksGGgo8C6FhVP26tf6NpK5s8PZD8NTO6YGu8Gxp8aZ7VxRZBw6mlBUA/oYg==","shasum":"ebd81b97cf1c3a11d29e006d1157edaa784b2e5e","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.16-canary.43.374.tgz","fileCount":23,"unpackedSize":65728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9zNCRA9TVsSAnZWagAAbvkP/jg8SvsHkajsbF+oqljc\notXzDK/pMS2WDQcV8a+LkTQGk897HbeVce1HpEUexRrxvqMJ+URmBnMNkxpA\nE4H08rilVwUKbs9ZLabmTYaEzkRo5H5eBLvpQjo3AHzotvEJvK3wil0DFBGh\np+G+bLhxJz7+4PIL2pLPf+VcIMhejF4Pfo9SL+tp4t0yx9ME7BlQFMFroYcY\n/YRE6tI/tM4qIEoapDRXVSU40U3AR0yfgWUsnobCFhIvl+6m6+hZpPUgfDyh\n78hHX7ciw2B8dCMn1GC1oncR6vAzT7r4Le//PcuXGGridXDTZuEmgzLNULS5\nRsXQvmRG29Rih3nVu/25RENy6ZzrEQWDnWVE0iXl4u3d96g/MQIWBCniF4y5\n6EwREJs7RhRooMTS2RTJ0IOqpbCwxCW+04p0SL+jtHHX4bZhpD0yl32x++SK\ndgxE8IF5slKgrA62n6pzfWhTD4lcPA1e3dsOAf0jHR5bAuC/VFZ4q6GsfUP8\nyDxaiAOKv9aviyZ6p7A8cBEo9H/LYANesoAs+718B6e+VOj9pinDmln9koNa\nSuOM1RakGTDPmcBP20p1wiQeP7FjgIRSHe1J8XjxavW6uCnnnXk66ZdwssiL\nKuzI3l0EZldNLVJfeLgHxaVFPdrewf9K3JY0afTy0jqvfEoRvleMD9Jztza/\n7WIR\r\n=XOnl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCN4IIyl141Mc0NsVMvNuECJ0Lr/0HbuPeNxFhuAtvoAAIgLyZGLulg7vQBtw0o2IcMw79nnmzFZZwHmONG2sBepLQ="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.16-canary.43.374_1568136397304_0.052592764732483976"},"_hasShrinkwrap":false},"1.2.16-canary.44.370":{"name":"storybook-addon-react-docgen","version":"1.2.16-canary.44.370","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.5","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"5.16.0","eslint-config-prettier":"3.6.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"9.2.5","prettier":"1.18.2","react":"16.6.3","react-dom":"16.6.3","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"a48035f410918c6cb1b544f26cef8d3339683fad","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.16-canary.44.370","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-r9l6wEnkcKF7vB1/I7fj2TLfyq/qlMiA1ywQADEsfe2S/Sv9qsikwzlRM0T7bI0wFbix9fpFbBaAEpQEDAfi8g==","shasum":"2b18028b1adf677331ba2a38e1f5d86e8d3d6b83","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.16-canary.44.370.tgz","fileCount":23,"unpackedSize":65728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd9z8CRA9TVsSAnZWagAAVu0P/i0ccxUufNAi5/cOduHp\nzvLwFsme82xlzpy93ND0y55VRLtmOiJdTFp+AAHWqZjKQ7nMH9sWbr4TkVCQ\nJlpvBsY/6OE+YcHUDtslrivFGUFC59ln3woRQKrpntdPas5bqTkL2GLVIreN\nLqenjUkNTNUPD1R9xvzWe6wOSEB0AcwdN2EgNQKOpXLw87e4uWXxM8mkcozu\nwD3FpvdqV7VdROLRjz/u+0yBycgABjSoKikbJbYybDUnxIXGLrJVS/EF5/tT\nZQg+hRWWn5sdzxzJ2EvR4r2qv0PYkyr7dlTd8BUs6gAsaryGPYQkG+D0wSvS\n59AZaWi3DatwlpxvOjybVYrYB2ofLSphOBJlh/yrK9Jg7+bMXA+j0QZvD51+\nQUYUnwnUHdJwDVL7Uhi/URA7kXl2zRVzzh+5/XMNUl+MztRqw0zELuz01kKy\nX5x5ZsNscYCIREhfCTn/I84hA+GhZ1Tq0p1FEukOoGUDReqkXNB9ZCjR7N4q\n+9jB+zGsnR/crlBeR2pide44FU3/+GtUjpoCe9qQUh5y7ZiG2KEt6j30UHFi\nxmpMo4zm0rNUtuQRurJ1UTbxImBEXelS6P+a2GBd55j35QXuvOi6uBOHBYM+\ndIVGl0knADQxMtPmJlVDKI3jnv7XUg868aHuHuDhLQvZDiJXB3ggbNA4zKr6\nMNMZ\r\n=ICgf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFAxO2tSvBXX/xD33sLkSWCML9wUJErytZE49ZYD7/U5AiBv0VHBzVUi/wEQTQHxWTFkE352upIRZpX4d7XJic7UJw=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.16-canary.44.370_1568136443416_0.7974370476802108"},"_hasShrinkwrap":false},"1.2.16-canary.48.381":{"name":"storybook-addon-react-docgen","version":"1.2.16-canary.48.381","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.5.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"5.16.0","eslint-config-prettier":"3.6.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.2.1","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"33c77500a92fcaca55b947ece209a8ebcbde1e12","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.16-canary.48.381","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-F8xd0AcYAyjctJPwAvBJcpDjW9zw73OaRSUPCL+6T0yTuttlTgZugxLvEYzO2PigjNGiEUEkg3hLB4MWjnxc9A==","shasum":"15fe372e152fa5c931dc54b046a34bd39b1e4634","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.16-canary.48.381.tgz","fileCount":24,"unpackedSize":66268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdeoONCRA9TVsSAnZWagAAvRQP/0sseAe317FGMDNwgmTA\nqqwCiSa5/KaMiNj5exvSFamo9IJ7I3tkEGAcNl0e5HQuEeXzuRxA2gQ+0Xby\nJkq/pxhtEpVuzVk+NK37N6n9+wZiNGJLnP/oabojsxEBk50URP7vVQsUhSwc\nH8ufwBKMCWddf/mVHlU6Uho7X3GQSn5TBzUBlmS+AqiJqjInZXG7JSLt8SdF\nrAWDNsPNm2XBQJeEou2Zz169ZxCzKlTO/70oYl5fw+NyqAJwhYzr+Sc6CN7u\nubVYHTRcUg/E/r/MZscWzRgNiHXYBarSYVvqv8BBGFN82KRMpweQEnr5igsf\n6pPJL6gEcTlNmfh3B8M4gsdfbAytOcw16O3s3VEk3zULWiLR3wwUtSCYQrTy\n8mmMcn2UGwKh6V6QWRfiG8g2nEfY8CB5BI8qQ5ddtCaqfsm9bF5aovLTHYwJ\nkNGQ+lGQKPqKxuZO2CGzcA64QQcy0FpJC26vZWN72q1+gg2IpNW7iypEEGSd\nvCdJ9bUN0pRWgHcLY6yNRmNnD2Aqld48cpCot07QEXBuhvwiCv20C6K5xwc+\nugnqS1IPC46vIRQoRm7+Gmz175zDHEVrf1wwuYg2tcb8SQUeDLaVaX1ylQDu\nzRkOUgHLA2cngNtaOVNhUDcb7REPp27opeoe9S9WyvUfszlSUx5KQBJnae6F\nc8xB\r\n=aoZw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDzrH3TxZjeXwy6l905FIAy3ooNE5zIGPMqeYLH0gtqwAiEAzW8swf0min7tVSyvlSNimfz2/VdS8Sudhv60CqTLAbc="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.16-canary.48.381_1568310156885_0.32965818898975274"},"_hasShrinkwrap":false},"1.2.16-canary.48.384":{"name":"storybook-addon-react-docgen","version":"1.2.16-canary.48.384","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"5.16.0","eslint-config-prettier":"3.6.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.2.1","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"41a31a797b23232c8d2df59abfd7600c70a30188","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.16-canary.48.384","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-EwE8OoS+7EFibld25ETys7mHQNmqXgjhEpglOb9kEFPSBJpyZK00kP3CQIqPG8mwaQ+v3PmM29pcUzMOCKdT1A==","shasum":"024f8eda5b09df41cdafd4b6263ae827daaed915","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.16-canary.48.384.tgz","fileCount":24,"unpackedSize":66268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdezwqCRA9TVsSAnZWagAAVGsP/1gJy2el1GW4cDKrrSXT\nN1QXZAbk9mjC5R7188w8VDFzobfBeEMjKHHd3ck7DrFILt30gPxyPTUL3LYi\nJU0XzxY0FZBgHizzu+iqz+FvLt115hwYDKz+WqTGCYJK8+JL586vPeOu7C7D\nVGHFuJvv99878HFLMtfobLzHiF8no5iuvk9YW08YfmgS8x3M3sdL/ZERwr5O\nSq/6WaSx6//UOyjjnSmq+uiZdODMFjV1j9ZOzEg91uN0Mm76RGvx/6FMbJB4\neftxdOfMrk86yKmLk7+h4+1iOh3elXvG6WTEqS9anAfU//+Vj03En10iYvvD\nt/zU93997wMNOlfbUA7kIPXuy9AMmgcC8ZdnWkCiJ985kzMBM6clMghgqbNx\nyvvA3FP7RVuCDbZIh3qfgXk41CiEY4AbUItFQUAFzHQMjU7joCses0hGPS3w\nqBG3HWWi1yEN89mbkyIJWUFMH0UtgBNP7e800/X4nyZgBmuTm1NwAlMuGyyW\neO2a+DxTcSTuusGNiT9xClE1MrQvTpxq1gG6JUJx2AjVj62EEw+lk7aCs5h8\nQzRBZgatvg1sLpO6FkGf7SQhUH14147yJ708gWytnRpBjq+x1Osv84qogFzS\n092/Z8RBe1ovZ9xLtZcyIeloZRtCHHqNqc7+Zbjxv78IEJAZ7K4GMTDaZ3Q3\n9ejD\r\n=y7+N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcQiwiakw9hQ1eVD6uG0fN4RwrLp5INat8SOF9eeLttwIhAPA8O0sNXAuuHQrKZVJagLcxIX8sKDVK4NPnGhXKqX9v"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.16-canary.48.384_1568357418154_0.7813948243044035"},"_hasShrinkwrap":false},"1.2.16-canary.41.387":{"name":"storybook-addon-react-docgen","version":"1.2.16-canary.41.387","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.5","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"3.6.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.2.1","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"9edf783813407b85237a5366f78df37235270c6b","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.16-canary.41.387","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-kEFw/65FJMiMqaqOu9mvjkD+Ixq+O76DPokG3gfr/xc9b8atH8ah3LAH9dfHZUhS+7R18+O+xRb2Ld15zAb9hA==","shasum":"456c4dd87828ee38c9647c58a451a183f36b663b","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.16-canary.41.387.tgz","fileCount":24,"unpackedSize":66267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdfEdaCRA9TVsSAnZWagAA6k8P/2xZH8b8T3Ds8dUMNKrX\n+dFk4/tsDYiuF2uyrljlqM2iDPWo3mzH5WTqcEIr+OE5WNrhDXeuPMuEInNH\n+PmUXufEnwk68i4E84PdJ1RVoPMpd8ReZumte9yUXBwG76SbEdqlrOSrXn1/\nhwGpDc91KEKdNb14CAUzMBN3+F1Jh4iri+g6QBPmfd//VV2li5v+IHOrpQSY\n9IQ26USvX8/wq8sTIsvsKHy6QckyQJKRBh1Tw6iSg13lvzQaiQQN/2rCXLn/\nJZbqWrJKQg8j+GvgDUS3EO9+so7AYOx7M8VGfSJ5J7WRtbapCItMytqh7lX5\n6+mt0VVLf2dgcDxyRHpG0oVlWz4N3DubKPBL+l2RrsmpoSZx6kzLyRzo0yRl\nFh7iekZvPHfZIv9y3TXC4E/LW6wled1gPX8lWKw/EjOWkEVKJa8GFTH0HETT\nIIpCAuB7uehSP2H3opKW/9SglhFJBXTFnQOqawknuxsBxBebn4+OV7ejNflO\nyWd0DcfsYPwD/mN6lXo/f7KXAawgaqfXygfv5ecksGMjcN12lUjI6BNKByM1\noPhshdxZuF5d7iZrHDUWJMxLMilHWGzqXao41KZqIGLV1nB7Ekw9R7MrDpBn\n8GqVqGKfc8j96pSUECh74kPeJx1Q+UnmDlLiVVYvkK60lxpE2NSCcIkQuea3\n8DOm\r\n=KShz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBuPzPLy7WaZJLWkLoZnMSPjXC6he6jV79lWfH/pSIIAIhALRM35OYo1NFucLV6oEVZtrHfIXeKQc+VBkuGY5oNfiM"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.16-canary.41.387_1568425817568_0.5787599660668312"},"_hasShrinkwrap":false},"1.2.16-canary.45.390":{"name":"storybook-addon-react-docgen","version":"1.2.16-canary.45.390","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.0","@storybook/components":"5.2.0","@storybook/core-events":"5.2.0","auto":"7.4.5","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"5.16.0","eslint-config-prettier":"3.6.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.2.1","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"395bd3b15027246b3b0163c8ae6d9fd172569b13","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.16-canary.45.390","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-3MBmlQNalpv/2TQVh5Sb13aPAlU0l1aYkSbo6A8eL74XItOgAF03+tvvWIarLOvoqWvPATcY7c16vntpt97Iqg==","shasum":"0a665608ad605a33cbd4668f30e355aa0fc0fe5f","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.16-canary.45.390.tgz","fileCount":24,"unpackedSize":66265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdfGRdCRA9TVsSAnZWagAAE2gQAJT9UDaYsCTwLWBnnTPh\nQ87ln9tcnFpKlUdO0xyJtxDSE70HblcYwUwde+zIru1CjBK+T4z0CDYymM6s\nuvPsatO8utFMjyJODgiEi31ZCqYU5Nr+2sO3KCHVnkCC1pYcngOepjV7yHdh\ncUeE3UH3/4hoa9rsiHVGKV8fwcQ8jNY56BUkJQdhbb0d9Ju1G3efudDL0vWU\niM/JyBAOFzo121GqaarfUTnmSxE0AxYnz75lfr+Gcn8CPHeenDET8CT13Pni\nyZ/DJNAw2inuj9WYEX9rj9rJWkvIoj3DkwQuzbz9iTHm3ophSojnNdi46/nu\nvZ4g9uwgvio1/C4PgIo13Wzfrm38tZXC1heBO4x1gZVGzQxADF+c4vVAZFEE\nGx4syr12JB/kL/kJtgI5WeWgTqhQEtr3hZR6JhHJRPfS9WcSFZZLiIHJJ+Rg\nPpP44POXKoyrQCU6yrjPbizNBmWTyk5QJy5/+90jttICq8BnkXDimILeUFkw\nfffngmLWj9PVUUvhyr1uwPuwwpzP3No+TfEf8ScEByFGhrJMhm+RJ4/roqil\nkzVxOCOM1kvUziwc1KO8+UgbVdifQNf9VwKL23FycccA/QFKMBY4a90ACs1R\n+QM7eE06zTEPDJK0wV1nG2ke5Mgi+7OxlQL+3BH937mXdXygrr4qhuVWDaUJ\nHQqm\r\n=Ewxm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG5JXVC+ALg/b/u5DDNSdO6vw64NgLBEA3mhKXynOK5oAiALEcXNggHaZ+sb2xLcZJyIlrwrvLnQbyxj3X6gJ/as/Q=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.16-canary.45.390_1568433245139_0.44141932216410495"},"_hasShrinkwrap":false},"1.2.16-canary.42.410":{"name":"storybook-addon-react-docgen","version":"1.2.16-canary.42.410","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.5","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.2.1","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"26a6585884604067fdc775da1a42d698c04181b0","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.16-canary.42.410","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-8Jwa8kFR3RxZ/TUpaeBTTfxd4kNr5lyLvMFYcRivVrFcc7QHq1Ey1B1zfhM12vpUpKbzRXEhcnT4/qXqWTfCxw==","shasum":"1f2c5c2a97b888953c8ef6cc810a79a3364004fa","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.16-canary.42.410.tgz","fileCount":24,"unpackedSize":66267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdf9A1CRA9TVsSAnZWagAASrUP/0p/SYMFaYKKw4Xh3vtM\n3xbdAjUS+ntmglfzuGUmcQKae3qO7XzA5zKf0C7R8cJSL56QRqPuJQpLQnSZ\ncfNqeEj9mCU8vYm2ZCvnt0MEZMKKlmadPxfJsIaBJKGvERgf52nYYwDpIsWT\nfow4GuE7LDmC3Afzd3ttDQtOOcfHCbBceZdWR3Hnbvd3nUiaAM3pPudW20Co\njN8vogjcy92B0o97mXZ2MisyHxCZ3TcXV8Wqrsaljv4paQP1MxyPY+sIkd1Y\nPIX2p4Yy+6dOZJsqXVLfhmFPbrOkNHwnsiMPFzqwzyAlqt0vNqkj+kniF50a\nT+6SY6U5uhlcLLp5uqR4Q1PoTp3wwlAJsTf6IbQ+s59PkL72jY6MHBSTQwZS\nF8u9mAhF3rUd/AoDrjG8DdyWHEyd8spWyh4loa5EWtue0F6WiaKJbpSBz0Nm\nKgtx902LIzzr5bFoWFvB9jpAohZsn8nbNIVtq6iOuv3s5ZyT5mi9w7vb7VrQ\nIjwCWBKsIvAIdyGCkitr0BupA167mdEgCUg7d8o1KtWQXPw3wJGe66fpkYzk\nLwX4YcTGdYh2RGwukKa/SyG/Pm3pCnzUhMfSdf44LwhL0QLKLO25DDp+FhWv\nRoimj/0Fe0OoM86eHoVwhsJbOVsp93hBG4VaVfMfK82Tfxd8R6vn1d5QTsqk\nozns\r\n=sZME\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIHaw7pdJ7hjdVGWRYDtojEiWttGBLSiNl2y0PA6JVxwIgCgbyEkgLK7jgqMlL875UcT4RGZc8XxhLCuTIr8Z3N84="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.16-canary.42.410_1568657460992_0.32143518128344484"},"_hasShrinkwrap":false},"1.2.16":{"name":"storybook-addon-react-docgen","version":"1.2.16","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.5","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"3.6.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"8.2.1","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"6d5a58f5c13e738e97b7357e0f84a1816bbdc26c","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.16","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-Fqyul/OLfDrmVHKVYCuWUrZq9SNtetuWaCCR+61yqovA3anAeIZhK14YUVqrYMO2S2oxzMslFpj//waGLj6n6A==","shasum":"b9a6583c313449e820c62682f2f7121cf1d616d1","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.16.tgz","fileCount":24,"unpackedSize":66289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdf9A8CRA9TVsSAnZWagAAdi0P/00veQ2sfNTEWe/ERCMb\nklPgef7+4ShpuqdREDJPYx+3zdBPENcPt+0gWVttprJ8KOVrK+AvDbasLYVW\ncSwml2EIvGUafmB3UPOoPxhASC0f4Mt13WQbEe23AXINJ2ca/DJLkIBZnJXr\nwnWU0txRcMt/b7F+S4AGMUQjWmrMX59GMzPqC1vU6ueCh6KB4dHYs7rkGrJ5\nwNg9hdzkIBEO1EDKlR+wUKk4WXSXIMDtUIfHjMmbC0h3RTUVi49jgK+T4Zw7\nyMsduUCpdiU8yRsuusv5SMCkCgiyVJS/bBsCoh5RMZBMqY/jvRIOWwmbmUDD\n4zjUNqqXePRcmUNT8Hxqj4wxZxzuii+OFU/r8G+6I7leXzi4vL8a4u7DYMki\nNwEn9nkTn8yTP/demML4wb/p4gTowQHG9ioynezCvng8Q0ap/TIIdKqLHN72\nBiEHmwFZtCaOAB4sop7PcF/yahShvxPOD0FzYBNu12gFgMVbGFtTc0z7DQ+B\n66Fn2oOaQS2CkH/6Lkhte5wiJEi+9rC4CUKTRHB9xgW5jxdhAkJ1zOPQql3+\nVOjeQMCAH39o1O0TwpM1SPQqHD6+2aUTqQJMEkpjsTICnjI69RE7YqYXPh2Z\n3WsYJGO1Pfo2P+RbYU4XNF17RC1jUMo1V1YHMwkHNCVew6pT3c9xb2tIrs8Y\nBA0R\r\n=Qmga\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6NX0qQHMDb190bRxmwyt+jdKWdsl+Wp6VL4nAwfwVAAIhANhw5h1PISoN6m7L48AR4uEUuOgHMD19FFd5jyY6XWhy"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.16_1568657467551_0.018282560104285972"},"_hasShrinkwrap":false},"1.2.17":{"name":"storybook-addon-react-docgen","version":"1.2.17","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.5","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"3.6.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.2.1","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"c68747d08cea18a845892b47c509f5676dbf8357","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.17","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-Pi0KwZylrLrXspwA+qB/zin5y5i+5g6LAUVIjbSSZ19jAanQt23IHdCslpdTQuVqYz72HBS7vDSLftUO7LUMnw==","shasum":"613816fbf71093d41a41cdcc469892a52143b2d5","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.17.tgz","fileCount":24,"unpackedSize":66289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdf9BpCRA9TVsSAnZWagAAzgQP/1qEuddk0rfahjBlgnNq\ncX+g/juvjAsFKOIkVc9b7WJIBpu7IxArDObBs8fQ1oM9QViiceoVjjkKbyok\ngFryGIdxZGWJU/yDvX46K4nvwBlnw7jB0WpTbpd078ghAOMV6onhtQDoCvg7\n0TYf5r61DVi590QtaGFryTC9RFXjjs09qDubALjWR/KaJzdCvnDdCRUFVg+q\nStenkd9NCRKG+skbvD4IcR1NNPihp7GXoL6Kh/O4UYzxN6jD3IrkHZPKeszc\nK+k40Wzn56YMHTa6/IYZ3O8zfkQSLvBCKIpMg4pMy5ajC+HDU/M+SnSrdipm\nWzpqdCzI17qRQjmh+3Ll1N9t55NTTfhrwKx2mHofJqhM2pWPLIfBlIXz5KJA\nMCxo7jJ1mMMaetYAVZQzPUKddLALxDkkr15Rk5tugFjVXkCkbAy4ds42BP7D\nkqeKMNGWksqvbgz0F1TPJpdngBODfUw7cPRDa+mQYL0HN6eKlX1iaInXo1si\nDYYBb9rnJ8rEk5myujdp66g+IuNds2P+r7rbivK3wwqz/1flXUFg0qYrAlnc\nNZCa9SvLtIgiQuNQhYKgXHrziaml3M3FXf2JAIZdH/PMdlWw+P6TAIbSQ0ap\nC9p1Mek6dL6EPPrFYNcsdmzPia2kEeJcxbhyHCuM2Fx4xrOKgerm1Yn0DKCx\n/Ltd\r\n=MpJP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICiD0rCXJ/58k6OmTlDM2R9YefD2IRBG1Z+3JIvo4F62AiEA35f+YRByHpXQXoXCZrCN4TeGFzfXQaz5Xhxdt3aIV8M="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.17_1568657512631_0.006240409296692562"},"_hasShrinkwrap":false},"1.2.18":{"name":"storybook-addon-react-docgen","version":"1.2.18","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"3.6.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"8.2.1","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"6d148dc86bb03a67c63d23617a15a8137b16fa2a","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.18","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-wc1W9iveMf2cJgtMwmQxHalfihjQgMaXLNh5hQ46uk68T3kVCwugF8HFGyq4OlQTG3m/kRi6eYpwsZMNxeHamA==","shasum":"ce2e144fb81a27f14b73da396e142ff2abd59243","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.18.tgz","fileCount":24,"unpackedSize":66289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdf9CLCRA9TVsSAnZWagAA2KwP/j+zZjAKChtdfELTOdI4\nje8MIIDSsnVFjOoHPMMZhPW6sr3DrrEu5b9eG38Sue9YVcSkSgFHhPf0WNCF\nUJ87EVRJoCsI56jVmNPTQmCwWne2ihao22GREM+hysU+o+1+mtpF48BAiZqZ\nePQHJr7sfBbv0CE7jDplwoROC201//Ymodh+mHxV+Jg8xQI32UZkXBR7gLlo\naylL1D8XZiwBInlmy/CgjgHHMCvbrPN7+6LL9cPkLwqfEaLBdbeovqyfeA6f\n2pG0WnAkWZem6KCHvZNv7IWlzWiiLXx0ckf25mDwpq2plOZtR7Cv/mxEr7mL\nVsUPi5cJ2/SPeS1Pt1q0daATFN2MVjO3bQWTaMRubaMvq5JjePHEGTwfYyON\nLZStGALsUBo40+3lafzo/+0zIbcKARsdNSM2YpiFiHRM2h58UFM9M9AwQgcI\nDCudSQln7zWmPAA9ArcZrOdrS8k4HrpkFyD3sc/EYjG92/XDmAwDP0O4Smkd\nF6gP7ir339ul+0/W1IbnPk+Gd4m5R994wQo7y2D3d9iVSbkf2H5j3DtoMxCN\nPgICQwzRzrF6nR/r4o5c/azlNaPL9KrkpdLJJ7sbiqKD/O4MP9jSArAwRWGX\n/Pd1efBJ8YryUes/7YG76CDY7MSzusq+OpB0Xk5HGczdDcAXl94hLbSAMblW\nRGSz\r\n=QzOe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+4AuEkWz531bntHdFj30YedVR69xumymjts/8Q5xOogIhAPIClvarfkDyZZAX3mBPy8WejNZHWJhX6wY0qHw2SSKE"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.18_1568657546741_0.19279375194859139"},"_hasShrinkwrap":false},"1.2.19-canary.45.416":{"name":"storybook-addon-react-docgen","version":"1.2.19-canary.45.416","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.0","@storybook/components":"5.2.0","@storybook/core-events":"5.2.0","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"3.6.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"8.2.1","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"b8dc3f5077ba3aee65d7e7ab53cd111df0939803","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.19-canary.45.416","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-fskHyqDXquVUWd2xL6Hfgh+x0u155FqZSwyMLVtYjvF549vVxjZgIdAvOJF9Vm2t/l8Nq4G1ApFJ9/z/wh3X1g==","shasum":"fe0a9106b35b096d34d50ca1bbe2ac8a28aae730","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.19-canary.45.416.tgz","fileCount":24,"unpackedSize":66264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdf9C1CRA9TVsSAnZWagAA930P/A3CZ+0OiJDjAUjiRLLQ\nhjWB/+npoN3PTDKllAq1bmXpirQhyw9/FyZa1Qj96vKwO91elPn1vszkRWq4\nGUB+1qTUvUWHJVNTUrzV0CavPJ2AJkSZQ8JKA+bAH6B2cdMzZr+rsUWeSFmC\n5KoDUcxZTVcdxH69hhA0uII4ZIV1htaNOHqpIAk+XYjxVQMAhrsWyCyjEOZr\ncihie53CBCynLqMJg8jIRsyV3/6uDrkLYMNd/+8wvfAqrMEYe70D68oITVy2\ntstoRvH+eKuDyNiBZJqCduuBuZOh9cFzZqd/KB6YtP1Uwqgj+S5meroGRfg3\nRHu/W9YM6rCorcWLwRd37Wo8BGLU4rR5hGobM5pbYNmcW/C0dyvChn3KqIrc\nHqS8wP9r9OYK+8Zq5T4RM7KnQSKaGAwYTRjeANN7WhEaYQ0OorNTm9u0/BKn\nrL9Rl+4VHaVT3G1IBR26bJCcuqPDQ1K2rZXZSlmaVaiWqC9pfIOZPLPi7gjN\n4BMQwtCnDNe/Cwk5Zkpa59Uy3cgzcO00wDwO2EPoQ7kwA5mC3ajkMPub4hwd\nKb0L7mS4OzmtJTN4y7N8A32X+mOT3TsY/pvj40MOYllHJJaREpCIwQSLqNej\nhjZHf6PeYAx2xZoLjOS+Eha2V6VjtU+6SsBo1bjPW/y9EGGVGb93gaFwJRka\nj6qR\r\n=0a+2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwdHpeetNC3xrJb4kp0H2rua8tpuHxSy8nX29M65belQIgZ0i/eriwn79zCdR9hjy52J3xDqfHEbaUej0hBSaPvFw="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.19-canary.45.416_1568657588330_0.14509583847685392"},"_hasShrinkwrap":false},"1.2.19-canary.44.414":{"name":"storybook-addon-react-docgen","version":"1.2.19-canary.44.414","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.4.5","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"3.6.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"9.2.5","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"2aeec01c7b183ac61166b0e23dfc367f9b452dc8","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.19-canary.44.414","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-XztfxwK4qK2gj/HrmFPlCw+LE3sBKS/vfXptvna8xVZF0SMiRplBAtkIKR3JipdeKRiNd396kXAIXSoiLpQJlg==","shasum":"fbd976be357ce801ec6650fdc9f9c766a7cc3527","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.19-canary.44.414.tgz","fileCount":24,"unpackedSize":66267,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdf9C5CRA9TVsSAnZWagAAdR0P/jRf4wG1E6WOOiGq0gqo\n5o6NlYk6SEp/yhCh6ZAH3kjREDpn6Z/CZZOSxrJGpoia7G4ruPTB7hFgQgzj\nnXcomUqx41lFFOF/2qqg7bgjhERqski+sRDGwTUANuoPmgrZ1RaTCi/1TxuH\nvWZDMAEkQoy7WI9+qT+/ci4GnGU1M3rSYS3LKy/Oo75iCbxwXrWo4jiE45Xu\nQzCmU3QH0fHxs0hSgLL17W2tslRkidhygL/+9ssBlMSch4JLuPPF0QsRsZIN\nnH5TRW1JCTFE5MWWjyxQ+tffbC1McC9d8NyB7kBmWr8JoijgIT5OnRxWpPP2\nO4rLTCnqgy8xfNwcCEoPXr/2gNqUKruzkCX1SQQOx58+yJu2GHsTFjJDsTqC\nmqGTKg51bOiPIbRhvioTcNiLHqIU8+L1dSYGCBinA7RqH67u6Ja1UHFMNmpI\nsZKy6S6Gp7a4/ekFdulOLdEQRThUA0v7IglI1Ie8BBtOQb5RY1qisuUDT/A9\nbmHaTQ1sslyse0Zm6y23qHFADF4fXE0rYqyYnaOgVk3zRPgU4quOEabMzFVc\nAEBZCqsrPXliuXv0Gpv8xahF2/JWB6zmVplt1aAeq+JnPtTUmBnU0TCG6NYz\nu6Yinuxksgn8+3R0OF9NQoLTd8veDzV5USDjLqQIzJ+qlL+oHFjTKnYXX5Cm\nOund\r\n=LRbm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDznUzoGJzbTX90NTjPny02spzsJNKPYjc/z1uaM8wKyAIhALPz9UoZo+6hHX89hEkVO1xDP/dF1xeLoCM1xo2UbFrK"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.19-canary.44.414_1568657593217_0.8770968725034141"},"_hasShrinkwrap":false},"1.2.19-canary.45.413":{"name":"storybook-addon-react-docgen","version":"1.2.19-canary.45.413","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.0","@storybook/components":"5.2.0","@storybook/core-events":"5.2.0","auto":"7.4.5","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"3.6.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"1.3.1","lint-staged":"8.2.1","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"d5340575990afe6b67d6093804335e4cfab97f99","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.19-canary.45.413","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-qglv9OJl1f06LSyUTIR3Mv231vIqMtAU21QtrRLS3m8CrIKrlT3qpDIxrzucYmTuRFoGc2yPnM9CDKxP2x0JNQ==","shasum":"42e08ac2778a00b1323ecfc9932abd74ea2726be","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.19-canary.45.413.tgz","fileCount":24,"unpackedSize":66264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdf9DVCRA9TVsSAnZWagAAAF0P/R8OXI3mWSs1PCc0WIiL\nikTdxX/58nuZ7URC6sm8UdlO4KohtAQVm8BDt0FtSzofoKHv2Jog/+7U19OG\n2Iy1ay7J7wYZhFII8jfdA3Iuz/9uQB1mHZSbU4sRwLJAQIg1xYoLZVOtWnhZ\n+y1TPZGeoB6sbbht6xyNwb6fU3EUCjm63CIJnLchvaqoHeMUid8G5ajU+Dwz\niG2bz1Dmal3rnN0DeMEKC55MbSZCBwStign7slZuFvraazPFldEHqT0tdxqs\nGdO2DYmIz7zUBn1HItnllJwtslp0jxglpHNOb+i9uZY/KBQlkPhW4V+igjJ/\nPWARrZtFP4oKqWD/TVbahm+odE14VcpFSrFKE7sMZrG2n8SgPnEXvplIB03J\nU3FlP+BW2GcoxvXDGAfRG5m9iJdS315lJ4Wx1pkB0c4jSmBS9umyk7wKicC2\nvqhUkcJRDUq3oR+fSEsems2i9C/4PYel5iWvVcppGNyqyiv9ciS4VoDcEMxN\nu1ZDg+BJ39+fAgl7dA5gQ/VLhG8miR1PdzlWcQbGuuy/Z6BlaQHaGeXGgfmR\nSriZ/w3Wzb392e3PL1GXf0m/wLWPHHnwY01mOkqeCpZ9LR0VoOPIAuwOI8KM\n7hhR2otdyhhQ9mpxbChT7DhBtKOyrnjpA2RVZI9LiUBQXK/AGNXg4z9P2s85\nM7kf\r\n=QFIP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKrOFv+E8JCAH20ZrM8C7hNAP5AS01IP5J0f7zMc3hywIhAJSvUpe4DgADVs/nh/87CuiORjddUml6aEKpjDT7UmVf"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.19-canary.45.413_1568657620947_0.8217052323651544"},"_hasShrinkwrap":false},"1.2.19-canary.45.420":{"name":"storybook-addon-react-docgen","version":"1.2.19-canary.45.420","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"3.6.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"8.2.1","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"fd1de43908b321ab9645de158a124cb0c40d829e","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.19-canary.45.420","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-tRXfL7qpeDNvZlQAMbjXSa5mbtNDHTbeaQi3Hk9y3BZCGM8OY6i7wttcvmRr8RQQxIl3waJvL0S2mZ4Z7FlktA==","shasum":"a9479abecddf3f00f2d4f5a1610d1f4e5613afe0","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.19-canary.45.420.tgz","fileCount":24,"unpackedSize":66300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgQp/CRA9TVsSAnZWagAAHqsP/A3DeC2bwhNhKkPxrA8q\nYNWB8+6E1GWpmW59spWMOPVqaJIlay7gxFFZBohkZ+KBKxc9//ihxIWJWupY\nwBJWK2stZw7f7T/oBONJFYir+qErK740C8m872FyGu6ztC5tRGvcqY0m/N+y\nGnskcQ7skbsYJM+vxGjIMxNOIJTbjdqd+CfVLAGAd7zWD4f/AhiKQmbc8fH5\nu7FlRWUaj2VVq8YFr4vxzH0fjQ6ufhHflrO+4PYHIqtOJtJWhyC3epOcuCJf\nJaD0TcZE50LcJ+ZZ3mJARBSYF9TqZwZ43zNS9EOwbQcGI8hUEL/4+0WhcH30\nbXLsgHiTvXwEDLB8Lw/T4A+Vf12L0XOM97Y3xzSHBNx3D5KwzqikR7HMKh5q\ntXTXcApN3R7e+ANVLulaIdeGPzyZqYnrzkVqdri8xprxQUCsedGXZzCR/zrM\ndVAEYjGywF98gK3gDyBeb+SMDRECpUFLLXmhJjvC28AtL6KXXYaj0//Bxwfc\nuetKWo4IBD9jWiW6VkApW6s/VIYfqACrGs4758PWqv1MM1M/B0A76FeMOC3+\nUvB5uonHoO4e1R2IJxXWe68939TZovP/3SNdUTTOPNOroHTAYzf3QHj22kf+\nG762TnGo+3IRIkzxijwK2ESDgLCUhTrEeWlWI8b6NjwqO576999JSa5Rn1Sj\nyfJi\r\n=/Ste\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHPk0+yyaBtR1V4d8zdsGG0TyFUWgDe4c4R3fAa6rMcAIgcqlzOCMW/hiddL92aT4zHpu6CjWr6Mai4jWN2qHr214="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.19-canary.45.420_1568737919020_0.02685035216130771"},"_hasShrinkwrap":false},"1.2.19-canary.425":{"name":"storybook-addon-react-docgen","version":"1.2.19-canary.425","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"3.6.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"8.2.1","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"081ecfc31ac2b84c9e5a2fd2e069f971293252b2","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.19-canary.425","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-WjUHuqWgzlvn7hBVkgdjEYENMqK0OJyIMSRhw64rJf27XvYtOwMXriR3LBMhVfnfkfXCl6JgAzqN98g5zZoyxw==","shasum":"6654ade69f7891f88f97db0b02619af91ee0ec28","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.19-canary.425.tgz","fileCount":24,"unpackedSize":66307,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdhS9ECRA9TVsSAnZWagAABXcP+weUXLD3ewmJqB9Yq0fF\ncgxdC757yXqQraguGlyqSfr8CcqjT3L+IP7Zs6B0pur/MuL91zAASKVJR48I\nzkDS/ldOZ+6GQTZcua7ega42hXduGtWNFPf5UbGHn0luO7vWLCH9vM2eVr/E\nnFR7BDvH+P9OyoCFh/RrUKYsimRRI/DqmGOE9SojEIHhxSdy2glzu2hS6uIv\nnYdqHJbZ6fQzKltj4zaVHWrkRn7ZA9IHGP+Gsl/F8NnRjX5h9X41EqwYSDr2\n29Ibb35Rmom3HkGHg9G9ikJVRupq2Q6Ron/SlKZdfPfrQJ/VD6phqnV4B5T0\nR3KobKM8ZI04rIVSmre85Zq/4A4tdi2GaQJ7C8XQMwPFGHkC+7BDrYK4rh9b\nau7hRoV/4FIWT/h/NPiCE8qJhNIb70+YgWsDNpuGWtQTwP9ozxpYhAIw7NxV\n8pDnXpH1jL4u6yQxqNJ2E4JiEWGXnyWdxvOuMFSeHvdG0Tf8Cqotz/3tjKbe\nAKLxzS5hwAAP5jBhmCjJHFZfzHlbUb/RkyN+Ie6YllKYFPR4OZyBYu0o4dzV\nXlpBaCFsfMNTF30/VWswJj7OBQuCQS/lA4VsmJpPTZPmmA6qwycLsLN4ulV5\np+zsW4JVltOYKNx9aqmgzPWFGEVUcUukUMgkK8Jhx+CbVWwO5w/bbBvGXY1c\nLqcN\r\n=WkEC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZxF8KVr1HzPFtP7n5/g6yEzZUhRseqW9j0ebPI/24eAIgIXccw7RTXUizvGp3kMN8ksPX1FrTvtLKaAWFByQuiZI="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.19-canary.425_1569009476304_0.10535675954228063"},"_hasShrinkwrap":false},"1.2.19":{"name":"storybook-addon-react-docgen","version":"1.2.19","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"9.2.5","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"a07ba0b112240d25c4bfb0905f9015815abeef45","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.19","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-YfPcGM0NOWerhDSkCwOQMOPWkFq7Z44z3JaH3X9iERQfk/8lM2/ijnlyaRknjGIT7/3VZ43NetakcBEjfVVG7Q==","shasum":"57a36a83f407dc53d0310c0b8e8065e41e0184c6","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.19.tgz","fileCount":24,"unpackedSize":66325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdhS9xCRA9TVsSAnZWagAAX7oP/i3Q0TVU7ITWNQcQ3tby\nD0n32RdeoYYZOCVH7NUyUzRljlPkZhP5dWg1IfejPqBsiLHcG0QwvKaWkdDj\nojZR5vc9aXffsHPLxbAEFyEawUi8N0vGSjTI33GzDggar6TCF+5JbkJpHHOo\no4TCVBAz8yk11xcMU9n8fEyGnNkdwZEss9OVt3vkkSupGTKF6K2/eeKNvlnr\nPyOJY8J/XEoLh+sCkHoG0QnArx6eZUGIY3hOpgH+tEi/Q+ywFQITqrIaqcFR\n8QnpMknlN9z6k3jl0fb6JnmCUeY3/msI8rOs/oDv8161Ch4CxCh6DiQ2TirU\nI6F7Z5U95GBmu1x3oj+77TDe/YyqsLKo5NnpOKV3tLVR+/ZLQIARNmIkK6gA\nXfAKmSJEjEVMF5nNcqoRffVmK84CPyXYbqs6fTNcPyfTOv+GERHX41LXtI/l\nYIqc4rO5V8PB1+BPeuDHkLqYj8d6Fl9XoZdSgOXbVRz9v5yvUy7SrUGcmAeC\nTcYD21zpPA3g/pWO57zcfKdw8futHm5NjshVFDpT5T8ebXL7QI+6gBIf7AwO\nI3XWRWT46Lqfmsb5fv45TNQaiRb5St1C39jxeIgsWg58GgdZkiIc+LO6ZoXG\nl5XOIxi4QqHxUERf79QrUSNsCE7siBDIinxEXgR9h0mM+/OR9vQJ11X+bP23\npEyb\r\n=eoz6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEKTAx242pJ38scXLimlRIIEkGhVnTcioYjMOR+FmR/nAiEAzFq3v0orAU+p9C7ceROnnZ/lT7anCPh1IyD9yhWpGyY="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.19_1569009520629_0.6917773652075756"},"_hasShrinkwrap":false},"1.2.20":{"name":"storybook-addon-react-docgen","version":"1.2.20","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"8.2.1","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"5849f32db8589899d33c1c2ffb643aeb1d38c965","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.20","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-vJ1IfWhgTuyiWqTVtp+mXcZR2eOdMhOysbl7teSVaVXeCgPn6lrvIMPG7PbleeaaFC03S/vJLXg/I8kqdgrZ9g==","shasum":"df783760dac12a8ba0af90191ce45c56616c6c57","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.20.tgz","fileCount":24,"unpackedSize":66325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdhS99CRA9TVsSAnZWagAAfFwP/jbAlktBULcvvxb236Jh\nFXygWKKN00+dJSXcb5ZfDWsAHiuYkyeva0+qDiWa1nZiSVfRNOHIbdiqtj+A\narw3JpRGwGQKlvwNLrsLx7JMC7DJ3blb8BaJU52v7Q+Ql5eKYucXHmhkS3Ny\nMy6BVdyAPaGcUDpSjqMTSf5Il0u2mFdLvvRzlDQpZzRu5vrI7KzeaNAQbJT0\n71TPxQb8oiTtgkuhw3wzktmJSoLR72pqSB66ynoeUetWf6LQgpQOZhhCPcLP\ng+GS2jr99uT/wPEaZriBR7rJGjMk1FFoT0SEPba2XDv02FXvQgAu6a7TqyZh\nz/Pxe1X0l9c9ycQDXau1dW/9nUU+IIwAE5QGtSZdrvGtb8mIXHfhPCNlh/Qn\nAQ/C3goVqsdndVcfiCupWgCI9ObSdAhQarHmZJQK/gwbN6Zdy2UAN37ZG3ar\nnd3CjnubzH0mrBwQPMEPVCLI8sdWFUsAChds6wQK/J/81Xr5q3nT7TOWlEEG\nG46UN9QSPFzRYIzC82bnLolWP+v5JnrZSqEWMI9j38o8Pfd0XRS3341tr2T6\njqC2uWQ8t5mZQndHj+LnTDKKgzisY2lt90zqEa6AHHwlTX6OLkZmWnMF5yS6\nOWOhl5aDy8ljJbyQbHiUC7ruIv22CH+DyLCmL1q3y0FcuOUdxYJidCwoiOxG\nznS8\r\n=k/tl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9ZWbGak3HK59nVSxwBZM5P3eqKYTCKVzP8a/xhj631QIhALtEBZhjNVNmsmS11SdH2P9O71uVZAB6fFgiHDDeoKRn"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.20_1569009532757_0.7274069142273893"},"_hasShrinkwrap":false},"1.2.21-canary.45.436":{"name":"storybook-addon-react-docgen","version":"1.2.21-canary.45.436","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"8.2.1","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"dfb0487b231c75fe82e135c8b0a1268756487f55","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.21-canary.45.436","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-v8TMcjEm2U3rKdXy+T7QJfx0WXMydw+ugZhD8qUSQEvu6DlLlOc89Fg2AihnrM17BDMxcyIjDEasalIZLmzzCA==","shasum":"735f9afec6b23f8973056a6e0d8a130c2a7a89d4","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.21-canary.45.436.tgz","fileCount":24,"unpackedSize":66300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdhS+jCRA9TVsSAnZWagAAWgIP/2mVZNwEa2IIKTu+HolK\nF+YmAdWqNVo7WvD3LL7KwuK4fhrE0csr6pvfVmOB7EN/vxpg2xy5H8Rsddwq\nFK11wYBnTQ7i5kWu0rHqEKRrGKM7liWNc5jZKnzylO7scgT0QWo1c6o+HMia\n6t3kNQyICyEXQP1cvRwnrMbQ9QEO/ooeJUw9NuNCPCQMyzGcd4vvV/mygx5F\nwQ3NKCliEpDYwBYOxQCT7lp85p5AJbC+Lo/b4r8etHhnDf7MUfPEfFiHzUyf\nQUVmPVeA0eGkVZJ1+wbQCWU3an1Ogo64GEh3WGyEMERa6Ogkdx8Av9r0q9BR\ncALg6cK5X7c7O3Dq1E+clPt/gXR2QB1udht5AYZsuzdBuMXVRAnLLz53im8c\n35RhLd88wx8cY3wA0oc6UKQAeKXx2kBgyxviSbDsthkUDS67Ch4MqPsZnq1Z\nzMlu6yxr589fblfYTYfJQ3fC05DbZQdUKQldV0qfedori7nABGU8aTXI1z5N\nlnGvs5mNu7TgBM4GDgrBZsjxpnseUr1yvVQqZEkE96ifPQ7349Rz0APOaRiw\niTQ17Nq9olu7ps5Lbg7TfxIo1NXejth8GGACv78SXGBf7jgkUetz66Y6iHuO\nV5kGU8CanQmD21bdqNj1MnonEHxVkZNiCc+qnIA9Mz6oUVwy+K0/8ONH8Khr\nE1R+\r\n=yb9c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzLgNUCtx12s0LSx2qluBjLJhGicqpNpYqh9b6KZqZxwIgRqwJ2ZYTFAcnCro7HVFdpYd1NiJJkbP6KtPsazM7fiM="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.21-canary.45.436_1569009570701_0.3807520930242829"},"_hasShrinkwrap":false},"1.2.21-canary.45.439":{"name":"storybook-addon-react-docgen","version":"1.2.21-canary.45.439","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"9.2.5","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"db1cbdbe54c749cb4598d28a478575b4bda21cd5","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.21-canary.45.439","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-+AFpnSR9ZN+5wGbFPtdnUQtrhu8LZFnN/9s3386fWiL8QbfRZMd03DIpUZRfwiPvVrtPk9DEDNXob0Tj0xF8Qg==","shasum":"46bd9157308de5ce4415138ccbc6ed9f74bfa736","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.21-canary.45.439.tgz","fileCount":24,"unpackedSize":66300,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdhS/oCRA9TVsSAnZWagAACpUP/AoRx49aJrc3gh8t3Mbz\ndN2+xcno7BgoI8Dkrg8hlkYbtvOA+nYd0vyWjMulJUkCv5jEDr2EvJYUnFce\nK3wyKy9VtNfbG7xK0LMDUFSB8/T6alaI3nm2H206M+eXDJ7/4EGu292+SyWf\nbl8+lSLU0dXk8qjf4PFm91khF12QJ1lmj5ULuxJiR3oF16klls+rmYRKB0Fk\nESldf9mXd2cTNwbaGLAb02hy+XwewE1A2oRnmw8xue1nfC6FrclEQkCTNDNa\nEbvf/ONJZD40egwNmJe9D3LIc5WMgpuszjwQuB9e48YwIgFbAqTmpjxKQEQK\nw0f/S1lRlaHEyhxTii9NVaElZAvNlthvILFqRPHE68fYGOxGY+JfugCgQ6Em\n7ZvalBQDLenW75QZ9XykkSD1KAX05rErT7szBlAdQyUL9SjtG4qPZQS/VaD1\nqhx8Iq4u7yCeibOtPFl9AX0II6K9d5up4fqplqwBZPnlm3LIBda+z/Fjb32k\n8qaznSaVxHrsY15n62aSWJ5e/3UzeqBwWRUoz5mpWceveVFsnIxszmXkJ9zA\n6JbQXa/NBCnncyaVf2B6p3xNimEp8tVQS0U/mqTEFpvs3CwyNcPKnaQdiU9s\nDSilr43U8/BFkj6Y73mXdd40yQFuabwN2CZoKJXhGF4DgBJN220yTDYUWZmw\n1r3d\r\n=SJ/b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnc/v7rpx64uGlwXXwjLWPS9DV4mKzXWGS9ZT6rVczLwIhAPjXf+5dwkAagc3WhwdjbtVREXzCzMehcejoVC58eDjv"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.21-canary.45.439_1569009639811_0.1716476522319974"},"_hasShrinkwrap":false},"1.2.21-canary.49.443":{"name":"storybook-addon-react-docgen","version":"1.2.21-canary.49.443","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"9.2.5","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"27022be09a44a9b8e67ce4755fe928d1cb272a50","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.21-canary.49.443","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-eBpzl/g+zNbH4OOmy/qoMshJOwDoDUyJSAWE3B+ZCRrxMYIwoZCU1LcugVkQZohFBBjZ0foI/uRhMKipgdzRGQ==","shasum":"fcb943ee75ab0235a2ad4698c21ecba7ca5bddb5","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.21-canary.49.443.tgz","fileCount":24,"unpackedSize":66346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdhTBhCRA9TVsSAnZWagAApbwQAJsuYiGiwtUpGkVRnxRT\nXDAbfTVzI6FyG74JIeCMW0kxlvGKlUlGtFsFaMgBeWmm/DcDA6O3u967HUJ2\nq++54cg4KgvG8iWs3JyVK5gC3rVS/s35HS9btW0gy/K3z3wTmY9x4peCy1h+\nrA4YWznrog6wx3vmCcdZRR9alYoqK9tCCmu+PIuMOz1DPAz9k2rU2m6ypbRt\ntIEoh+7soC9osVJGVX/vxz9nLtseMC29QvS/cE8/BjA/nqfrrnPBsgldRwvU\nNwVZuwS+WtxIJIEtwsS9kQVeGlCsIAifs+jT/TDrCem9Mu6G8E8VErQ9eVpI\nzJCHSPLKLAWo5qWzY1nb9cRcaNf6izgPcbn2gFaJj8YQLzntrdlmcMOYjQEX\njLMvZpnOs39XVCEwTC979PtfOS6cD7QnAklj3Yh5XKBmtGeWIopWjjYMg3gV\nNg6PrASt7oAit2ICsV/P5uepFEnfWBWSkVMGoaeJ+jOHzAf/wmqayeWPaNx8\nB4f4e0eHzGFKIkuQwE50g17kkoXzJTWKC66Haik21bPNidEKB0t6GQoQ+9az\nHnkArWViQO9iMCFzeqr4rjxsHQUAw0E9PLJbRD4MBvm8vb+SafddbT+s91LN\nItFK8/6jXMl99nmTwooc/PfSJDk2yt4l1HyczRiwyosgXt8nNckpjaLkW8Y/\nfjO2\r\n=ybMv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvD4JeHxPR0n9O60U8JtTvXrUS57OgBHRHn0eTMJDX0AIgR3svNVuwbIc+cif6XQ9cX3q97+Q7sSouoAJmrAyVk1E="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.21-canary.49.443_1569009761309_0.3561545879448522"},"_hasShrinkwrap":false},"1.2.21":{"name":"storybook-addon-react-docgen","version":"1.2.21","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"9.2.5","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"bf77e405e3c06da818e3abdcc4e6a40c2d2b1952","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.21","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-/JXh1r0U3R4eyn+VQIZky7nkmJwg19yhk/I5bb3UYvrx8fsOUloYbrqH4KrTj/CUohFcM2VPjXGkfB3zPb2X0A==","shasum":"8f6be006429e7b96a2cc820136dcf6fcc19acd3b","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.21.tgz","fileCount":24,"unpackedSize":66695,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdhTFDCRA9TVsSAnZWagAAjk4P/1AbzrlrXrkHr5pvRl53\nGdoEt5DnT2kd0kgVPHiaKb2Zixv9UCf2ESNWe8krMYSXHwezcpkO+fqBpKV8\n9SrbO9D0P5l4Er6K0ulO3bva/MYDSFgW7JvpeE7oul8rc6q73Exbex2Ogv7l\nJSNXQdBVTPLvYqRsJ9qtVzwrvWoeAlm6kRvOorW2Cj1uKdy95jZaBn0xZDJ5\nI+MHH1Oms3I4IkyqsdbYKSC5i1mdefBFsgGifLr2Hyv8WzNn7VvVoPAQDVuR\nMbbsfAWbEdqu2oXh4op4dossc8O2jCko+QkmrjNpKB7dltlafFTSQMYGvWz7\nFafDd5fQv1ALtC53whdGukCDEyYibClVvSeRcjGft9ItXGI6PxEkRlRU4EGT\nZPOCOiBuNvzA4cuNw2rXiCpNmKfOmcTv5tsQyL3ymTnzwyHVcHwmUnnuInJh\noJEd9A5Y2+bWXk1KQ+S5pAqRxSPrOIAfwfZtAzwDcMpwIPQCb5E2AlMREMLi\nCTmCXF90vftdbfa17LnbGnBWMCsVzM3MbyHtnNBAbVqNeoOqQdgkW7NDNH11\nbQMnK0n5/hOIjXXPmTjZeam3wzxAVFKIcLZd1XYrggLJb0AlaA92KQucRyl7\nLNOelnbgDjx6mwF2deWIE1UP8VErsTD2VQtSxHlhk4/2tDjix7W9MOjMetF1\ngSkU\r\n=rTNM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwlL1B1Fe/Fw3GIgNfVf3ZhbQbqbgjS1W2Q4K/jPMdmQIgZwa4VXNrBzCn0gRJqYAfHdwJbm2TQyH2ayDBQhRKgd4="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.21_1569009985791_0.16577222398888947"},"_hasShrinkwrap":false},"1.2.22-canary.50.450":{"name":"storybook-addon-react-docgen","version":"1.2.22-canary.50.450","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"9.3.0","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"b1597b8df2b9a01012919e157de4a86746c45687","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.22-canary.50.450","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-cK9tB2q5tGDzmzA7HTNRj2YUPh7lC1tN2qjTtzPwSkSf5XQP8Wxwm0K3nifQYWvZ8/YLgp2J9CLmn0SWsl0mjA==","shasum":"d42abc60f97f5014601013445a31b701467fd8f0","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.22-canary.50.450.tgz","fileCount":24,"unpackedSize":66709,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdh1A6CRA9TVsSAnZWagAAuyAP/Ak1zH39d5pFXc3/HM4b\nUsHR3PqA22LGr5u3/JO7upvgzOVMArEN8jyvfrgHM67P19cVuhc4xl0pUv1y\n8xuXke+WYGhfnDfeMj18ReRaLb9aqDyAbCf/spBE6ymHIpMbxR4BeRlf/u4i\npW4kKju8CNwJ03otDDNj34CkN6DCkvO3XQUdxuoetP4TRoAZ6Rxx9/aIo/CY\nvBLfKXt+hi7Bg6U7YMiMsjlA6H7yprLH3ZRLvRXz3Nug5G4oAz+FW9ltbxLE\nWW7izclYi3QaY0HAhiKfr0zMUXDkiSaVO4e0LDrOKNht6IKeWsvtN1URfvro\nBeaZLx8aAtQBO/A1c3OQYNLH0Sb9aMytlbCq1EMjTVdzYqlq9z9nDTGdOr8M\ny2M5D4nrUX56eKsVRcVOYUIRBtqnrLWQENvhJbS+Aj7mQ9GwAytx2T9IkwUT\ng1iP5O+K7kI1zb/Bx4z1FiviRG6ZNCHyjBE/kzeTGCJVD6+4sxwgri56d2fl\n7xKR9JyIDK+LGzfFiZkPdT6yXefRuGII5NQ6EDNOLi/spaxDxL+DPFF2cCMs\nvkFKUrd/udqxxwFR797UbRZJGDcppbFZYdHsh5S07vkCMLqL8EaM7OeoJbFp\nm6ylmgs1DxDti7Ddg71N4LmFtGVYP7xVLhjJDTTDDbzKHgZUiFqgRILLYYcX\n+6fT\r\n=WRyj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEJ76zMfTo5pLFP9eVRQHV7T6dEIBtgee1oWR0AUh60VAiAm/XJHXxHezV7eLhMKYAGly3dggFxBiqqXW2+DQfi4Eg=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.22-canary.50.450_1569148986309_0.48944268596497986"},"_hasShrinkwrap":false},"1.2.22-canary.51.463":{"name":"storybook-addon-react-docgen","version":"1.2.22-canary.51.463","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"4.1.18","@storybook/components":"4.1.18","@storybook/core-events":"4.1.18","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"^2.0.1","husky":"3.0.5","lint-staged":"9.2.5","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.24.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"3007278889c49afff9957231ba0b32394a300461","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.22-canary.51.463","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-l4Mt7gkuwKyIJoFZTx61QrfqYa4AzTdS0pI7aDzI6U8/7nSiI8ih90uRbXF1Bq3kyBML9xPD+nCTB6DJitsnAA==","shasum":"320a381e4a05820dd736b1af96bc61990c232bf9","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.22-canary.51.463.tgz","fileCount":24,"unpackedSize":65941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdiPc7CRA9TVsSAnZWagAAL5oP/2xWt9N/OL1BLX25vKnU\nv92yfkS189yY/rf89NGPsdGUwFshuIjBhWKItGj46okoOEHPVVT8v/Or7Bmg\nw5c/MBMF7KlJBbJI2DIVEf7lQ3rB0WYufoX1Dbv9ahuiPohSoWqlebx1RXNP\nwj2aHrgsUsJaE6nZ2Gp5OuGeGqiMLoFYo6/LrTrLnSDtKfVamwNjo3VdFeN+\nV24opKrg4v/O32/2La0KFnYR1IFU3mj1qOaqmweBK0ikE9hUhqBY5JpYM54t\nrqOctRzfb0SUPx8WV66zvLq4R1z33ViwNGktFO8r9xbTurGE0MTvlt12bQ3c\nn8/rSE4vG98nKWEBBT7QVAb47lhbBfkGkVM5gL1tnJqBD0bEGhNOFRY8g9re\nYKjgdRTJiAWuAyINHvJYbjgUh1DANvJN8Kyp60xl5cinKfJ/x7YvsW9jEjVM\nyd0/mUWoS6JOvZNQ46GqyqajZyyItX5ThW+r0fmzYp9xTEMQy9LcAmI9xeFJ\nM00moZgrzANxqnMv+69JH3e0FVO4Fd/uwACl6PcOXmQH5TM5sAoAlNVjVct/\nPCEmJSoXS5Nq5kSQJLRK/G7WcTBChWkxjiFvP7iLeMASUGqIZuoEN3T0zpUG\nEiJkMu0WRd2z0OvL+F71Nbmr0X+5PjWyIiCYpVYmGlXqcMExNSPDqPwqyTd6\n1wLM\r\n=jJIY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCuzLJezt5tYU8rLELHkGO36P93goPROwf3uUcMpbMaJgIhAJAmrkHZsrycK8W7O344SmKGTcspxnLPwmkx1Sozh0Hi"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.22-canary.51.463_1569257275048_0.35102578175058063"},"_hasShrinkwrap":false},"1.2.22-canary.51.466":{"name":"storybook-addon-react-docgen","version":"1.2.22-canary.51.466","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"^2.0.1","husky":"3.0.5","lint-staged":"9.3.0","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.24.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"8f48d77f764622884c552481b47c64b7e56ca412","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.22-canary.51.466","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-pko+hEUkBuNgZEzpdF/e0Fuzq3iNn/jtP2kWqFJsQyzBhIR7FXooq5LfQ8xTuodi40lVhaKYJh6+1lLOZzojag==","shasum":"f4b7d6a1661358c2025c45de01ab5722009c5b13","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.22-canary.51.466.tgz","fileCount":24,"unpackedSize":65938,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdiPe4CRA9TVsSAnZWagAAMCwP/A1mZ305rTmSZvrqlxRZ\nZZSfd6AGwYCX8lwAYL4QsQdYaU5w0ot1lDA8XpZxXnWhYuH5ldKwjx5PZb0H\nHEeLsfj8Mv1rGd44Uhii7/1pgUDxCBKrN3uZwtQNBeheOEajubDug+gC8OAS\ndw1oM3r+GFA0tSA2RzEXASW6LOx9VXVZdl81DxYXo/GcCgDG50Ax1GTPJYAf\nkzUcn4gz04n6JVZH//geKScPn1D5J86sPTLpk40X22wWw90504xjIV5VZ9JP\n/dvUfzbNHkOHvxs0lcfbIY7G7FZh9GoTGMA3VzaTYcpRRE6OUOgljCrlvYfo\n9GcJmRv7aMB/T/q/n3ycWkcLRqPeY6S1KQwq1gIx+NFwoMPi9fsRcW8Ppocm\nHhob9fQUbf73FowyWs4Y+zsp+EybgjIdgjdGfm4rYnxvnt/Szmxt/s7bh5/o\ncsk1ew4sqzGdDZhHUcFmxwS7VxX1HapAd2BOxeJGYyvv+Kt7rrCFlRT6nuSX\n7qOuhA0fjbu/ia0u3So05Fd9ueS3bqr7jbElfdQyRxV53xjVCma6M2VWu/TO\nIla/BYAA4HaG3UWXJtHDulveyWHnhJqWxNVamuvtUE5Nxeu5tt36F2YWqEEz\ntt7mGwF97aGmseFpmsT8gZv4LNyaqOA/D/j2DVf52nag+nhAWtTJtooBnFfM\nBNBB\r\n=jGX7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKICkEKhoKkA3NtUxuuTs5uis2Y6BC5MbqKbcSrwqUmgIgOHwg0hzOfv1+RB3yX+fe+P765fG+0xNDDcRx6WAs8q8="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.22-canary.51.466_1569257399234_0.7775667822952397"},"_hasShrinkwrap":false},"1.2.22-canary.52.469":{"name":"storybook-addon-react-docgen","version":"1.2.22-canary.52.469","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"9.3.0","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"c8aa5394df5c1115cb099170a1f2823ad09245c5","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.22-canary.52.469","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-a1kPzZUaKWm/Be3NvlQpyx9qfvvv/1QZfX9NfkTBnK00PO2WpOPIBo+kPLqbuLTybAPZ/95ZHFd1ook8ICpNDA==","shasum":"d795cda481c9d8df154c7bc38724f04274e1d219","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.22-canary.52.469.tgz","fileCount":24,"unpackedSize":66706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdiTpuCRA9TVsSAnZWagAASXIP/3q3RcyF5QCnhxrlqMh0\nc20JPGLxcnJUUAuG0Nrfzvh1oXbv1w/+4/hk8Rh1EAgwAXQD/vnzbUrXRGWO\nZvTxBKOQCzD2M2/Mgy3CqE5q0r9DZt15bRpaPGwtPEkwHikgwXRtz5U3dpO9\n8AKJ783csPATaBRSF+doZGbdwh/nUuSEeyi5o/nxmH4Rz4M1UZhBCfVDpFkD\nkHzJAm/uGzIPUfVr0TK1fx7sfudMZjZ8iLvxa8bL+VBwZ5TEXwzknHoFr8IK\nvw17+Wog0mLWnPLN7PG5N8DlDh/KEMd02HI1FMfuzmYfx/Y5LOPuwT6RGYJN\nXLjibgVpNyIOReX6/uve26ReAZbmknbjfK2ywYyKDP/W6cHJwtL7Mf7calXE\nz7wusb2hV9pqxOUwAMM84oIMFUj4jTTp3w6oZNxz9+uMA0MJNL1ZGQO7/Be0\n5kLUd1Dd0pJLvuXnr+7j9rH5fU2CIKnF1HNOvCmgKULB5oN1pRWnpjfLCwAZ\nkm4iX2MZ3snkq08bpK5+C7zSkO1fDPGjoWga0YVz5L1egyi4ZhoC77a1cYV1\nXl9axJhwt9rNC86UXzuop/k7CaUAa5je9e78/OcOryuE1NKYYo6TSnvuQtJQ\nihK9KPFsg5AiKFjNvvAeRD2VOMLqb7nfBi5schbt4H3kmKP8hUl4LtxLiW+d\nyApL\r\n=9X+g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuv/zXVw4yobqfd0GFozmXPEVdH3oolueEgwQKsxFT5wIgQ1KfXZ4Np3IgsfhmRc3XYBWq7wej946fAmJMs4MbUFQ="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.22-canary.52.469_1569274477900_0.7145283847562831"},"_hasShrinkwrap":false},"1.2.22-canary.54.480":{"name":"storybook-addon-react-docgen","version":"1.2.22-canary.54.480","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"9.4.0","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"4c874e71ea0a584f6101e36482776d8ac7181378","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.22-canary.54.480","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-TZSPcfOOXAjwedSEBYcvMganWzW5wgdhQdRAiIOuPZyAmX63HmY+U2fqghCTSumVQ4aezB9lKQaiBYRKrupvmg==","shasum":"f59ced87e6ba158b57c1f11137e131eaaf467cdd","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.22-canary.54.480.tgz","fileCount":24,"unpackedSize":66706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjJghCRA9TVsSAnZWagAA0twQAJATpsMxPv4EqVnw0o0m\nnQtnDELrb+CzcdjKwrgwYi8FIQHCFXQVdpKKImdGAzFUemgnL3OyAnudSYSD\nElETO6Nwdtlno9WlQ7yY6zoFIPiz7bAat2yWl54L0hpk6DL3ANghm9oayu88\nElJGMNaURbsXghCrbmap3hTz9nfi3ubpsG1cVbFajO0uWndJ9+Xlbihs3H4v\nWyLliNRnon1nwz8yIWDvrCKzGEvVdbc6lRA1d8GKln4TLWkglmVs2u3WiDTp\nn/Sb5g0hArrdpXisF/sNUb5z32hvVZyi30Qj6SracpcaLA8VS4fwL8nukwDM\no4yUkLn1E8PPEV9ghhPfagGGNq6Madg8Fr9AETdtm9EBBPO6SGbaezS4Xjj4\n3Pcpd7h0iMybmE1vS7454V5ZPOH2ZQ9rhsZHeGHWniYrM7kquxH0HfjNfgF6\n5RxBQrWo3W06MClxDfxCX+QtDqS2gduwbzbIJQK1JeTdGreYq5BFGcGdfnph\nEj+EbKKAZ3az4Kp/guuWkEsjbBLoI0mf5JJmPoKy6Z7TfeIOEukvajIDC24f\n0EyZm6Gxh74V0PWTuls7Td3U7TbquxrRLxDTzjlk5oIln+y52rHADXCEE5D3\nLgWLS7zCSLBeq2quJT0irp193FKffGNZy+NZdPhWo6YnXVNkNwJF9wgZHRO8\n5HxL\r\n=z6OY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJPrVrkWv+7Q0M4YVPb0H1OIqed8T00uEyNbdthj6jAwIgZNVaDWzU1NtjEAyxsaHpa1Z++bP2Wdz2S75lk1H3MaY="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.22-canary.54.480_1569495072519_0.17508390706691523"},"_hasShrinkwrap":false},"1.2.22-canary.55.483":{"name":"storybook-addon-react-docgen","version":"1.2.22-canary.55.483","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"9.3.0","prettier":"1.18.2","react":"16.10.0","react-dom":"16.10.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"c6609ee5b4a13c0864b6cdf89483257a595a008e","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.22-canary.55.483","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-hT6DRQ4WQqwznPuxH87Jyqh1BwNk56Po7FAUA2XWpLqIqfjrAGm/Ct7XFPkByaNV9qD9lM1m8HbS6ygz3L65tg==","shasum":"1a21ec02308a86794c9a1eced8ad8d2d4a0319ce","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.22-canary.55.483.tgz","fileCount":24,"unpackedSize":66708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjneWCRA9TVsSAnZWagAAUc4P/1sBa+Mibu40YqD0arwb\nDOn6lK1vZqLNXQs+7f9tl4fssKzr8K/TsqAhpjt6UT0RDEwroJb+/+9gBYgD\nBJk/8ZyaD6rXKajm2Pj01ZWpC6nMwChqqJJ1sNZA6YghtTGOX2dz6QoqrW7D\nzvVy4CMbjK9GWuqGohSxgjIBymj6ROxSVBLuP2t1nN27wJkjnBw71UcwP/nS\nHHQlChKA7Y3QMTFQss0DsqiC8bbGUABF3IWlKAupIdQwTDsBy5tv4v9jJ+Gg\nGHcjjSgtxSKNU0Zxga8k4+Ta640YQHmRSGWogBoAtvglJc4OzQZ8AptXMHUK\nuD9Zpyc0wXozc4M4bSGwFbyS4tLaP2+HP8qwVidyVmIWe/0a3ZQp7w9HN5Qo\ni1LjGfToXb8FiNC9/RTgQqzmTMBu+8v+W+VqoaYW1hanibEg8bXUPlNxGLmw\nJ33WcRb+MaepTRRKvpwoY+M3xEYO0FhUv1EptJDc4o/6uQApk4k7kYFtTkrK\noM4zQTT4VxnUiSNxcZR53rsQYI+m0TL4i8lnzUiluE0GXfCc0Ba02PHSQv0A\nAbtsz0NMLZ0w7ZrEDJBscVJEdGXgmYULYCYC5Fw1DXX7MSKxZXravJivxXdW\n7fV38pmDUfNdLQfMYccwcCoylHaSgfEjSODqNy1K67PyidqCd8Buk5L7N9Rf\nLgdR\r\n=GVy2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfGV0LLx32EjgjAp8EwlmgKpmZXbO7V+D7MxCZkq/x9gIhAJ0EaOaQ/mlD3SuxAXVWDTfX/ijASLXD/1/nqRpJHMDK"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.22-canary.55.483_1569617813715_0.05204309889265857"},"_hasShrinkwrap":false},"1.2.22-canary.56.486":{"name":"storybook-addon-react-docgen","version":"1.2.22-canary.56.486","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.6","lint-staged":"9.3.0","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"2d65228436b3dd80a3997330aee747e9fa6386d6","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.22-canary.56.486","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-cg/nQw6g5JJH71v/w2JVxtMGeEhPDJxJU4PX8hKXZ/Xi3O1V7EvveqbhvJqUHxfCScDR5U+Q2JrThv7RABR9xQ==","shasum":"e5bf33f005a0a6c5df41f633737beaae102f8587","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.22-canary.56.486.tgz","fileCount":24,"unpackedSize":66706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjraPCRA9TVsSAnZWagAA6s0P/A30bS6aJz0raKzcXjD1\nXTxE00PSjPKrXYg61pkzgK1X40B9jpE6hGLJrhLxvOaSGN+LlWJTSuukan7c\nVBbTKTvjK/I0Vu1iVQ59o5HWbtjyY9fVEy+muI4myrDfjLON5nSLs5nmvp+k\nVevH5HT63ilvV91ezNs1yKEU6Zq29gmWfqNs54qABUAO8aUwWbh2yl2TXIEw\njjPom9YA3iRR+KFrHoGMcX/4f1DlT7YJPGLm30N1WvL3lj2PDY3K2aU6vpjs\n+MJ0D4ta0btq40k22nerHj5PKEFE34n9VnHcKPuw7XlDD1uoNlA+ZY7xe22O\n72Tuh1GkzIUDKizsI4nLHyuDxQfrb6C1UxyRsMa8o2IwgVSJx5hJovfu7s5o\n8l54aVrwFATlvZFzxwdeRjmmN6SAidpNtxSkhhG/tTQ8LJmlIPUhnMvhKG4q\neUWPCfk6duRzh/yv5llyvWxI8IsTlmh05JPuBP4nYjU+Y6+Ay5lnD3m6pdpd\n8uSgl6Z5NkJAD8WrTNEptsmmzrJohzuSsSCXqHG14Kk+NFnfqR7x7x/hCTg1\nSmgmb/XeMW8L3y/kXTz6RmNYYqEffp0RVnI2GZLeRnZd77Hj1KroH9SESoej\n13Lhe/gqY2YArc/gpNTL23v74BDQRy/CwCWEt5SnADG1Ne10Bk8GrLSPG0zz\nb7yt\r\n=Li5V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBOq9cNyFflLIwKvhUgRMJDIhsTjQzWW6VU4+dYSv7ACAiEAqa/Hrc2aYfd0DdfGE1dpRNNuR9whjHcMEC1lVnHe6gM="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.22-canary.56.486_1569633934139_0.6456632445345623"},"_hasShrinkwrap":false},"1.2.22-canary.56.489":{"name":"storybook-addon-react-docgen","version":"1.2.22-canary.56.489","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.7","lint-staged":"9.3.0","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"d532249b3e30e0023634eac4bff682d0b80f5e85","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.22-canary.56.489","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-W7OUbdE/GxNONW4DYIsHx1kDbbC2Tf7rfqm51W4p3iIJxGKLD16foQfTDhznlnXfo5ROiXLyupgmJ/K1AiedJA==","shasum":"d657d6561b5ba91e34c00ee5eebc0debe15dde29","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.22-canary.56.489.tgz","fileCount":24,"unpackedSize":66706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjsG6CRA9TVsSAnZWagAAqZ0P/0VBzhdpZZnA1j2C5uY1\nrA9w65EWg/MeZ1cSgT5BoXcCJ0VS8nUZ6M6vp1uioFKdCdP/xC8zAARwf0bW\n5mzH7hYdLTS7qRoRiq6KxOGsIfIn2up2NC++tyZdfglB/JHBggXzgQxhN+yl\np91IUQ0XZ+bVAPtO42UGVvc046KEy335o74oy0wpH3tF1m/Evdd4Vhvb0VtG\nyShj1YQocvtHH/O35htr7tpl9eiM40E0TZE4NdI80vS7+AEVnwwdjgif7cE0\nw9piMocrm7363aqvvjz9EwHyTKxv9ifJYffVZCMil6FU7s+CZjYaxfjsFjgo\n+lHkjZ+G0CUBO1KcMUPb8DDrNIe034diPBpTKMdO+YtPXaYgm149CPZH2OZZ\nudNutXu0d1qfGAWJzNi459AjXIYlboX2M4RlmHF1KLmsZ73TsiYydpTNTqEc\nJy+3kBoNn2MxqBZiXXBx829kWOb62kwDmZO1HmS3SGR09eZooboH7VXk9X/u\nad5Z88gfTDKcWzh+epLDEIPQSkgIaOySZA9jP+h/95K0EmwNvnhbcgnV1CeU\nkVcdSYM/ySMGLnntwtxV+xvColOfuEYqFsSwJ/0olr269wKgIfX97XQH/DPq\npwTQyjMziunRF5mO2EKRxeygd4b/uDIOhCFUSP/6kO35uaeiDowBl15TVFf7\nULWQ\r\n=CyYl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFZVUa8bBSDZzqQ5sows8l8km+HbPVK1uhyoXxjmSaRjAiEAr60LQvFfinzUE2A9Zf7GICMuYzemShv3IC7fiSS88/8="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.22-canary.56.489_1569636794045_0.24196660553688765"},"_hasShrinkwrap":false},"1.2.22-canary.55.492":{"name":"storybook-addon-react-docgen","version":"1.2.22-canary.55.492","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.4.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"9.3.0","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"e6bc42c34bd5450058dc4bda8a38b264281fff03","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.22-canary.55.492","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-0F8WE+TQYU5dMEOw3R4nI8v/dD4eQ4aHPy38AixLrVesBakWtScQZOs9CEcxxlcCPaLwrKwLtD7n5TPSXosZ8g==","shasum":"563f833733f61a218b740ecb205aee807d15e791","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.22-canary.55.492.tgz","fileCount":24,"unpackedSize":66708,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdj6w1CRA9TVsSAnZWagAAxaUP/iEX6eEw9oTOn+sBWZZi\nDuPF76LtcZK5K/Nggn8KMG5S99kqaCL0N2lhKzIuREQ5rJFqf9LOre1WJ5xK\n41tQHFplwAJP9pDngHGrHfk1EhXFSOMdUxrs679101VPKSyzhLCtOQ366B18\nPxE0eHZrWDP1BB4uafnQrsnmK4MekQjLVOwLu17boWVDYkRvGgnkyEgiinmF\nVWEY7xMJiU8jODFUxHiEIhCzqKaBD34sdb5Ep1nkmnqFiOt9neIycdKnvFW0\njjDHCs4Em8jevX6JFzLLNC7FP0X/C/a8kO+1mxUDRjpatbahO5f86eJdmD4I\nxJfoG94znNdbwXVi0sOF0B+tuHacyw+BLAi3YGVIUMDV3THTYdPIlX/avNxY\niMc7spMUSRM2RIAj3eoL7h5e1CBcH3qTB8Mg0sTfgGYBQ6VB2goz69rISasP\nLacXOnkgFQVU9amV0g9QinxYws5zkip/JMZ3x6zHu/m7sFaLCHHkG35OkQ6m\nvjUgmIFFJv5Dsd1jL1yWwoAxn+0mqkP7dP9qRlDHMseVhiFIuZcCqG3hda5b\n5stfy1Aqq6xcGviHBbEJOaCjPJge6pmRABsiT2k/X0zmdasXUhFQtIgA9Ci5\nUhMCEn5ikBb0voh48wHFBA5KKDUG9qDyJy8THgKqFO9p8wiWkMyqpNqehqNT\nU2+7\r\n=Lyzh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXBmUURh0x7t0wP/jTHEdo7vNnSYfScAH32NzvdAR64wIhAN6AGRb/6jgp2Rii1nknjagTAraSllmqBoHrHlOGSgY1"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.22-canary.55.492_1569696820515_0.9646607502868096"},"_hasShrinkwrap":false},"1.2.22-canary.57.495":{"name":"storybook-addon-react-docgen","version":"1.2.22-canary.57.495","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.0","@babel/core":"7.6.0","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.0","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"9.3.0","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"759586c5bad2ee08026fc83d233076f861a92121","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.22-canary.57.495","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-LrLH20jUR2mj+yFj+JYVnlfoZ+TV+ZY4K2Isj6k8+/IEvzfmeIDukf3CrK5kXHQQMzJp7waBypw9tyH/dgikLA==","shasum":"46921343a718f9dfb46773bd018e02fcc3a1147d","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.22-canary.57.495.tgz","fileCount":24,"unpackedSize":66706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkEUJCRA9TVsSAnZWagAAETsP/3WiHpRgMz7RCaC/dXoA\ntaGWQsT6rADRHGdQdibHwViJSET4Qe3tpRpvWypYojHrr4f6nZc4oDuEdecP\nKxUXLbUUsvnTUL1a4OLmrBaFAzq+zhFhgGVrPacwlaZHYZMk8Q/foVIVZNuA\niAfYCxb5ZYsOjvuLTzCsGlTPA4IgGGzBwt1dUaJKbzc03dcR85wSWAMmO9sA\nXTXsXSqA7nlWWYEbABgT6djHzOk1Wv8Fg+1sck66LCRLu8tLMLnOk41/yak6\n2gVRHkuBZv7Yt3q5gS/HeVpxM4B0V4mXEgrVOORxk6IpCm1gxdWseBr6RDYX\nLvgBjYAKz7o2qv+DHns/MnvCzCSgAmtdmC6u3utzCiL+RIBt489BeLINFJEt\nhV6q/YcByKdVtwZeZ9XQJViXTyE0NzLyRreSeBNXzdg8gvlpzvSlleJwdWmt\n1zUHkWR1/DBEFZNBso67ZUDwTKaNar8Dw6z/ot9E4fA95qmSKWVtnMKk8qNH\namrcX0HZJVZiryKTfV+rPdyvUd+LUZh1nCBeiEWpcwtq/0xLwVXKozWIZ3gh\nQqqFZjbtH/ngyJB0W5VdM3xFXRSKCPSVJ7qzb1LrLS8VMg4G72bHfvuVVB8C\n1LwFiks7ty9ltCfgZ6QteVqCf7f/cAYBt+KnYkvyNDFDy7WfWqA6uApmli1i\ngXQx\r\n=1XRK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHUpJVHrTDFNQg3jBL8K4/N4JUmIOsNmfLQ8lwSmn0PqAiEApMG28nxzurt6jAE0dppNyjUEGFagKB+5DBm0CZIRnuM="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.22-canary.57.495_1569735943145_0.10616263225951639"},"_hasShrinkwrap":false},"1.2.22-canary.58.511":{"name":"storybook-addon-react-docgen","version":"1.2.22-canary.58.511","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"9.3.0","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"d7f359a4c5b4bf5b4b889edf925ada33e212186e","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.22-canary.58.511","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-EthwcVv5ePVM+7GE4pbWRdSeT6aW//ODZGJEnjzmbwy18Y6/M/+ZbIvMQ8qIOcq2RmJmtUuKlDv//mQ+rVAiug==","shasum":"626a7ae25e7f40b5a643ef0498c15ea1b9e2e87c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.22-canary.58.511.tgz","fileCount":24,"unpackedSize":66706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkjibCRA9TVsSAnZWagAAw94QAIZRfH77u+iG+UGVE05f\n8J2MWV0Kwm9PtzsL6eqWyTCLLvT7yqG2EOgcS9HLA1ipQk+lFlB13xxPSKkS\nXhLtmh08ONyrqb3Eh5MRLjqgP+HfzmwUlXy56h+ceAQgCIvPQ0Nbq8Cav/cx\njqtPdxKScQ/Qf8dlcjwfnPPnwx7fnOCEyUzsbY6csiMBEC4uFp+ZE4iomfSg\nXFvBXl+QgkIfAw+DJZVtK1VwNMrZszIZhj9yaBIpj6s38W74iDzu2p3jzTr/\nuMnf30hDKsiPFw5OYyu1hVXaz1S718kS09NnOnqQapk2+d6UlB0imxTrM4ie\nZvrIUmcV7TILglBqNmdBbtOmN8+Hvodzbtmf42DVRgW8DCB/W81nwYsUSS23\nHiab1a32UwKsNAaMogM9J2wYBr+qNbHCle0GbEhSENeC8JruM0skCy2iqdqc\nwYaXFRovwVIP8PH+dyuQbiuJaxhKLn0KWDql/Mtb/sW67ljex0fwVcDntiuP\nzIuKmOfEGo4dUmpkDNxet3t6KZs516wxVR3K48n5M3SH7qkbG8Y5LR85Q/uu\nHrHW4OAgtz/LYa5PA+HpM6xT9ivB4ob0VXE3Ky+cnnwxT88zTSAlTA+laZZV\nT19ld463Kxz8Ro3AcmUILswzHtsMQqURlGZ+NLsEuuZNX8lOzEn/WgHJI1fF\nwuEB\r\n=cOid\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLdhted7NMq0f5ZP8rWo0ErIgYSEtTHpbCxFR255TIqwIhAIEwYFeamhK5vnMJbggTUlo77YO1rh0tzk7WzugKGnKL"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.22-canary.58.511_1569863835044_0.733159647375778"},"_hasShrinkwrap":false},"1.2.22":{"name":"storybook-addon-react-docgen","version":"1.2.22","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"9.4.0","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"be6dd673e0089b4beecf2eb5de642935a7ad081e","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.22","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-c9boTba4fxkmBp9v2m/18j5NbW5R6fFBAVlMSHB4m0fPutlzkXn2l0LqsJ0SI4QW53UKUiRvFhZwawFfeTQpEA==","shasum":"13c0962467005e88798399088b4312fb63eae5c6","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.22.tgz","fileCount":24,"unpackedSize":67518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkjkjCRA9TVsSAnZWagAAzMAQAIQg/0WtyGsMo1qk/afv\nxB6szxUKSYOOZKFVrCn2OvBAhQqRawbhooYqtC53ClgUU9GH+na+JlcbqtGm\n8IK16N/CwZWRp1Yfih0bANBBSti1yO9tMBZ2Rpq/Ey6M4w+hr0D5EekA4Lbj\nOpcTMjsfnd1UVwOG4M/eu7KFjzeR9/iY6XT402smiKZJjnjCPxQwHIfI8FMS\n7U2FZQXX2NLcbim+TaTomWlQh47zQiLuUWK+ekW42hbnt5hTmw2AmAsb9N43\nXXNTuEPUGXqVY7MA0FPrbPRhDmfxZYrUyJNuJJ2nTyf81ythR5tjYiv+omQ7\n98rA4SQYbW0gGb+nFERSF825nagGmxz2ASGQHQ+sz/JLD4ZbFEIebXQWhfGP\nMxZRfAvb16riw9xvwIICplE0H5WGEsSRh9qIykDG6rawiiXX2Jhu2pSG7SPf\n9Bf27J0KWftJbU+6PB5AG8rsWUvGIn37Sl3CDMwwQ2bJOE1SJsuMEYZIYFs1\nBCvWrieoV59NzICYUV7pthkGFKoODoPCOgpI8Jqp2y6+hwZjImmICNdbupqu\nHR23xyj3jERsXulhDxdO4ybWWWx3pYEjR0YiQgWe3kI22LNPgMm+M+IPeYWH\nhqN+WJEWcE4uKU4GHs+T3gjU53FbbRokxizZb49MB0Qsku5iOgFEfMUcVhtN\n5aAN\r\n=AuVZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNqiF9Dke7BIf/LGbUT5IX+KuBppv8qn82bOecP4nj/wIhAM4H+cUXoS8fQSBI9Hj2fEU/+ZtAL+KNTEXH5HGbw1UT"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.22_1569863970657_0.8712302474042777"},"_hasShrinkwrap":false},"1.2.23":{"name":"storybook-addon-react-docgen","version":"1.2.23","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"9.4.0","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"b0d18be021240a28f5ac588dbd335a659e2501d4","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.23","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-Ubk4DyMasI+hYZe/IXOAdsXjd22fBXzXflio4RTT9jmToelwFqzX4gH08wCp/W08rpTmZAYZP2UhmFiWcXCi0A==","shasum":"0f23b52b8f10dfee056b9946891d256c36943cd9","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.23.tgz","fileCount":24,"unpackedSize":67516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkjksCRA9TVsSAnZWagAAGbIP/1s3XXT647Ys4nE5S9fy\nQj0QkEedEVGNYNukvukO7vnpwN7hzvEi9UOsPiD/Sw4QgSmeJ36aaMbB1mtM\nm5WqWwU2Cdyrb+qto0HdhkXHTOBzwEDGCr+UehWQOBwogTuNdCvkPltG/SBi\ntzPzUHkQ3lt91S6i//S4a2PfjsFntKPTPA0YvPP7SvmUyR8jhfaYPFIdzjk3\nhoEWiNBbu3tQRaqM/f0EoAgCK1zSVlbALNt08gyi4nPHlTU+ntmShaPRjh+S\nirxg245GmYhdH8Ak637vaeKEgglpo4pWpTF0MYVt6tzcCQzl3nZLxA4K8T2Z\nymOoNg4V5GCV96vmiGtfDJFkJj3Gan3QACHAaWFacggZ/BNe+tA9Y3l0RGu1\nhZfKJyDDkMPxuyk+0kJz33QLBSsZSDZDQDdYe8MmWix380F6dUC/cDflRTuT\nnBBiX89k8+JKH5SnJzv2RI69XrSpmV7TZPEq0u301NtsNoZUjTHZn345Dds4\nPOjldaPQUMknjpHtoiZmcxQCCjfSu0KT76bDZpWW2mm8LGjIZo76ZYaq81ff\nQqZzYtyWYSmRn9wC9ZnlRl9r04ESkBHJLL4UCkQZTUK2+UyqmwRPlcJ5mxS2\nVRiPRkHL7hjS5jE+iHur1dLbS9yq4f7KebgSOoe//CrUtZ5Ihb8hrTlAieUv\nToF4\r\n=1kRp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmnbLYBOSILmjgVbeV2pGkjRENil5puStmLqqKSsUVxgIhAKzvTTIIq1c5c5RRt98GnV+RzwxweKH0jPiQ3tlsvTEf"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.23_1569863979970_0.5502103425160592"},"_hasShrinkwrap":false},"1.2.24-canary.56.518":{"name":"storybook-addon-react-docgen","version":"1.2.24-canary.56.518","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.0","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.7","lint-staged":"9.4.0","prettier":"1.18.2","react":"16.9.0","react-dom":"16.9.0","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`\n\n```sh\nyarn add react-docgen-typescript-loader\n```\n\nNow add it to your webpack configuration.\n\nThe following is the configuration for a typescript project built using babel. If using just typescript to compile all you need to do is add the `react-docgen-typescript-loader` loader.\n\n```js\nconst path = require('path');\nconst TSDocgenPlugin = require('react-docgen-typescript-loader');\n\nmodule.exports = (baseConfig, env, config) => {\n  // Find Babel Loader\n  const babelRules = config.module.rules.filter(rule => {\n    let isBabelLoader = false;\n\n    if (rule.loader && rule.loader.includes('babel-loader')) {\n      isBabelLoader = true;\n    }\n\n    if (rule.use) {\n      rule.use.forEach(use => {\n        if (typeof use === 'string' && use.includes('babel-loader')) {\n          isBabelLoader = true;\n        } else if (\n          typeof use === 'object' &&\n          use.loader &&\n          use.loader.includes('babel-loader')\n        ) {\n          isBabelLoader = true;\n        }\n      });\n    }\n\n    return isBabelLoader;\n  });\n\n  // Add Typescript to Babel Loader Test\n  // Add react-docgen-typescript-loader to rule\n  babelRules.forEach(rule => {\n    rule.test = /\\.(jsx|js|ts|tsx)$/;\n    rule.use.push({\n      loader: require.resolve('react-docgen-typescript-loader')\n    });\n    // Remove babel docgen plugin (avoid duplicates)\n    rule.use[0].options.plugins = rule.use[0].options.plugins.slice(0, 3);\n  });\n\n  config.resolve.extensions.push('.ts', '.tsx', '.json');\n\n  return config;\n};\n```\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"5c708f64ba7c733b6ef21a859cc324f95ee4e5ff","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.24-canary.56.518","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-csz4KyriAAhlpySlI5J8Urx5NiQ8dCRzlMaGbM5jxve1vIGD4trF759iAbtRBBFMsMpn+k5c163Vxe1ZWjUWZA==","shasum":"04f205b326e30afbe1da9a121996164043cafca4","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.24-canary.56.518.tgz","fileCount":24,"unpackedSize":66706,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkjmmCRA9TVsSAnZWagAAlmkP/30QJ30DQQVh39Empwr9\nXQnwPqQtmFizkKK3AXY2BDi2g6Wy1OWgCrAouVeo9tTKDUGzDsIYAu0EXl0x\n7WlzZWcFWyLl7JM7WVGI3QOPwBguM1zcCfJn2EZe+og+UG9uGG+6LeALTSwO\nEml63ew1BFL6qqgdg6lcBDodcXWEhXn2vXxKZQXVyVYdX8AtWdQ8doJeNa1S\n2uaiKofuoY46DVlL0HwxKEHexD/H/YBZ9x+pUXrv0Hha/8i7gF8wtHOBifIK\nN3LKdlr5JYOV/6QIcqorgXXSIc1YZl3rbX/oxi8hpuY3jtNXwu5/5kg6LpwJ\nnCb7k3jDrlaLVYY25L1lq395gdCzqlIe14GKBk3ynNQINCe/SN93XeRRyaqu\nuW2+fUbEslUC2FHmDfYv5lRMSrpbNfxL6Bw3Eh4/+w4J7E/m5MDm6u8GdT8v\nEdDnBrJ9O/EEaaNLLCQeO7MI4L5c9gNzC3uu0cuiMBhB1hWy178Pf+H+HSzL\nmJ45F6sUNYBzmgtJ5vzlQ+C0iUdwtnCE1TP5lrQg6BWJT6HpwRobuPaIyvPS\nnVVJY0YU81l5SKnjbn+/4S6+NimzEjNVrqWVsH7/jsbC1eg8hVzGxJDl5fXG\nQqHAGX971BS/K9brDB+4SFWAZBz34OFcTVpgYLy6O7capZZTvMR9PLjRjxZk\nzZ3L\r\n=Ndzo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeXxCbjdGZKnwivXlcStuEm+Km9qNNbYBHxyYXVQbvTwIhAM3a6FxQRG2toHLGUn3u8ebfCXqB+IZIgNUx+2xe+mEf"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.24-canary.56.518_1569864102084_0.7334683080449895"},"_hasShrinkwrap":false},"1.2.24":{"name":"storybook-addon-react-docgen","version":"1.2.24","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.5","lint-staged":"9.4.0","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"bcaae82c55d4fa9f70c3d055b1af41d7ee41cd1b","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.24","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-ZahuTc74w5ZhDBkEW8DQINGzkAkicTQzOeVKp6YSjgTN+bympic8588WxweyqfrPXyQP10ikN+iYdLjpiKxglw==","shasum":"b007b5ed0bf5dce5df31b21733abf3f875c01975","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.24.tgz","fileCount":24,"unpackedSize":67518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkjnyCRA9TVsSAnZWagAAMQcQAIo0VkpwPFn7Exx4czC3\nXcLO4jWeYK5SOFd+2VCt3N7i7x6pyLJTmDA+MjeqP8I/2IvP8IsdK9tv3Gm+\nyBPFNGeQLiaBLzSuMKgWIG5grdj3kvqCfWJHQFrIOyjR/DH7Ns8tq0us9CnW\nbtxUduO3jTaPSD2wVdBTymvekET8kx91+hllzupfie7H8G6plg4+KkUmiTTF\nt2EOkGM4Pm19wK6ZWveBLGrbXtpU3zDjAAwx4NXrKhQmqYkKxf5VnUGl4FTk\nSx+a7l5tEDaUokFXQN7TxFCVbPD1xPOKM4JWQu1oQ1aTSAQKIMBBl+IVgrfS\nS3hOEEsuKUI4S7B15lugnw39cYhX/SFcr1SgLZh5fzVQHjb9Z2JWZQIAAMc5\nYOu7r3PzSr/embc7eO4hEYxdBCb8INvenMf0Dttc2LXtI4qDTtiprmqqbTTi\nkOnkxaBGJhcV1S14GWONoU8xxa0tVhjqqKA1i+MZQAZuXlYQlk4MlR/m2ckk\n2o+Wan6KrW19Oq6+BLT5ef1fHOeKCp2gfFome7JHPmMwmYoNL2z6ZNUplDAV\nL0HBUU4GvlMuGwg/xlotYyNGPnoJhX/aIxv43RLkZYNgsec3pzGmwvnY5Inf\nmdfthncFmx0dkj0/1MMNbeNmUM+wQD+Y8oIp4mJMQSJbHrQZKJhx5+RjkDnJ\nSHVx\r\n=2yyJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6rQzEA5Artv/VAWXjAdWVXlLdB6AUzpHr1hYAmxVhAwIgBvnJKEqJ1Wy/0VxBqLAiZ5y4rfcznXnkD15tDmuCN6E="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.24_1569864177809_0.3225023522562107"},"_hasShrinkwrap":false},"1.2.25":{"name":"storybook-addon-react-docgen","version":"1.2.25","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.17.0","eslint-plugin-react":"7.11.1","husky":"3.0.7","lint-staged":"9.4.0","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.23.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"0fbf37220bc5e3296efbcf4a179284aeed81091e","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.25","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-kyG7thxMV1F+HuR0stwdVdzUWCvWk3Nz3jLd9nbpgBafP/gck38ca0G3BLbIzDHGfMOsZWmAkDbw2xw3/W50ag==","shasum":"de2c219c00cfff5ba4a423eb37f5ad35effe4cf6","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.25.tgz","fileCount":24,"unpackedSize":67518,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkjp8CRA9TVsSAnZWagAAQIsP/2m5u8Zxs6cRyF+qs5tJ\nRWlwxs3ncIVy1VKabwWIdFJLVYyZ18XF/+X6u/xMu2Yta4CVJ37vh74lcfSG\nO/96Si001MrBLrQhWzDg1K6qcNr31fuGoV1nPAyhRRbjbK+KxHmuCeJaFl8+\nNSZAxGKJgyrGyU6GStct3DvbYEgTWlHsqAtfPSBMlYn6RRAHgtGia0GFyHqH\nnmZAYf09w+eu0nVAEIKSk+AL0Dg4c9lTB/rcMg4lfLk068QcDZkiuaoR/Hi1\nOZJAULnD3oOJbrFsNFLBSxWSbrwXsJmMfRlok2yd2v8MG+EzwMgapUV0sMt1\nmd2oqxhjSOIfX2wO8Z5OvOKxJCaiWKkKOBx2HbvPa6vTLlPuMokac7O0k9hj\ntZvnbwiMh+qTO5CUcLM0Wd2c88TMCT/NAp0yx3hFpvGggk9X91XHuAh5t6Kb\nbAJ06M9cuzcp6gOIFY3IYs5h3fle0jNkhmbzGbIGEllKNjJRf3DK73zHZq3A\nShxru99u4KjaGEYRT3jDHhdYHvth2xbo0mfLlokWnB2vPzvTyVWBWK0Iass8\noDCDiY0Cvi9c5oJLbGeWzdovYVM3y3y3x8YyUYLHchbEn38a4/sbAGcUPWy8\n7OntExhEbWjRb4KSe9q0xKkW/i7nyj7cpWdYUxGc3IWVYT8ZjjwFYvkzBfFB\n9u1P\r\n=qy+w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFedN4yC1RnvEpkAYxBPx8NPMxf0UwV2giK/loC7zvEAAiEAkm7nYhCCVmrtu6EdFnUvcNekIpkh4BoUTxkVPnGE7wI="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.25_1569864315463_0.20647784389406088"},"_hasShrinkwrap":false},"1.2.26-canary.51.527":{"name":"storybook-addon-react-docgen","version":"1.2.26-canary.51.527","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"^2.0.1","husky":"3.0.7","lint-staged":"9.4.0","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.24.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"d2fce7d57c219670ec94ff16185c4687c3496bea","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.26-canary.51.527","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-Em2crkOCy3tBANQOaibOqsiRN7ejjqWVowLZbSggQy3pg00Is4DogF5oCLIFZ/G7y+sKkXVRW5eDdJmG0x2klg==","shasum":"98dd758c40845e70c1f145ba144ca1ba71de204d","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.26-canary.51.527.tgz","fileCount":24,"unpackedSize":66764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkktQCRA9TVsSAnZWagAA37gP/0FbhHEUU1euvPBHMzbC\n+V9SG+s2BXwhHe04a13yRfHYewf/aW4K+Oig9MrtJY6uW2CILe6MF0WDcn5l\nHMD6i/5ZHGajd972Ebab8N7Re4bVSZAVzgrJWRGu8+Qm4bgBhf8FxQyKF17d\nwLz970sbT3kPNcjODMx64mzjC4yTC/blx4NuI+bkUiK3jLsD96fSxHOTwV46\njb5kpzh8AgtENdWCs5L1zeLakI1GHxShF60plXzhiHeKHdbLTZ2GLj0Zqkld\nk9zzAW9ypEq4J9iVrY85aqKwT9+ub3WO+D8nYj+5TGn1hPMiLN51BnhBEZq5\nyAuK9RrhXJJ6wJQ1slSobgMPCQN74OvGsmX4mUVGITS/neFG/ZZfq28NseB6\nuoPZ79fKJ7Zjt91PAIbyTKuZPkGT0cAPVSdRh74+zWgosi+qcuyJNJDzY040\nmjEfggx3YlfHGjmL2ZJGgfZrbWdCGDNBWEKcJTx4rBi+vk4AOVAdibgjz1Kw\nBpI8N+0XWMk8a0+u2A08H4BDjZm9tM4a2pZ5EMT0gD7xdvvPZtoadHkh4St7\nANQU9tHy04ZWuFCT3+JlJk7pvXqW0Tf27lAZ0tI8uMHSgWBtxbKk17iHM8gz\nOaX4o2eisdTQSWWmZTxdVH2xuGu3+tjobbLL4SqqRR4N3Tu7yRDST+etFPvA\nULDv\r\n=/jp0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICJDUCtWRpk2DcksrxyZlEv/XfoIYXXhPoW9SExzGeBMAiEAjQspNbI2tnN7fjRsJZyKPOlYbmw/KZjEwbS8HUsKuw8="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.26-canary.51.527_1569868623709_0.29034877644127843"},"_hasShrinkwrap":false},"1.2.26-canary.59.537":{"name":"storybook-addon-react-docgen","version":"1.2.26-canary.59.537","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.0.1","husky":"3.0.7","lint-staged":"9.4.0","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.24.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"601621620049b8d34253f5493b41e4a37e2bb214","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.26-canary.59.537","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-497+sGNHzKoWejWT8rcn0SHtLMdaBcr/0LD5rfKA43deUlYe2kJqo5tcjOXVJK1iHxtb/wYRcw1DtH0qxnHwaA==","shasum":"347672478352930c0ae8b985d2d002010b5bc66c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.26-canary.59.537.tgz","fileCount":24,"unpackedSize":66763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkkwHCRA9TVsSAnZWagAA3lMQAIQqAyH8Nl3Kq7z8gE9k\nwq/0kPsb3NfqC4r7nmPBEi1VFYwbw0Q0WbUrdxHr1gLaixcOL5OiJ4QEQ7b8\n++wMdtISdW+UGbNV7GEARAuTZRQSUT1C5vGpQ6kenhhqqksTWchvkM3nBxPV\nBrYohZ7hJoK+nUKr1AYifCcnI0ivlnevalrUKEX+Fnm/IiNiLf/e+xl84xis\nPcyrLMrdH4+c/Iv+LDu622PfBqn4ocNGqud8WLGRSrTBSx/xys3zgnT/4aa0\nE1FMrEBruJxCLXvrehPBaUdhrDbkW5ddBaO0exMD9AIkftaDABRFYsXkdi+v\nwHlSN0+eBWzkzd6JEvdj3f7hFOhODYCg80hsNTSle/1yu4sdx+Y96XeR40Xh\nCzGakEFDXxQKU1IZ+4a7afcu3i53PagHZjq8yc9e8uCal9XIytCp5i3xjJ8E\nB3KR/yvLPXIU0jau9OXb8frbRqET0ZC/Whq0YYJ/iD0zZWKPB8wlDgc9fWPH\nl8ZtBNJPzyMWaRyfxct++u1qlK8gFHXobx9+nGt18Nh0O0S+jxOUQdr1zlcZ\n56aFyd/IxWOb9SbHI+ZBTam382DAhzqBw34+qR7rIyZ1k+lEQZLuYK67BWE2\nUNDY3vLKn9R739r6WAfWMePsDZDr5MunmRDm6z261BG4yfC7CpLWhiVJqJ+F\nIr31\r\n=5ceB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCICQ+PN3g7fOVdhVipoynrBIAgg83/LnY665uGTaQgxQIhAPDh3DwaCtdPovBvAIkzUNBEL4ksllOcFtZPynVN+dG5"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.26-canary.59.537_1569868806569_0.3493985365168699"},"_hasShrinkwrap":false},"1.2.26":{"name":"storybook-addon-react-docgen","version":"1.2.26","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.0.1","husky":"3.0.7","lint-staged":"9.4.0","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.24.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"6477749b88318886f9b68cb60524c41ea5c2221e","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.26","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-etRn/N49k3r/EzYuXsZkB3sROsPJxLQXcuvzxeBwoTpYqR0oXfZiMCZzgVLXz8z89hGbjnJYaUYzWCQtyl7Tvg==","shasum":"b00da22fc00c610d86d09adf93e584e4db900f59","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.26.tgz","fileCount":24,"unpackedSize":67201,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkkysCRA9TVsSAnZWagAAunMP/AyJycz9Iyt68VxNNLcF\nZRryHRjBKFRe6oB6pV3Rucam6xuUR5mhX47ahoWPASA5MlRAU+wIAa+U0lB/\nXsgmhr3ifF5z4JNkjJLHFX2+VF+5qho3dcw9A1pc+9q1mAleQgtFxtYkBPgR\n0W35s3H4zwqyq45qISfyrDAnR+Tfu6M7xXP7PfRaHH+OcrrW1dDuQahJ4Z6I\nnK+Qxjlg7FvUmOLlhjVBVwFGXO1CFCzR3h+4JTyvbDf0wtIKIMmSB+9Q8HFh\nUv9krfRipmlAIa9WALIO7AFfiJjXfJDjb8gRcLSqhfSb2tS+0dL4g+5Wxxpa\n0wBDGutB585KkpXO54y1EWTK5/jv50LR2JG3+JIqBoI1x9CfqsT7qMdJInI3\n9zZEQg6rWqBOvlCvxF7tKqL/kgBCR/DSyDni5GvwEh8FbUqXFtvUwYFynwwD\n2eVptNCeE2XjwA2r9XeD84WUxQvGNZdzE/3a2Dx4KmDzebhHkcWY4WwEk8/8\nujPqQmYdvZruCskUbRbZBA0Sm9o5GdUNJ/KCgvAj/xXC8NsZLQw45kjUv+PY\neExApX84hdwdVpgTpxDqewNIGZUfxvznhZV2pDjVAthvR5HidgiTE51vm1mV\nw3E2t5/W/Ng5UYbhP4emKOE3xsmCgdqXEyjAX4295bju6WQjgi5bKwu43EwK\nDwJr\r\n=HFKG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbshpXU3h6Oc/UTF1VeuS51t0m3VfY3om3pQCJXnQE2QIgLYy6kwxcE1fJukxeZTBsIIIz6gBmvsvY4q9+XkcnzYA="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.26_1569868972201_0.13476299952794002"},"_hasShrinkwrap":false},"1.2.27-canary.60.546":{"name":"storybook-addon-react-docgen","version":"1.2.27-canary.60.546","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.0","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.24.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"a248ec54c68d05f2c700949dd704e644b662a374","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.27-canary.60.546","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-OkGtXK0Dtr36itusWvTeYXPUvWtpVPcWJjypHai8Oo6/qKXtFiH/kkh7YwFp2G9jZGDO+V4ZLg5AqrSwykLNBQ==","shasum":"fc360fdc408eec7b6317f73d4355a6ce89a4498c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.27-canary.60.546.tgz","fileCount":24,"unpackedSize":66763,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkkzRCRA9TVsSAnZWagAA4eEP/1kVDPx7v7uAboT672/z\n9FgBCKlnprrFQU5B1fVfDpW2CChdqqf+mRgLC49PY8WObiUIOB4OXG/YZPw3\nipoBo/1IrPFhs3TcHwrLEfvEq/o+O+Rpfdf8NqOMPkAw0hf+RpfbNx3WAb3G\nyjX0gh5cBLM0EZokG+OZ3yOjkAYDMaRSFNz6sFwq9sX3AdVRskmZrbA8hn0F\n8xI7tXogJvDaVsJkNRILPL9ea45TN374wQOZYNWmipFFhzvZNLnorxOPzAhG\nkly2B1BxZzE+fOS9Tf//qMVJKzLmT7rDG89UMTQkPYWfHEwUv18txPEsav+a\nK/WGxBq4TspjMtxxjl0QK/b0Q1y4lzlYigPhCC6w/k5NOiqEA7+OHwfYDyqF\nPlntBd0GUL2z5aCLkRxAYCQsl6WNLnWTK2+3X0OPTdSLsIU251Ig+k0B1wn1\nDvOl/jyGIW4mJCMwRcSskoLT7ITZsR7qUac06/0tQhOeEsdSobx31xV833vn\nthuj70/2MhiXoWruwltzFAVC3BcfCxVclN0P6rII5ZsHh8Nx0li64i77HKcr\nNAyq6INYFpnnxW8LU+QjbI03vmtyA6JgPSMlouG3GRPF9XehwQvRdQzN17or\n8yExQhR+eBep3Hju6VaBYFxN4EiTCeYr5EHCA1XeHAJftg1D6oJtHVRq8rE3\nDyZX\r\n=xcH4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFtOZCN6xTwh73MyiCh+zM8L3sKRmE5GD5OjL3MWAUUKAiAKgkCHgQ4CHIs9MDlSc5UzRxmp4kZ6OXtVx62bVnMccA=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.27-canary.60.546_1569869008417_0.97025043319271"},"_hasShrinkwrap":false},"1.2.27-canary.53.547":{"name":"storybook-addon-react-docgen","version":"1.2.27-canary.53.547","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"^2.0.1","husky":"3.0.7","lint-staged":"9.4.0","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"328f4134ae0863fa90bbb1f59ca06824c6ce8afb","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.27-canary.53.547","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-/URmNZ08vPP8k3hILcdENfDunmLZ92SiDqohyMoXopBq8hwpUs9/xJqA/5b0hCCLezd6u3eVkkPeaI36Fe/ghw==","shasum":"62b789dd5ad94f9084498c93d3794a790736948c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.27-canary.53.547.tgz","fileCount":24,"unpackedSize":66671,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkkzhCRA9TVsSAnZWagAA/BsP/iaWGBajZQ2hqt/5c9Tq\nPxxxuH5yj5qwApqdlHtOPmdyhIlqIpDb0FCwWiN9ctLMQuSzLyXHhWLBympf\nMtLj4thhBierDT9UjjYHAiY6cT/enQREv9Ngw5xlFbXD7h/nE58oid6DQz7C\ndkgmjYgANnQmiwsFJvXE3nZFzLS6Xn6TqzoUWVcbzYMw51Pj2SQpFYzDiC2+\nyBefsi6fMUtRDMCfqiFsDZladNnJwmlEm53wobEGqfHtXiYSmBcbI0Vdldwd\n2lBlV7t757gBVS7tbPed/+cv8hSH6tN7g22GAmOF4JUANeb9nXEq/cvsPKuC\n2q+j/BOM0fMuF+p67LH2a9BtTu8v1n+zbRSuKYB9DyMNTAStWrrKgMrrUVAo\n7yK1hKq2VHYtshknZaTgVgtY+Rxv88D9T4rzj0Pe2Rbb5+6r7B39dLggFz06\nUZn7aRfRmLZKK4LKDHWabILR2PoXMm02PD3SbyQyQU/QF0C5EhSD59/NBm6I\nxP7Hv8rBG8TE8jnHRNKe0UO4wmW8eVaS3hJjycS9B6zXUs13cYS3qtFQLURt\nml9pXXmHsyOAEDYKP2tlBVAqEs2rwKB7W0uxMf8VVmaSd5QGF28jhI6MBN9Y\n86RIJ72sHhmU8ot1b2lXiMGd+HFogDFV9vDsoTSGqEIeh/KZA2VZW++B8lYC\npSfb\r\n=Jy5X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDggrJW1NfYh7Nja+3sdtHbPuKHFtggv1FAAkNqMPmNEAIhAL6T0KDl4oFfTyICEOe9mzOcXOa7WKjH4B2clTPs21EE"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.27-canary.53.547_1569869024958_0.7741042926396091"},"_hasShrinkwrap":false},"1.2.27":{"name":"storybook-addon-react-docgen","version":"1.2.27","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.0","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.24.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"env":["dom"],"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":[true,"always"],"unicorn/filename-case":[false]}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"7060ec9c3bb0a08be39f13b4a3fba7986fc0eed8","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.27","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-nSWLc0loyEU2OZiE3UpDYl6Grkj/4aNFv+neWXPGZeO/tmHaadyS9bxleRXynLewWStA0v5Cr4QW3upMYyj42g==","shasum":"eb879d4b167707d5e963eaf242045aaa7b4b6a88","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.27.tgz","fileCount":24,"unpackedSize":67237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkk1jCRA9TVsSAnZWagAAvOkP/0Ay1kxrrWax/eltHdhe\nns/Hh2jPjXZ9gRkJhcsvsTe+BKZ7HUZjWEmJUkdze3zIOHdPHSaPteurDQvm\nWmQwg9sl169bPLUNFmsphKZiELg38KA72XoWVWMus6WFI4NINF1+U61FQ0me\nfWAUSpuNIptpTbrUhG8gCHw8d7e2ebQPZ5sh2EOY+5WV4DBtv+4qCsnTY/UQ\nV1vhlx7AXrPLzPPyhCs8rvvLYKc0d7bbCZ1GoTE8EJgZUcrOMdQranNPqkBb\nNvek29wu5NUUtHfQ8Q63roKCkt66pt6baB4PNW4FR6OJok8XVDgZbfTZHxWX\n+1Fo+PVugynmmCVF9y0Wm/5EzWxm50qAtFT1NTGttF6HuDZBj2nIobGuB/Fc\nyHLy4xTr1gLcJrkG3BfauJyszE84IMARybtn2hl1MTSwBRg3AWtmwJqI0kyk\nsr9FlisAAIBmWsn7IrbvIUeCk7vkpectEXpU3ZGeP/XR+B6kVoisufcMAEET\nx4Pr0trjVc4Eoe08kTgbIi+82flTmHzVdAheXzvmVtJaY/ez4QuB1Kgbppbk\nW9VG4vjvM+OhRACr6Xtf0mfLrUxM42uaEVPFZ+Xdi4PlmDdRHP+gmoQwRKaj\n+XFO9U9hLF8Gy67vlC68pSLx8JZI7KdAe5ZguO4+2aWtqbJcIGGVrbBVXeFv\nPaev\r\n=rB+t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdr5A6n7aq5USA2o4sncYZb9kBmhFJhS4szDZXVeCfvAIgHAsMS9LvU+Y9nJgiSFIknP9O+isfvBSvobEnH/ATBow="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.27_1569869155260_0.8148984134438535"},"_hasShrinkwrap":false},"1.2.28-canary.61.556":{"name":"storybook-addon-react-docgen","version":"1.2.28-canary.61.556","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.0","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie","labels":{"major":"Version: Major","minor":"Version: Minor","patch":"Version: Patch","internal":"No version: Internal"}},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"12526cf597a16081765ad3d7d943bdc48007714d","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.28-canary.61.556","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-/ROo4d28P3QDVcighkFBOF0cr374tAUCDOTRLlG3PIbt6wLzw2lHMYAE/Qo/KOBMsK7elEh+VvhS8feurL/k1g==","shasum":"feebb030be92f8d6fa927b9cbae14b6b410c6ff2","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.28-canary.61.556.tgz","fileCount":24,"unpackedSize":67122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkk6nCRA9TVsSAnZWagAAYUsP/2E9JFJp4v/ksziglt1Y\nXelBIjyh0Sr+Q0nywsMzFSvlLBYBWaop+QAk1AqvigXpIglZm9rtF4DNm6Ug\nPc9ufEpYOw2It5s0Q84ZpHiBpe9SKJPE5rxCMqT/axNLfXFw0QPNli34sF2c\nodqZUfWH8YyI/c0nFPlPwNOAIRJgAw+HBk+kr285oXUL6/kSNzBSvSFO4xoS\nE/sFd6vEAmv1VuIW1+IM3+0jGcB6SLA+2Yq1jRQYnfAX0H6TIum4X7BVIyv/\nM41W8DHpBYNTbglojRDtynp29haNBfNWoUpAij5aPEaQRv7d+kUdbzq6X0iB\nhx3AKV/I/9MlNw4lFPM31pjZJjA51sD4jSDk6u3t2vVmBKqt89s0jCz0yB46\nDsJprSYyawcW1xWaGX6xVjSHliLUrUqnhBuKXeVhl01aScNBuw8a345+z2nI\nmkUw5+F8l6KJMsn+/bM2jF+WNHvwB4wcEipFl9hE3mqQoxhq9JEQDjITd+U+\nsy9RLzH70D+OaxHnECf1VHdV7MIXDtJZkGC/6YDye0Ui2IQD+XNxIV02EuEZ\n/n3v0xjJzQI7Hvyt112ylNsyEMMYvlH/p8HN6X5bWJJGyB5k9yJwIyzuTpCr\njG/VfhFAnxyNxsVwMMACeE+Zv9tLDF8030SPJVtmFP3liTy/JsFlb+2jhC2o\nHp4Z\r\n=CoKv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQv7N7l9GhkO7JB+fS8rq7BbnHUsLIFcEZHr4g2GCIXQIhAOhf1hBF6aMSqltQGDt7gakzSON8Rwhu2D81VenAMiUM"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.28-canary.61.556_1569869478636_0.8686468598636765"},"_hasShrinkwrap":false},"1.2.28-canary.61.559":{"name":"storybook-addon-react-docgen","version":"1.2.28-canary.61.559","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.0","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"efd6a9cc82ce11312a8103a6527f8f55a87ee0bd","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.28-canary.61.559","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-2SXsL+66qJX3hSFpO7JDLaeWJbV7OyxHBdl8WYm3JA4hSdADP6nQHdQwYba8q/YKu49eqlS7msbUFs3VgJjHIg==","shasum":"7a55b5a430505d2fb673eed56fa3365a9198eaba","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.28-canary.61.559.tgz","fileCount":24,"unpackedSize":66960,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkk9jCRA9TVsSAnZWagAAvAwP/3KBxrdouX/PBZXy2TkD\n9EHDwb4hFlzaeYrceW2ahRn9aT1dyIgv0zgtYxpaWYis7XhWeMcz68abwBI7\nwk+sZ6hMavBqwqsaVYAvMVnEvc5nUibN1z84fiH9gLSRk9JYLO286L65gDy6\nUcHPcURldhCPH+eA5KNIyGzkw3jPSJRkxExvJLG4z5Zabg8PzKGq9a5g8aTq\nAUp0PuNpHKoU6V3Zf6Jwka/Dtc/Ectv/ebLXgoQoWxt7DldyfCRaF1gHY+F/\nmmFz+QtlvESECXAX0Jgh0gzwxfTe97e2yX7y7j6b6qHwYf02jxZSEABEY4VI\njWp1Im6MMJjgh9Y0OoETgdzg9UNkqeD2cCf2Dn/A954txPnPhAsXj3sBZI/M\nIIUtBnnnASuSRScOrsQFM4aIBeiYUrsqm7cDnXamKR/wCaqKMUKk/ewo04zJ\nGPt6DBnnej5Z3pJQPBswECm5d3Jh3z+BxatsOMifMycc47BHl9MQolqHSbUv\nZ2/3Pzp/YsSRlgAtYoaCpL0Z1yDIm3hplo90KPAHYFn/8BJ/TuAmke+h3TdU\n4IZrilYCanEJwS7gBmqXPLulDVxvje0rMek4Cr3G92MahRoQ1JlSoueku6Dh\nXl4d/AdPF5T4d6DBdsJhF9AYftsPF203FemsXhdTWtN+fbY2Oqbaj+qQwDww\nFNTn\r\n=5mge\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEdnhWMg39w1fAalwFeUTMgavzj0Cl6SDn66OOdVpMjAIgK7CrSRNC0t8fSffEQBoNUN2i6Xuc2dQeVed5mo3FtZQ="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.28-canary.61.559_1569869666760_0.09087883927959695"},"_hasShrinkwrap":false},"1.2.28":{"name":"storybook-addon-react-docgen","version":"1.2.28","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.0","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"19d9c624af29299a90cac799773e75c346764e48","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.28","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-/GcyDBHiP6VmJeU9CQwsBSMwpqWznFOvPWOXiGnKrrcZukBcU1MVSbyCa9JTKIWAoXiVNAlFwgt504+n9mavWA==","shasum":"4e68630523af2568934f2d8665e227dccb49e0b7","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.28.tgz","fileCount":24,"unpackedSize":67724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkk/fCRA9TVsSAnZWagAAw2MP/RPVzfPPMmyF/56Wmtc5\n0Y65oOXgLH6TEV2B14vqdgEJvze+gm8vFePgXqYL25so4IlQConZPZztKUBk\nqgJeE/fkjnM2u85kFh8/bYl5nrxBBTipzrscsDIwC4tT/GUdBPc3bXbAtUl3\nPMeCJlDplhzq+5HJVE3UjwtutdP5w4sPoutO03z255isjMzn6okLTa3v21OX\ni9noS4jTAYRVugWkNyuYJyt7p3bkQeeEeRg6dYE5TdOVQk0i1fjMaP+U7d4j\nabylUfAHMoGkB+MiKv/5OHTmdlJH3Ri7f1eWLacVHgyn7wvIB81P8txm41m9\nyPtMTh2yiUcv0jSzwnqLTEcdKO1qqwhJKQpxMC7UfHSKf2ZITa73t4WVRDiX\nLSfI4457gNFbR+zLHlgjvDKLmtqJHaEPwywKtqVVQIl6DjTUGtN4jUidCisy\nw3r6TKWxncAOVGLBrbbtJxwe2lcu8IhtFdvCdsqkkzRnLEiosa9gRNAUrRcK\nm/b4oJIeZvLXidFgJzuOb8dGj+Jyo/hZw9mh15WJJob/MGiTlVl1kXdjhaQv\nh33Z0Xp3jlRKD3E3g34XRQ71Ugkk9Zhcenk2GDLOn7J8KDhQ9AxDn7Aax7w2\nglLuUUlULIauUmpd0or0JJkN/YN57FUHMU1HAyS8nq4l8/FcQnWVRKIdM2Cb\nYXtU\r\n=8Haa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEqg8s7ky/z55+k3W4QbZnpmrLI2avzqGIX7JeiNpF6TAiEA71L39zEEeiAnRwlVSAdPxTAGIfeo6qNS33hEF88xTyQ="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.28_1569869791018_0.05443879214283154"},"_hasShrinkwrap":false},"1.2.29-canary.62.566":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.62.566","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.0","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"49cdb088a45a5c01e792f30ed7c243f0a27b2ad7","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.62.566","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-kEVKtpCMdp98qDogYK0lBJArjdXgRnvMgMqK6EST7cYVPcb7Cvbb2CNMqdvhZcb2C1g1q/YlotmKTFv1vg8b1Q==","shasum":"8e9b663700bab008fc9c0173f1b4213c98c55b11","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.62.566.tgz","fileCount":24,"unpackedSize":67737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkl5mCRA9TVsSAnZWagAArV8P/2mQHiTVkGVS3ksL1511\n9WEfGSLP1lmmsuN3udBGyM9g6PAIpnErr22FaBYDXOV+42RFP7lEou3pisct\nkmMLjaYHquMizKXmSjZA/wwKyc3UBnmzjRgZNoHFTQWLa/6wKL+fZbswyJOC\n7XmJ3AtVeLSHVlWlymgnAzgZFvFsIL6CdHGTVHNAGAb5EcinAAu9mvoCVMDl\n07TP2PU11BElvIKun3JcLLVya5VCy5lD1H3zZrwuJ7ntccLz9UzcAIli5hFm\nv3ji6SCwry6H2SO5wZnFWEoAtO8zkM1sx3Recm28TxRrufI8fQRNA/0buApC\n0ShLQKv93FAZ4lj5tbmucXNZl77YTn6Vw6mCoo6Sexc3OwVEUwszLDzhb8WD\n11NVMK9n4bvf2Rax/U6h0F8eqiawktqrTfofXXGvfEvDQUJqm+Xz+Y5jNuYZ\nwxk6kklUZhbhJvpa2VqFVlYoWZvkuLo249HoB5Q1pnrAfLhR0dDGawRSSbKC\nCM0WGcXtctnLiRcBZJOlTIlQSJogDzXp8rCsY+eNM+Cm0qp9ywcrUWbuixYF\n59hzpKdaJIoefjGm7pmLHzVoIcHoBB4Hb7nTkHPYPfpR+dExxOHt661Hxhg8\nDxirfsLGiM5ZX04/7yDzuy3KNcWv8C6u9bvcnXf+eLGzX5WJ8hvGa5cTTb+w\n2LRi\r\n=SslQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICoIAY69GPZBx+6tobqVdcDc95h00AWb/wb29wdCpsGHAiAKd054vfSoA/2QhAhzAfDpcNI6ryJhw41CbQb2ZmZCig=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.62.566_1569873509806_0.8659353650508514"},"_hasShrinkwrap":false},"1.2.29-canary.65.573":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.65.573","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"2b7ee218dce7a697f4a4d3b0ab57d3c891f43e42","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.65.573","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-rNPw9lsSrDlpNcAk/ocYkwTBRsknzCDruxEoqxGLU+ndE0dbYF/B737ImxIPCNSLTM/yoEPmmQJs8FkXo1D88g==","shasum":"fab85e0bdde13be8dcb1062d17d2b364e6747bbe","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.65.573.tgz","fileCount":24,"unpackedSize":67738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkuLlCRA9TVsSAnZWagAAb7AP/i3icGRVvtbhY6hV1ByZ\n48oE9KC5OrjFgfOWkzTOs2aGfitxh/o/UOh2HRzpFpqH7fd5w7O0lMhlPwH6\nEpQnIc6txBoOcpy691vdaejJZOy/rawMbEoRm/PhGn/zfQxZsO59Fz43cgXV\nogmXeAFFJoOq3jVy1eTtBAbMa/6YKHoJjf6C6b5vurN+VIRPdppNsxTlLiyw\n/JWumyamEbKZHFfdjONWn3MAG5g6wqYph1k21iR8OFrd2r+i3bWd/bRMcGxD\n1AOrZRzhePG/9IbSSRQLL4TdYsduyYGv5gboqW6N62gsxiqQqPJUkq+7IiH8\nLM8UxEXaeARb0KRwPlOUV4sFqdt4JLeqmH4DygdUatvRXKBuMA/zxDKH6E9P\nrs/6fFNFRgiq/ICP+R+5NP+Wiy5VqTItS4YvOrMdpCfji8XS0xewoMsXm39A\naRwmT7Qfr+dQeTMvlJDDXXSbfgM9vdAGJrzi6hZ8kTcm0JsxZ7WiRI1TZNz6\ndzUBnt5sWU9bVx66n7agSGGkQoALAqQA0wixXjpvgdzNpw8HTmVxM2QQ9ECU\nCRpo0KnEaUQRfvEbld1oG9Zjt1jjZIX9zFMNBvVBKQ0sijZy1i8LydoR4hqZ\nccM8Wd37aIgxQrrGtGI3n36gEjrLhYJTpkIu8gRzE/PLvCE26oo6nf8ZYMTs\nSDyk\r\n=liLk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBBjjDQbyOlunHHLyBDJJ+Tg6qJl617U9n4x3YKvCQOSAiEApas9qnkF249LhYcFhbNrMb5yn2kQDaTmIxvU5MBjLOM="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.65.573_1569907428539_0.311817378810072"},"_hasShrinkwrap":false},"1.2.29-canary.62.579":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.62.579","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"2690c7bd5a41882a51d872f5951619cb4119fe81","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.62.579","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-3K0VpGl2RTVy6hdehYVAqKHzbqnMteFIu9J7FeASGJydIiDiB/9ULgBjUTvq3e2EA+iasJhIH9llgwZP7hG2fQ==","shasum":"ae582e2fd99c1162a4bff1825b6e72a44bc4d4b3","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.62.579.tgz","fileCount":24,"unpackedSize":67737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdk3hqCRA9TVsSAnZWagAAmawP/1aPbryvBrCyMRvZj1Lz\nlhhjlSrrw9DMjqlZyslpmUUXPZfXmcPCtboIVLcXeaE/JVNURJUykUO2hDdL\nOkfaPxdjSRx3Ew9QQU/U64bKEnbOGTYUXDLmR5wGeKIkj3WFWIR0KNVivdwr\n/OWB8OPRwIzgARaEkzH4hGrSlkiK3xxmpI6JVSpiXZkZbneR+1W4FsLO9Nw6\np7ejsaTBzWsRAxuO1TSM1tSVc/9FsICS8Rs8bP+K+5YaKZ1nE3vRNAFs2FTC\n6Hup8LmoYxHngByygP8u5Sg34+ivkCBhBiSVNC7UwqXjtz4zhv+j7A9RcLxs\nOId84C8hqU6K/JhYgha+Hiy1b59WTj3YNl6QmsSaltPxuxlCJ6hyKQL8GR5C\ncui32iwe4QSIXZSimTiFkIGSDDn8RlOPYr2faz7LEC8Hck6vSeh+ZYTCIptx\na4rQ6bfbrUDZo2kPFLyb/Hzq9nY2zNJhw5JhM+UFTGhMz1IDMBs9twQcoOEE\niUqQOhiYsDyApNvw2ukAJ1xrnwWM3bDpimeMf4B+OR0JBZIWoUI7xZ6H3naa\nMDgW6Mgl+2OLWS5FUfzbtJrfYk8zLHkC1sDTnPmtxdR3lbk6o0qJt2tyDcpy\nNwS5UVMkUzvdiuW5rLIoVJz3/nZQCloFp512SfUP+b3HzDg83cZH8YXjNQ5E\ncawR\r\n=uwta\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEvTDq0p4qaFJy9TbXvSxKeOC4r+be52FS713FsBiZi0AiB74Jn5xwv2rijLV/hlIUUmC72XQVmUH0Rbufq3IVDYGg=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.62.579_1569945705419_0.17844629270999435"},"_hasShrinkwrap":false},"1.2.29-canary.66.584":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.66.584","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.8","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"748302751820355105f1afb4ab62ec42270196a4","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.66.584","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-X2uTazWLOp8K/01w+Pfwwq6DHnWL/iTHUULVtgxa9xrrWqUaLX82Ehuza2yWbHT7JTHAJKUXSHQgHbUS2FLCfA==","shasum":"6d03ae861ce5d34969b9ee18edc3633085561c57","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.66.584.tgz","fileCount":24,"unpackedSize":67738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlARmCRA9TVsSAnZWagAA39cP/3fnkizw9PdSwqnSbNXt\nX7SWuDFP1HtK+PZsQkOOeMfpFkmg/1JJN8AmY4a6J4gmxHCqH/DqL6+N/KPP\naP6KUMQD8B+wR2Ps08sF+vAWL3MSL4pPPF/FIhl10LWbrYbL3zxuAejviTJz\nnTaMy0cXF3DbHD6XV21ri3ZYFjHKRnKFaJkGuELvfuUOhUh3s9Bm/QAsXvYM\ngFUGj4EfsAECsviEJhCIeMR9/Z6rdZ+c/iFNq4m3bObflzkPovMV5QNc6vr3\nOihV7K+RbFg0IRwoiZ2RKkFkZiAZeH4+kOXX9vvguVCmndchAXt5tAlIyHAJ\nYaWZJzedt1nwnShz9XxztC9/JtahdVC3L+Nag1cp+rMG5WQ42L35JJOECbFG\nRTiBUqIz4AZ/7jbwdNO9y7EnIqhVavCarjaDRuxE66SB2ZTPOAQvkclHH4Oe\ne/3t4iy2bWWdaorEPlYC2NQurWfodyiY9g1nNDAX21ThuJh9dh5K/mBQ761t\n6xE2RxIx4sKXW5PrwqhvJt1u127wStSvwzfrenBj1XN85inwMVRkNNFX1cRy\nNN+trk7h3hMvzgn9zGfFy2RJdPYB9ba8mded8MWCoe1E8b0t0NkzZp80dmOj\nPn6OrXb5zGKSctLs7D3uGXGMS9MoCeGGsqs5728/O+N2FTA3IBTmYKmNdJ5J\nsHzP\r\n=Qk8d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFNORA+HizZMtbqIZwDLjNhMjqIMWDkGw5JefY3naU1KAiAeKYbSjXY4QRCmpht8PES3MZUVizr431P63BZp1/VbXg=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.66.584_1569981541961_0.13532340252652308"},"_hasShrinkwrap":false},"1.2.29-canary.68.587":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.68.587","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.2","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.2","react-dom":"16.10.2","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"e6f33f90a8caa3292a03c7884ee1f645d5069ae7","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.68.587","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-bAQtky4zZsyNKdPsc/5oagjWE+YeWLmigKNiBUgmCWvdERDHBZjMLKg/ioLckiB2gFTl6ypQO8FRl/gcoJhFGQ==","shasum":"1907aebf876ac83264f7a68440a21bd117ef8df9","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.68.587.tgz","fileCount":24,"unpackedSize":67738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdlmgNCRA9TVsSAnZWagAAFWgQAJAP/CnXXnbjC1JmD/9f\nFixl44Yf+SxPo+l14essXhW/EUSY3D3XQmyN2rMrY2MPzFsDec8ddHs/AEdV\n19DuOLGVMkNBGVYZKUUYpBj1yM+RnIYwRxyI3FscWow/JspfXowK8zapE1sT\nBriz4cwDHxxBuvkaXlTqWMDHR2YChHaGwh4/WiUPSUSfa4rCUC4UsLn75YZW\n1VvqjYCzmoemwVM3WHnxX2JCaF89a5F/DGQ/wI9KIMxlFx59TPpbQA4cza8d\nzVXggLkAz+ywY775ItEp+9x85NJBekN0ngcwDyk/3WgBLig+lhV0Zw2E9ivm\nmxNW+XS59VvfJNxy8QJf611rhNa3oLhnhpJVKyPpo/gg921pp8V6CrI45hcS\npNvQLX2gvbAatoIzXaSL/nf8D31BSqmm6Ljl0mhGZ26dY5jH0XlTNT3irpCC\n8BVsbg3GE/rJE5iYhVl9mecwfCZGgkGuKmHqVmarg2YyiPYd/7pwRwthfgqO\njm/2Arh0wVQpaisZ2RAvn7uAQMq7tybEmuYc9IWNCaSP+3d1hCXt/UApnW0D\nv+wQxS1KNe2EoElAt3KtkWY5m5WXyFRnui1Cmq1Udk9tG/JYKqJwIg1Th6V8\n4CRC6+rSiTK+znQgAcZeELjDVniFXinomHHlCUs7NFR8F6+N4x04zqkHsO6p\nSD/l\r\n=DiKJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCChG4mHO/L9XPrjmRduML/tviSB5r8TMy+sQKMONZT1gIhANiuZfiFdLJOWfxcVSgW1XR5bU/YmWPOKSVacPXacE0l"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.68.587_1570138124729_0.723513679497543"},"_hasShrinkwrap":false},"1.2.29-canary.69.590":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.590","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.7.0","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"3e7ece0383a61073dc5fdb12393804552faa3eda","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.590","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-yIvEERyY2ybDmGDH+FrspCqbS9keRpkJoVeLif2KrfwLYaffY3C8DuLsqIgFTNt+TNXWLSDjgh24vq9HQQEGGw==","shasum":"1a878aac8197a5d33549e703fa6c0fcd794d99d6","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.590.tgz","fileCount":24,"unpackedSize":67738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdloXqCRA9TVsSAnZWagAAD5kP/31Va+onJa+/zywn5x4h\nw3ODdQ/hg1BHrVacNwc6yvBSK8GvvO1I16a6XCMG6LuxE5AUApnH8rjAYC3A\nS+P3qX+vAsyN7mZR3gPSf5yGHY90ZweACKKhZkzvEhNiyDa9GEGyO9ya7dhJ\nd9roQjxRzmIeSqEZb2NgF0gw3h2VYHXNOA6jsqqqjZbcTbRqD/uj6aAV/1h9\n0jl0/1LUIGkzhUipCd/XZickwpEiU3tzyMpW+8EV2fzB7M8rwvdAsdm08uMn\n3LFz/2OVj61381YqDuRUM2hW+/2IvhHoOJoUBJxtP9zhQ06SCp7ngm6IGo1i\nVi/qj4UsPgd7eMzPUZ8Ay7jenDvYWJlHDfOAiZmsnomfB4Tc+0g2NNbIuIyu\n6cPRQzwQ/3RwFgZoK2YhqlDCH69EMtxoXdnMP1k73pqM+9Jw19VwSDpyJl8X\nbBZixtUu+rHDS2n9xTyFI5p+RPZJalwXccMN/yNuNEFMHLhjGssUdQjMcGEr\nagbXZdLBcyW/HzU24ccPtlgJyBb7JkFdf6N07zPb2Qb6XpC3EqOajNvQXHj2\nvXBQm0b2Np2VQk7IerszLQTc9Pu3Qt/9imByS4EsiGPE4p5shQenDs2lZNgA\nhbGy6k0usgxCrWflquDRV9yXFK11TiTPQghBp2eDFICnufNwv82/XS4q42u4\nM1EX\r\n=hw0m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsCwy/gBOTNsrQEO7GYkw9j4iEuFTYrUlysfCgNRaMBgIgN/DGaUbG99E7FRH0LAqrEH/cwLX5SI/zJIbEuDwHMQQ="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.590_1570145769782_0.539340963005692"},"_hasShrinkwrap":false},"1.2.29-canary.64.593":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.64.593","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.16.0","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"0635b0743fb0cc22cb55f18b8a6a43bdd5118662","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.64.593","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-X1xdK7v/4VU7Yw3kRYjN7gSdTEIoWYAMMra++vKqiRUX4gjcVXZAfioxDWrzgCVgrRMVy0BK8si8fbI+9KNQcA==","shasum":"51fd8c0c0bb2b2f7cba10119d6a14fbf55591b9f","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.64.593.tgz","fileCount":24,"unpackedSize":67738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdl1YcCRA9TVsSAnZWagAAu7oP/iR1ROxaiCH6Cb6HeXG/\nYDhD3WpFtuQYw5QRfMv6x4UDRcC8O+NTchzy3UibOr8H35IKTEPUh2VMamJI\nEI5qy4qoeTGZB5krBiWOck9HHOZOKgVKAtDtXT1E/tL43/errLTifXEsheMB\nWDSyTXAvkbth7t194YD+C+YAq2BsI0FSft8b+shE16i/OdQGtZ38Rb7AcZOA\nEYzbPRBotCRRhaGdyYemJviad+LcGV7iSVnK1UdVJqfhuTXOx7SvmO4w/g1s\n0AewKsK9r8oEoQ5nJSsMmy0vtRWj5NUBygx4IBL3VV6SrnxFPlhK4zsg+dkt\niG/gPIAoQ3qvaxb4vfOYZ+lRlZhdkiCkjuD6nRfmkbHcqNJKQgZyGntkDWgt\nojB3z1B12zu5ZIfZrglrYvDDCe8gn1uMvpKeMJcbMvDCWmRsEMRalWCalgMU\nhLu5pBPDW62fXpeHIZwmw1O4w5L9+m28jMWDsQQGN0+BW3f6jlxDZ9qaRDHR\nlJfe8tUSztZtAj6+gbS58B/ElUXx4i3FEWZE086aA162PZw8tBPzg4/izibc\nj8utskK6CZzt1blBwLWMAN9awA9Fm3tsq3iGkDaYtd0+2NXRqjdxoSTgqJK2\nFU1RW9SJ7cov+KWOyNWV6Ryi8ctbD7sD5PL/OoFR05K7ngzvpGHH9wNx3o8n\nb3RI\r\n=Yewp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC2fuWJyHuVnjLQtYPTrQqNrrP7UyQ4HDjt4ISgx//R1AiEAlWBMFjoy9DconARy5I6kOtg2vO3QFxkK2ijw9z1xeXc="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.64.593_1570199067624_0.2851754348762132"},"_hasShrinkwrap":false},"1.2.29-canary.69.596":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.596","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.8.0","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"ee69dd9d6ecf9b30dc314794f589542e6d516fb0","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.596","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-3OOvRLBC5e3qxlWIg4Okmp0B171l8U4/540+a1FiFQdYEHKvXmfrsY3SL4hC9zpwf/S54HT1awnPUwaLqsBUkA==","shasum":"3c9401feb600e8d74e7aee6ce1304efd70e3cc35","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.596.tgz","fileCount":24,"unpackedSize":67738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdl48ZCRA9TVsSAnZWagAAN48P/0SzqscCCT/UGNjvHg8F\n2QHz9P4vBhm9W2I/i8/QoEvPARUR11eugrnK2bh/3Ji08wlexFwglAnLrSBJ\n5VirpWxzx6wF9iC6OcCE8bMOvwiZ4/7b56QcfTcMbzZalzJph73azMXg6nwP\np4ymCxKJaQKLtKt7mJnAuFuODuSc9ywibj5+YtNfkZi//3gujX1xanBToPln\nESDK3u/9wg0AoZV713r1IxT/2gTsPOkNQwwznBryfyxs0rLGeY/iTPMxhAHB\n53L2tiDmMbGa2mebHklbv4SGdCbAG270HKlQXqUVPR5oW2/OqlXfBM/t++FC\na7lJUrLHkpTWtcJk0/7j3dJTAUuTppJ22mkBqa/naZSv3BbYEitIh9xmxC1I\nsekBirPt5SmUwG0id6Z7D3YIFvWRBhHcr3F27mN6VbV3ic5MYdeWTSO6HlVe\nV1pl72vc3aO9KApT2DsUn50nFB50+ZCMzZXvCzSYE0kbnDFO24YL7DxB8Kd5\n5m4KYU53kFJAjETImieark9q5EDHVc+mbO9qbLWTm5SW895vigJmiojhvhcw\nCw1/fHef7RBaL1TwComK+CuMXeJCfPY7qsZ6zo3J/6y9Uen/IiPsV6We+xEz\n9xHh9kNDjlBnEZFixRhzq+2BtqFT4mssfE/jDQvcNQGoOhrKcOFet+IhAFN5\n8OMU\r\n=8lGF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+xzgmvWzPb5rNpARqlcCPtiXrtPmmqj/vO7dFCY0/TAIhAIYZG9vyGtf8gj9ouYBvgAB6FhIE2UGEnBk2PO4tgxAE"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.596_1570213656704_0.540712740957132"},"_hasShrinkwrap":false},"1.2.29-canary.70.599":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.70.599","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.4.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"c020ebbd5dd3188e697b5f0520422e9e0fbbecf1","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.70.599","_nodeVersion":"12.10.0","_npmVersion":"6.10.3","dist":{"integrity":"sha512-YXSgQv4+Ki/DWA/TcZRMmWUyi5zQzydeKM7BWglWF+zRtkmXT3CUvqmXR8AAgXLluGL+iZ+Jl7rkmW5xJh97+Q==","shasum":"acac3554ddad58af255e674c303e27dee69ec0a1","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.70.599.tgz","fileCount":24,"unpackedSize":67738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdmQ0TCRA9TVsSAnZWagAAxRoP/0q9kz/LgZ4w6LC08agb\n/U+1wYj2i2fnQuPnH9zUUcZkl6tNVeR8RxAdTioGORiabi5cpDl40EaS+zoC\nyPmxzLb09BlMWhp9m3yGTBWlqAyIVPPF/KqUR6Robg8b4V1ASB5OpE02ziSX\nuHV7xQu4YcM2Q69wrFmeCkf2lcrtInxtbZj4iNfDsEQrI5sRRNfvrsDx4VwB\nmujSMGkv+vZVZVQfQI7h27XUn8itEoA/ylmaVkF20XADoXmBsIJE0QoEAgC9\n6EeLXjfIlBsM2Wj9+dkmeDhZA5ZytSlZNS7bTUN3MDsffU+v/pMbKyrqVvlj\nkcZMlx9tEyuN/1lgjIvl2Q7uvill+VikDt5OIKOqx+2LR7CV8xIAIAvesSSv\nD3mFbecGnDcXxnupsvO5cp+NP4QJs0YgN/bDeQFIHBUA2FA9lwFxVOsEugkZ\nQ7rTc/Zr86EZfCX6caX9JuOs6eNZOlMtwFsqzqmHgYbIzOO+7r2/ybqcrRYE\ndYIbmJ2nGuIhGedcuckiskdp31LJGn22Ln538tj6jdn4kYtE7kQfQAVrUW/u\ndLNsbH30U+rPsZ7RtB7dV9piq3/5SRWDW1Hrwe14Ch9Mipfv/DddANvHzsyp\nmUR2J2Yc4qkUNuwCPOjrsjcEJ56HElfvqjpyr0LZE4JanJZo/vz6QFGki5eH\nzk2i\r\n=8T4r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDayOSwKlXx6A3gxkQYATb0cvF+7dZvBA+9K39fdGD04gIgJmKLnCt37wbLppznybLh9pLuh/nn44tya35sx2uN3iQ="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.70.599_1570311442346_0.41626233213518016"},"_hasShrinkwrap":false},"1.2.29-canary.71.602":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.71.602","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.2","@storybook/components":"5.2.2","@storybook/core-events":"5.2.2","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"b4549fd4108901c38db198c5723964e6265c1211","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.71.602","_nodeVersion":"12.11.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-TDa6IO9uBNJ6XX8itGvYAy9F/WpbUbaW6pGtmOAArirJdZznG6q7VyfoHP0ziVuGU8mwiCLhGILoHlRXLVe/vA==","shasum":"374ca59cdff3540e0ba96b1ad08bdcaaa3463db0","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.71.602.tgz","fileCount":24,"unpackedSize":67738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdmw/kCRA9TVsSAnZWagAA+CcP/3EsboXhr9aNHSZf6+jn\n6Jr/XVG162AMaTMx9y/KVkrq+1BaMEz/wVyUDzYvOMXhMKxbG8dCfPIjhRsm\nkt3pjpAGAcZAaxumHdyz5rxLHWLezm6e6SQoVX9M+LGuDXSquf/9MXgIfoWp\nT1rHdotjxoCVsUBPFii5UobDDPvkqZHBDIP3ckfWgJRTUEBkgVTwgsBm1IhR\n5Y7JnyeRL6dcb4WfZoKpAOxDyCTYSNkTEn0l9qC7eEvhxhWtHZJKQXSm0fO7\nLtlx8y1Vy1SLzf5BqVh4Bo0vQEE6ETfOz79CwrxE6NtXfgMADQn6ocG9shRJ\nWAeYELjepYAy9KeQQPWSQV/TbwmCC0GAnmS5uzriHUlHw1qHBJVyVpkx2a5v\ne5yVPsg/rrw59lGUu7rX6pLqPScpHmy+v2vADjT1uuZKY4qcw3Ol8gf1/Cu9\nLI/1Uf0XcO1xAt0khCLNLWlB2uNppIQah8yTVVm961dBZlAFA+tSnUcvbIsE\nvQEi1Dhy7psnl3zyP/cv4/Cw10+XWE0JgnDAhncHU75dpvR/+3Kx97XclPgA\naUaQs0CIZ52a+JMwtEx+EtM/Xjdw2p9vhO/CzcxptLJHniDsvv//R3AX6ZsH\nHbwcBqK7579S2ckjDLi5yYhgdvn023JB91wd9PtuW8pcilAbjZDYgaXM/YQt\nKTeK\r\n=SOHi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGyZvqvzkjqwEz+mY7JMPHfdBondcKfVwIfDx//A5rqZAiEA9bTA1rVf4ZGwWg1d6WpaX/H62QGsaSsjYO7OUGbT8Qs="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.71.602_1570443236194_0.660835697827588"},"_hasShrinkwrap":false},"1.2.29-canary.71.605":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.71.605","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.3","@storybook/components":"5.2.3","@storybook/core-events":"5.2.3","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"c88af16153073e4cf205efbcc88e57c4c04f2794","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.71.605","_nodeVersion":"12.11.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-Z2AtiDyFSKOFazP1/46BWBjXiXctNpDSnLUUH5/DgTJrnNIwBiT/x6cxmMrk4qoyW3zr+otAkz9pWmxwqSnJuw==","shasum":"91bc8a0ab2c6c9baaf1a1eda99aa6079370a6f53","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.71.605.tgz","fileCount":24,"unpackedSize":67738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdmx1bCRA9TVsSAnZWagAAyjMP/iyh8LebFXpSDGDeUtud\nUm+uHso7qA58FkNrWr4CnxIfFb0eC7/cZHKEZiz/yA3RVHLmBALp4N2mQKJk\nwK2rm/yrsnLS7+SHyixc8GfaBuQlzonymUIBG3L7tB2Cm1lBjVoTnKxbZBTC\nnTNuWO9WBpUrSgvrAyXLJNdRaS3K63Sb1qCFBX5VAPI1O4Yi32gsdtWRC2Ql\nWBiEVK1+D6nPO+AVr/Bl8kotTKCuN+IozzEmDiAP+C9LEhMcdPHRKPT5lIah\ng/dILEJDAjAZUfiluN6x2PuJANaMqbijkNPVUcG5Wi/2+6NACicQblYZyxeN\nCYcTqDvK8XI5xQcwOXPynEPtLSA/lmP5X4lBzu/xHDns6+RDHmURdcsSxUdY\nDlgYtih4aK5NFJW7R2j6Wu5Lu7J6UNt9Zfc6k4Y0esNmtQGSf885W0/o9Pb+\nfOAfUYldkvTj/qMVIK3PXyc/KDxTzKYAu39KowPSliJ16oJMC/1LpjrHYfeC\nspnJiaZl/PIPPix49a0XbMgKLxvVhYGbNmWzxAPQKXOeBzVhBqhYn7EITMSK\nOXX4eLoJdexrDV8digL9wN5Am3lI3N3Kvp+4cpI1GNgLszrB9MN1hZW3cZdW\nc6TEgW6O92L3hzGs/+1Tv6FOI0Oi3arwOaE32sBeDQJePKE20Ib4XZ4EPnvI\n2gdR\r\n=1PsR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVc/7+pjVaa1Z1LQCcb9KE87YttrDpLl8PXR78+7AfmgIhAOImBwd04Cuqn7v28O/U2J4AntL9BXnkx5Ha6HLSWFTj"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.71.605_1570446682422_0.980453262111681"},"_hasShrinkwrap":false},"1.2.29-canary.72.608":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.72.608","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.2","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"054edb5dcd4d3d1981784bb44a6c91f313bb79a4","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.72.608","_nodeVersion":"12.11.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-y7Y0ow/1Bua7+DLqnR0OPP5Xyx83Ln21KYJTmloVngZKBV+BrqrnX6drPMu++96g9yRUipUpRyScveuVYCtuOg==","shasum":"907017648aed15f10c1ab0f98a7d1dc8a54e3e99","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.72.608.tgz","fileCount":24,"unpackedSize":67738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnCHiCRA9TVsSAnZWagAAUkwP/39T22LSVtlU/BUHom1N\nrZVDc+h6pWCHUKQJE9g2SByGpiSLZ3jxTWKZgJ0sr7+AfRaPMIr/Nw3gYHiD\nMzCUhPbsoEapBbSoj6slk8xAuP4McX7mT5K6n3nInTkxWQMQIlPR8xmCqx5b\nI7TgDxOdb+4YnV2tliFzi3jAdK8DzLmcKb8ddr/s3ks0l7UVjq7nimMNCEol\navIU0sc2Mgm4jdamT7QXiDCatZkhbkiDYSEAP6U7HfrB3xu/h7fVB5CZr/hv\nJPr3LEFxC4aoj0kXa0qbD0L2xwcPIfWj9u3IqRQb3dvcaoxeu4gYgiwxyzye\nUaO7uCPSmbA40h3sBgKFMt6X4tWIOklIvphAEQjD9Rhbt0yAQNgYC1SUJ7Kb\nz0fk8fs9akTWGhSmGfbVe/bfMc5qYl+jy7G5tD5hqlWfLXWPJYhjj12zPgrQ\nGu9ANYPFK3NBbKTGBuKKkBmK8uq22nChCMnxUqTtFFuC7D+my3sMvz+Nj3PZ\neseNgSmWM5GXaPCstzJF1+v3ROV2r5JlhZ1IjXe35ObM68OUFThDeqfyoJCK\ne9K/YducuIYgVwntnSbLzUgTaP6EXKmUUVwPTy6nMey/GGdVse5AK5GyQJju\ny9EixFx1EDtNgWaDzjH5pG5XPGKGjewnPlHK4u4omffvUw/gKMVYms38H3Fg\n/Ogp\r\n=98Yt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7/yWm5WRINVGZV1GnfMsF7F1i0QmqWKqjSn7QGZ8I3gIhANcPCBgv8DG58UTiCnhbTP70UhRQZFkNGL0+Mty7twgp"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.72.608_1570513377897_0.6788084458906207"},"_hasShrinkwrap":false},"1.2.29-canary.73.611":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.73.611","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.3","@babel/core":"7.6.3","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.3","@babel/preset-react":"7.6.3","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"0fae02f239ad265ed13f712daf573c7bdaa4385e","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.73.611","_nodeVersion":"12.11.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-FTYEijvoWxAjbv3t1ZcMOTtczZtvqibLS/B9NqEWxw2+by1p1+r05GUF3KWe4gy81usXtfSDhbxs6rfakC/1zw==","shasum":"6c60a291e8badb3cf11254229cfec0c19e086410","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.73.611.tgz","fileCount":24,"unpackedSize":67738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdnO/ACRA9TVsSAnZWagAAE68P/RAJna3JpHWrA5guOWY2\nIZAGJx0VHpyHAnk3XcU/8R+e/7w/DZDEIsaZGMVPHpeCOM1cerYAqCw+mJtR\nzDkclP84sijTZs/J5VVUJljxwpBkmbcFPAHtGUzL/pP4CCzUCKZPHMJDsyNe\n3QxnshAQ9qMngLb6fGl4Pxr0S14CkI8UqRsCg9JDRJLMcXxMdIRRVxH8bEyY\nxqYv5rvePsSDGbGz9S8blEGEBKMlrT9DDJ+lKfrBwg1qDHBwBPW87SGf+HOs\nx2kmLczUkIP2sU9xtDQslDQ67oO27tAgOjPipjrNMIxvG6GqI7dtn/cX/J4X\ncwURI7siXYMXjo4f9+eCFlnLp2226Y2zwm8aFpjb4Q+AoZFzAoAa6abxImc2\nbWfcf3zrB97eRmw+mhbD4NKAqr+heFNUWTwvywbkjSHrZ39VVKBz7/AUnP1n\n74L1qHFrbvMCXbWsBmhCJz0KvIIk5jvimg1ZnZ9JcABGN9IIjjsE3J/ybVb4\n8aZf0O48+bTOTXWs4qZJPr6vxzNVc/G6R2ZbDLFqUvzT2nguUyevq23UDH0J\ngYMLHq9FdzclMcm7Mw3jghTRSr0MR+eShpqdK0ZTDDQoDJ9x4r/9nTUnlhkw\nsH1i6k88zxPvScjPwqpYjXnI7Bo73I+qKkyGjFKpsDdQpPtcKYa6jjm1lEJt\nSZeD\r\n=8Djo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEKgXkMyMbAUVfueFGpYB+vNClSBO5eHKLCs216wqUZkAiA7E6Xy16ANigx1W0WLT+7tR7jAhWagoJOw/xFoBd1zMw=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.73.611_1570566080015_0.29361577605527067"},"_hasShrinkwrap":false},"1.2.29-canary.73.614":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.73.614","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.4","@babel/core":"7.6.4","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.3","@babel/preset-react":"7.6.3","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"9d4fec3a4d85328af3ad4b54d1efc8598fc36aa9","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.73.614","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-C10bi3CEb3n6PaxkpkBYodYDG0sNTy7AVcjjbDG/9w9JRLWVvSs4aJPnDeRN7sAe2cfYkVpd1IeKti08pXcjTw==","shasum":"6d0f95f9aacea86deb8b06a0f95d51b82cbade8c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.73.614.tgz","fileCount":24,"unpackedSize":67738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdn0U4CRA9TVsSAnZWagAAWI8P/0wxHqza1X23t/nv8dxq\nFZjLsRh2D04CiLKnqRrZ5hX38K1ch4IAUuuNOKDzyCgCPUPUptCZR3YNwAi6\niFADY+dSw1N6zjfs1s1sqcLuAMjAuhWR/GVbxMpPPGx9fcD3b8+mV8r7g84D\n3oAR1dYZQb2ffbsO8Am2HOPm1YejeB4ap+ux5taQYH2SxE3/S8w6B4pD3+b+\nQCAruxJK8tMankyqnrmZ/aqFrUM7jPl4J8hIndbFGDFv1xhztaAbZqOodX0A\nmLm9BqHktnp5ryEan/mCdI+Zu+4ylpoYv0WReZlfu33jwwF0fxqy6UfZiSv/\nNRuZvR4JX8UNrX0sVD+jYkZ1dpsd197GaeDgEs6gPoOqYhPPs5PXuFE25v0S\nkhSf3r/n4fgUisu7+4cPp5YF3Jru00QAn4fQ2KQYHu6nsZsJfzuT/OUKkMBC\noF4PWvi8k+9kyLvYuXAP+fSxGM/cPoE/8e0eQr//2V8J75qoPEHUCQvP7waH\n8E3s74oHEviOAcEfrdQKozaQbUcOIBO688GFUTUy8ulzxId1AgA5JrO4zUjl\nQ9PuogOhQScjY0h/WPgSiIjO/46UaVLYI8p2oaW5u5tISEsYlzI3v7f+qKwu\nV3jLlepkG3/VB/1zwFL/A+PCCOQ4ZTPBzJf4yM2Unx+7368w3cXAh3/frBxa\n/pKn\r\n=v1/y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTlgzTImpXJItdW5ETjIxFvSnzDFEYdjGpBipgK8UZAAIgb7ZGOPZ09nRRzS7VY/LdkwBORgOIaYqnC/CiGSWzeMU="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.73.614_1570719031378_0.5567484470231931"},"_hasShrinkwrap":false},"1.2.29-canary.66.617":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.66.617","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.9","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"e6903978c53fff2bbf41b4933190b07a83ffed59","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.66.617","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-9FBgBPtxiqoG7YrJZ1yktrzhXdCYlAL3UJonAqB6GxAKkZfmEq1l++frMttPHgxF5uNjKJVOSsxMM8yk1fU1ow==","shasum":"c951b3532d5b3f8d637cf9cf65640be7717746ab","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.66.617.tgz","fileCount":24,"unpackedSize":67738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdomwPCRA9TVsSAnZWagAALSkP/1/ek/sj+927G5Dh3meR\nOUikInnMLG9rRgjqOrpxRxm7MTkxuKmYnEE/aVALueQ3GUiWn/jw1rqDs4Eo\nPUCZz3bbeqZ+z7fmoU2hor0rn6Qkrdkk6eUAwzTZScydf/221hdMxNEBO7F5\nJ6Cfi/P8hYZ+bI9ct/w5bksokTWZZL8F8nwTXhOWJ0FPaP1mEv7apt5jUyT2\no02b21+Fq5tpqRTHXx6wyCCT0CG8RD9jEQNm89fpqwBam3VTzqvgnehPrBHw\nQlpIPRLZa46JR3ZBS59VHliuEXEDOvSO0975KSX3lsEacuewuiw6AEpMzPw1\noOAZAmzOMy9nS7lRJJXpjGfsqbIBoPjpE/ka80sNLO2B9rS2bcXDH/18MxkU\n3JMay37UoGRs97FdqAMROcnb50Tn46On1aC8WZzphf2QSterIjtF6wKwxEGy\ng5i9JckpHaigPorRsAS4cuVHFn6rDsOlAIRZQwtjVIP9qnELWm/IMmAyc9zm\naQyqe3bGROkKsilKHKOjYlAR2vj2xWNQmrhVsa7/LNBAb3ypn2YhQRly5nL9\nyGkBrMGJOvNq8gGdo1+sJXbq/Y5YybY7su4ZnGVn75N5e+kN2Cmm+7GtUys9\ntL15vwvBKC8DwiXlLspHhzAqtKngNFBlUK7XhjnfMHxBh1FuDuSlUH+/vh1d\nVRXy\r\n=okQz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDn0JR3P7By5y4uqdYWBCpWQqzXNYaqTU9FNrigmIFDfQIgS0sxZqZd9JA3ZacmC/B84qiLdj1bSe6x0fIH3ERrzV4="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.66.617_1570925583053_0.10681644617247099"},"_hasShrinkwrap":false},"1.2.29-canary.71.620":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.71.620","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.4","@storybook/components":"5.2.4","@storybook/core-events":"5.2.4","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"dee849284653b02ea24de8997a617cbf381b0353","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.71.620","_nodeVersion":"12.11.1","_npmVersion":"6.11.3","dist":{"integrity":"sha512-IrMY42RNCTfXJw0Uj78hFVTCkvyaUEF9SbjFYU5MImuYxx1+Dncxy1nlGbGj/KAmikFWeGMejVnUg0uMeWp+qQ==","shasum":"16fd353944afb58114f8ec2d40879db425b4a9dc","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.71.620.tgz","fileCount":24,"unpackedSize":67738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpEONCRA9TVsSAnZWagAA5dEP/A/XOlWxN72GEzUAlZsu\nMK2Bxg1yBqoAnq2dmCDcL8P+iXP8cjchS7B4k71a19lkHh4rfdwkFr74dst+\nJ/uqi1BYh7fLW9Jk8dVmG6n853UGKNGLDFl4PsPngN9AcyYhzFHax4CI4SLV\ndryO+aqAcfxGszUmfsyKQqO0I/ZdaERj78uynLwcq70tucHyurZPAmBvdETy\n8QmpOG08TTocxZhGZhISYV16zw+EZpJFIHgaNsrZGQ0LdzTgv4/kTKlh3lTn\njrjt4gCrnkNBUQFiX7lqvt8cet9AoAcaX9c6hbN13auYEWisQNY0m1PDL0o+\n1LPh7Xsayv1i273U+n/YAWAwrDld8gZzs3FFIT5azKcLq/XT990z7GU1mwKa\nknn39sHwZrqUB8We3HwMUZ3kA/8pXdPyORNq8zlEUvCEzHxwjRFIlH8Rusmp\ne+Glo0jfjV7yi5PWyLOW2N7tzek+UZfCY/PXjz3TamCFvdC5WIk2cjJxvxx0\nenPEPHzTBjwbTJ6/leoSQe3Evggm5HJPR4TZ8CCKv0RMVXGjeh7xeR1a54iz\nCe3VWywrt46z6S2h4g9gPXAZRwb/Fh/P4FVPXvX8Ml7BqC6K1VZdHXz7Z8Yn\ncfdn/4QPbe5T5N6Ynk+RUzZ5O8tzeKOipG3rexyE3K/NA9nDTSxCRSdKdK1x\nNE1l\r\n=4upn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoSMpWqBAhavyLBLmPLsMbD99AjGWBK/4xDudqyEFw2AIhAPhIS/AKf3AHOgka1aGBwtYwc7JccgwBlC1NHIg0IWUY"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.71.620_1571046284187_0.955514557523139"},"_hasShrinkwrap":false},"1.2.29-canary.69.623":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.623","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.9.0","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"13c5a4ec44764bbcb6430384ce8793afe7308cef","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.623","_nodeVersion":"12.12.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-cOlNF5QrfELzjYaucbXWPy8nds7oNEJjR834cbDDqfxSXLwvGrTvKvGO5a1vGS3IQ8MNz6rh2//lMfp5ZzqQ9Q==","shasum":"1b1bd4772a281099f0f3ca352ff5c31188cac789","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.623.tgz","fileCount":24,"unpackedSize":67738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp6deCRA9TVsSAnZWagAA/hgP/2J/MT+RuzqPpmbhwXZK\nVD/r3A7lNdEVx83RxbNKbG3m0/URNd2yEhp7+M/dI+jeoZJgR2hRc3H+kCL9\nsEsIL7zA7dGNMWOOA2mlPVJyCgSE0p2o9CFJ6WdoZht6VGpBQoQYeUVOfbK6\nZOiy5WxGV8lDY568gBdQzj057pDgG0MTH8HpQ1IXEAdQJ7qDD/yb4NWtiJ1i\nr5vh24Nnt6PUDOnMEJNPJXnsVHGbPN6+PX3z/zsYjkU2wd7Rhhw56Xr0KPaq\n6osqfuMiuejdi4Lz0fUbsdXbAY2uvBPBoLgNgY1DZuqg07xlgEZHbY5alqlD\ngzfWZS3JLQRYTVawf4CBZ8REJLBFf5DWAyP9fLChvm6R79yA+lGZ85EmuY3h\nt02xkQ5AIrFB1Xjp2kXL/+6b41Cg/OLakspC2V8l4LwJPkHe9Q5g+GttmhmC\ncoJLsOoA9J0W5UFV92HQdRr8dwEwXxjylkZ8J5O7mUkduR5WxnynJWfNXwJe\nZmJXiHc2jTc4WiR/3pb7MB7Yl3EiL0ma/a2j0lBeqxO5yqGVNBHQYqKLBOAl\nOCtTrhMMhed4h1P6U9/iaSlgMtyD8C/eLgrOJklqnaNXwAkUrME3KfF/AImf\nXsvXWo2JazaI/MqyxzLgaj70GjVZFX+N0EJ67JR/355w2Rck89rzCCEoj/62\nfC2s\r\n=a/6Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH1TR7Kc1HEU514Fobo9zh3W2GhBrPc3jicmO7o+CLoVAiEAxBY1QVlm09kqoL3J9+1ACotxQi9KcwtYlq00KAL7fRw="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.623_1571268446242_0.46146144012692325"},"_hasShrinkwrap":false},"1.2.29-canary.69.626":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.626","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.9.1","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"c1322cd2c90a55fb804a89bf55910ba0416980ae","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.626","_nodeVersion":"12.12.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-7w9suU/ViCGH79V0aQHu961+mKaSSxsdzNAZ04dL/z3yRRNnHm+oxSAVxWWbIxSRHFH16jAGmJsFqOhNnVLr1A==","shasum":"c6f1158867003178dad0851a03a960dd71a947f3","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.626.tgz","fileCount":24,"unpackedSize":67738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqKVVCRA9TVsSAnZWagAATFAP/RjdInAomOYFy2nh+ME+\nbpgCL8LyOJ+Yh/zwfExrQC8S2gi9jugFs+pmZUeQZwhqkM/xLpMYlx4FvzNT\nl6uQGNwE3bwPTkTVkupzCscnAucOhXXbp7j5HBp4bucpbIhFhYjY9bni7yeJ\n9Tp5xLCZkvkILzM5LADqQOzGqJW7bsQnNlkVDRZUf23joGgI4fjKg0aAyOnr\nOkOfdS2nC04kaqVx5t16ho1cJEpbgiD/qjgj/ZSx68obJcty0ZnBiRFQZAZ3\n2p8t8WfSTBfIe18SHAYF2AWs7F6dxTBIFwy0S1OUlROJoAcBxqT+sSaLuExx\nlAaeE1siLDgdWwtkZn4yKvtXQk5/74QcB4TELE8mJKi2SUxGHkFlRggyJS21\nWcHczrx2+QAA/b9OtX1T/eu8kf68KpQSfqSEmYwXB8Ort8pVRIC8avrWWZjW\nxfm5MHPulyuISmkXvY+vwWO+lGQs9rU/2OKgb508SCVNgcKv3cS5D5Xsjldf\nEaQOH2Iox1GRvsNhXjEjy5MaXyRfiGo5nIKLZqY37PhUhDYop7ypazfjnBeb\nBm40S9CwsuQXWY9j+VJ8SM/oxS41pScUTqw5wDYwsqE3r8VHeaayJxWpOeUK\nbMrUAyzTQbEvrHuFBWl2QOqd0KUlTYD2fIAv77h/CsVQIbgqxY/yl9ym0+Jg\nUefi\r\n=7HtT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCX4sPp+7wPKvnfrv195AuhjZQNqfIXvc4ktOf9Q6hhgwIhAO4jqzvdp2Salfc4V9esxi07eZoR2omjmhtKeRYiY5dQ"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.626_1571333461019_0.9558388429321838"},"_hasShrinkwrap":false},"1.2.29-canary.69.629":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.629","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.9.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"a0a37769843a9abf23846b68e1c8f493dceb2b13","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.629","_nodeVersion":"12.12.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-+aZtNZPgNs0KyE1fFk6MrscVSr/AS3W+R1uiCxNMSlpzz5JbQnBmC/kE6YPfEQdPJqRuvl9vRTOXnKV2s1J/xA==","shasum":"a854566fbe5c0aa173ae08d6afa0d224fc5a810c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.629.tgz","fileCount":24,"unpackedSize":67738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqOfvCRA9TVsSAnZWagAAXM8P/024uK+Zwlm4OPOLbExI\nbScvTeCiB/SMapZMuryMD0IwkaeJrtk+6IxUPMOaxHflA8GZNtWY/yfS44f9\nb1CULehapfmdUTGlLgdG1TW2pmXEBKf8S90Be8OfNQrG8Fo++iV+szRLd5Be\nMswNY01HUqk+lrUyZlKUCfjpiGS8WjSlcP4PmT6OvdzZdMzFwkQBX1hTv/0x\n3rHIIIAcltM2wY7kCcPTgAB9UicGoE8cdKjy2s0CM5rws/jWM4lF3systGrW\nvHFlYuXgUBxgoKQILmJRzARaauvzQO4hs3CReVcZZrG1+7m4uVIHkWsr1VNt\nJ7aeLC4msOoYxPIlAZmf2QXOEO1BESr3dweqh3hVKTwRq1LLtSlSe4G0DQ4v\nPKKzh2Hi0nY2QBGTOgjrKVeGeIirzF5yN93A0hfW5GlcrGvVPKARDsTO77Bz\nsle6qd8/oZFo7SFuWESZSw6Mf0mxXDC/W0YZ7epD9GWGxCA41MgCwguA+Hql\n0yBCk7aHJXhv6+V8mWUFj/LJM/B8WJAVurincAehIyEGoV8M7u1bti136R4v\nwPQlECOj2d3aJHEBeWNdjynBjP4/w3KrvKqmHngj07MyKykgIGAu+58yozAZ\n2CbzKKMyHi8QJD0GmkGx9yh6dDxBie9ToTlckwsx/FGmvQpnifQNtjRl/MHt\nzh6K\r\n=N8FV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBaT0OSjNNP5FUAuH7OiIGFjxfHeaY3bai3ZhpsatdniAiBWUecp7llFQXJcyI8u9mBZYghC3M/sRR45mSyxi1GBEA=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.629_1571350510595_0.6173337675554829"},"_hasShrinkwrap":false},"1.2.29-canary.69.632":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.632","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.10.0","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"75ebbacc886189f06807c650582450511fc13176","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.632","_nodeVersion":"12.12.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-LG5b+L8+GUeEhYT3IjfZ9CsCpqOij370fKTs8Y2+JgeAHU8UXqpeQnDOHHyLg0Tl06VsYW0FYCMlT/JqlNSOSg==","shasum":"d4feaad51b53ba3c49c523268146d14ac840389c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.632.tgz","fileCount":24,"unpackedSize":67739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqgwcCRA9TVsSAnZWagAAxS8QAIH1bT4/jZvP3RT277yh\nRkQ+SVY0RuAozipX/9ZrGXd5XPUaGSiu+6LTlWpLAxdhd+sFVtfPHsio6j+d\nxX0FVoOJ39bjL5PaZE3/VIYULz0yntiZ2ybobZ6kicg+cGctuqjoO1rzZNYA\nLSUqlgK4ujrxHNWMQVBOm3nh9uOfyY/N5dx1iupu5+r1/XNBAgfv+NGKfSoX\nQvEoJSie52TFGMoUxBF8lkBE2BCYTYv8O7TdrCiyrvpXSp43MbR+bwJH/Ni2\nvhBi9EDEOxLTJqfFsSIndn/dNdhIQfW6ZSrJh/A9YTw+zcBmkZme7DyGnhBH\nc9IMYOlY/cSeqIp+NEgOi4mbj50v/6Wz/JqtxZ5uvfJ9GyMj9cNlcDA95dBG\n0TEC4kVpnTWMoAwQGhfn0mK0YKiaebDb4/4lIIOwefmTQW0MVxlh043lgu1+\nCBb+vhkU0aipnUiGWjptFRwGUF0Oje9xfCMiBiVLoyMLHdcYUywS9nxiID/q\n5gZoW0hEoGVyD8q7OCl39GMi08cIiqj3vPhoxMlZruz2U8uwaf60vRP4toOD\nznHL1Ul/hUN3hW1SP5zf0zKKxL80nJ4SDjEgQkh3Uh9d16IV10r/icitgDUo\nlDqJBb7HdJrsbd/Xrqh8QXREhbRtOvTfhygYvaMpUNdFV20+oVpOf9076Rq1\ngXZc\r\n=IeE/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID4o7mi3n7H0XK1Sens4GJEMNLNHaT7KaPCgc4viV1aQAiEA/ZTCAM7IIvCDdqqeHwXU0sORAwsIO4gjsrEvw6SABBw="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.632_1571425307860_0.347260045592801"},"_hasShrinkwrap":false},"1.2.29-canary.69.635":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.635","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.11.0","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"ac4d3b218318cf207b11f49fba2815356c311fb9","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.635","_nodeVersion":"12.12.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-sDiYols4ixwBLBMHpuXLQXVYiGZVsvyw09P/2n5gbW/+gYV9myOfF3V3OtaxQC8UHOcSojRdk9490zzp1a5RBg==","shasum":"ec4bd164af2381934b1942b9e606e05cede5b58d","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.635.tgz","fileCount":24,"unpackedSize":67739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqi29CRA9TVsSAnZWagAAL3wP/A9K+BEavYPV9qlpMlH8\nhKBEANCIVdOMTfj1F6u6gi/nw+/utG/dhmTaBSVoN4OqlfC6Ff5xgA69bEqH\nXV3BoH43T/CVkTnC1tZrnz2GG9V7aBiHMEeyzLmcFw+iWEd3z8b5jYxHiDGa\nIMke0KvpRfjrRZBYV8jRjVaR7FwF67cbPHdVIQtkEOHlZywHyzlCmteAwkFU\nL8Y8mgKI3YwDJBi8wCpeNdJzdK7pdEfYtS/C2bsotwSpp4OiyIvzzD0Hu2Vr\n5xmxLD+zliXLiJglkTVsrZQCVr6oAYzr4ab0Y55QUlYf4SSyiBccY4b2KxOz\n5KBq4or7kf3M7qOKMBTUFlPuvqR8r/RqXGprtg50dWLf5jL8tf7aRbFbQDaZ\nZAO8RMb+IHgj0m/OhOlZV4WAg8BK+ezWSQM9ouaLnDuyhJlOL3Q0FI2iSufO\n51kOm8sW9XSZR8M5eClH7X8hvgxcdqU8LfBJvbl2hagEndQNisLYBwYPy0Hc\n7Le+RSrCHujnsu3YF7P4hKXY4QBwce2nSNQQkxg/ruQI3gGgjvzPR8fj80zJ\nTg4TocbeaqILfB/AWVbsttS0vN8G5FM/BVoNEjBM2jMOcj3XvLKspuape1RP\noyc7fKVIICVblq7ToOLjf6qrRuBuN40tjQmS6X1F48sQU16tbV4gZyentP2k\nN4Lj\r\n=wl29\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICoW6aG6ik2kUvmPMQBo+t/avAxCqyF00Az+Goqo8JIzAiAYPKPTa3OcLewrgEEZFIdtX/P5Bb4ZHwAPsD7u73UEfg=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.635_1571433916611_0.21893990091650983"},"_hasShrinkwrap":false},"1.2.29-canary.69.638":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.638","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.12.0","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"7c118d2f02cbb9de27a9eed22550cfb196d4f6e3","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.638","_nodeVersion":"12.12.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-JBSMhawKUf16a3A7K8yY1JoVKib1onZj+tQvOgK83caFMHv639md/WOBnmm0B5JijLQW48cCOsEcZSyHcHAkeA==","shasum":"62c1c2711687176147de0720b35c82bef409ec9c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.638.tgz","fileCount":24,"unpackedSize":67739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdrd+gCRA9TVsSAnZWagAA3jwP/0jOVmpD53qmckXBvPTW\n3reVFpFAoV4NsEwaSCIrlyvrpoIKAkGvfu0dzFdKtas7A7MQ1RGedOZ3BWqN\nxbXSUmYCwPdr2U0ZI9noBeuozHruqk4zYg4mZmrYqvo3QrmxWD1li7Esdc/f\ngb/qfASK6aWrA2Yg1bywI/R2wRdm1Q6rzN/1QBlhyWNzYS1Eud0cuDpxHSYs\nyjMGrNFwnG9S/fVxNf75EuiqrtUcYHixRaJ8ToXLIsqeqItac6EkdAuqdQWb\niJuUDrsL55wh4O6Q6MTvvd+uPEbh7fw1tMQS3Gxp9OWjyA2FiOZ20imLj5d2\n8ZaoOIoLwijrS5S5uHoFwnLitvEoz5nfIPTnqsJybEr6iGkvH5FlgDabv8t6\niRwyV8+9Qi6XJcYN+VcRDYoIoko/F2gpKcDOln85IWTZACmDSeQNi2l4E73Z\nn2kIf/t0SuhewgX/3Jl84kVUKvcpcJkbS0BEi7SmRmSrsPYKt3NLpgGCvx6s\nwRSd+2U0yGa9U6jv5qVp24SQhVpYXrTircfGpmySv9m25iBTP3BZIEkVCfp9\np/Pbq2oMtjTbxryCz328H56mY9dj+ASJOQjfYiiNBhXTRB81lL9XNuEB+TcB\nwYtY+DqVWFBxznWJnRtyLO+bPVzTXPf1Cz+vu47iW3tnsC1K/aYpcuPqdvcd\nkYfD\r\n=t4s9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDun93NCU+GSmcy/xBNa1fiGPDAcBKE+m06C5+TzGP7CAIhAKbygEulJCDTYPgjRZdtOMhTsFw5InWUNFV3FLdnxFtQ"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.638_1571676064175_0.8282436565098521"},"_hasShrinkwrap":false},"1.2.29-canary.71.641":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.71.641","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.5","@storybook/components":"5.2.5","@storybook/core-events":"5.2.5","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"1c62abd101758a3c8934a70e47148324c02950a3","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.71.641","_nodeVersion":"12.12.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-Lse/F20aQdZSuKdd8lV25mMRi8pQi1B77h0Pi/8HS910ypCZeTtRzELprXf5fZJIzE0gI1rZJDqBmn1E4kaJKA==","shasum":"de20d7b8798383ca19e4255213ba2c4b2c05b354","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.71.641.tgz","fileCount":24,"unpackedSize":67738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdrl8jCRA9TVsSAnZWagAA8K4P/02JJ28p4MSUz50etZqJ\nWG6r7jXcZfD80fv7mjHikH1bliD5/5aYNsSdU40gzdVL7jjhxVhesp5tQh2w\npKDXrEV+P5RO+gM+NtnWnGqbFJi3+rLJnTc5WRT82JBSFNNs3ulDCKti3xfI\ndWDYSdmFkK3FTY1AlzD3EuU07PDFqhQ9gvNsdi9LO4d1XgtIMkgteZLu9csV\nDdNhEEEQNdoCYTF9SRHK3kyjnlHM942aYh/GPBXV/bF2lK6lJ4BgUKQLUFzj\n0N2AVvvcRhvwa+GapwcbtGfXhkbzKIRxMbpTHJOFfs723qZAVotaLftV6RLm\nahi1yLwXfR1DjVDr2eWtY0xs/xjUppQaXnElO0FpwrB1fBQW9J5MkRAJQurM\n+5qyNXNZ4h/bJlGPXerZ/4n/i0ZUYolwmkuM/fWQYUccGrzEjxTfyuVa/peE\njzSqunlAvMURCzVZXqSsSoW0jgcpvvv/yse3RsWRIlEELHsNFbs/ISS7Z7A6\nb31Pqp+OnPcJIVRVZ7fG/l90okudNxPChe3WHepxnn1uaurHSBnsgTPdkdHF\npCeUqAbR/LsK6aJpq3RhvLWQqPtvmmJicVjmbEUUoDLGH1lwC1pcXNhHGqYR\nZgj43x/67Hn7uLhAlP7iAI/TbGunJUUmPxTp4qGKdhrx2tEbAzSaz73KmNH5\nbTHu\r\n=ExKr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmzW1vrymCan6vZqciCHKAF64SaljPg1R7BJAGW3zgogIhANix+aBu/9EMNs+6sQoV1WTfVvYCD0BIo5qOvD7SHeWq"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.71.641_1571708705951_0.6696255563711273"},"_hasShrinkwrap":false},"1.2.29-canary.68.644":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.68.644","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.2.0","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.11.0","react-dom":"16.11.0","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"27838a286e565acae40b3a62c9775ef9fe307986","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.68.644","_nodeVersion":"12.12.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-SzHONWQg2k5vAs91YCGln+fnoS7VCxhTh3hTEjXjlSmP0iMOSbl/7h3NTs0gRbg09BfVrrS5BHqZzGso79dbrw==","shasum":"2f020868fab46984c7ac3733a9f58976f2ef1194","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.68.644.tgz","fileCount":24,"unpackedSize":67738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdr3bICRA9TVsSAnZWagAAF8AP/iD9+VwMSZKcUFw288Wm\nrTCf4yMnHx4LB+CyocNgiGnlKrIRXfCaW5gHJxK+hha26Oi30KVwqd+zNLJA\nH6FJrtengYpBzJDlzLqy3rNdG/vuKlEKP5ePK03BQn7nQIv4n7AKlg9HMhQZ\n+Dzra82r0LVH8sB0ZQkRspNCf2OKpWCmtnO82Nj0LQapvroq4xplU/uIyBMe\n85QfLY1pZ49Bw+pIDFtPUvoisIJMix9PcvleDy8Z/I9G979n1Vr3lMy0KQqi\neY7DsaSzGn+RPFCsDXABxJUSTPZeFK1Q/LITWGjYCzJFYHG5ff8NOPLzvkTA\nEGIS8TZAlwQr86KM6GkReLuK8o3M6vT5/TDnipTMXcsaeBdlr1IqL6jH8Jwt\ntgzEdEaA7GmlBpNE5x9LTytBR59P4L3FhdvFygRqKdREuCkc7qSI4nLJdvQq\ngviIadYyAitVYIsxxRRW87gT+/cznYpzSA0GBuHz1cln89Jx0+Pc2FIsMHBY\nP7H3o0mVJTQ7Yc0ox6Xl7ASaeRbEAiysFu1rYZBjePyJ3t6XuBMn5SpT/hOO\nwiVCQlE1Xw9TE8Wyf0kgmX2FDrp02ZVW2nk9wCX2+nrtmBbyVHDqiKW8y9WO\n1Wtt1E2ZC2KLdksH1WaoT1m1vfQ4/gxBh4WOR3cMBFQV6iXsdUtZ+5Sg2Ja4\nAbuU\r\n=mEqT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFYcBlU7IKc+tUc+5nImWi9OObJMc4Vi1UdkPc4gCF2PAiEAoC+xwTBgS3ksfdnujJHT4gBcZsmuwFARjfUVZyPORtQ="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.68.644_1571780296225_0.9763004297344451"},"_hasShrinkwrap":false},"1.2.29-canary.69.647":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.647","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.12.1","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"64c117e7c6caea2cab2fe9b3c9d067322e04c33a","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.647","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-Zc6Ruk9ycwHGjDEoYn3F690+z3GpsnkQktsMJvUdi8ll/m+BtiyTD7NaFz5t5BQElKQTF9cOX/XuUNWrVPg3Gg==","shasum":"19f090d2695d5a81166bb258d14e7af45c051903","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.647.tgz","fileCount":24,"unpackedSize":67739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsHQFCRA9TVsSAnZWagAACBkP/RacO7FVjvlNfz/v3uPu\nMyLu4xhe2nArqpCBPmspRd/Yw//SQT2mYOjUHjWckyzZyIldgYXp0m3pP/Mz\ny3KKYfmYiBVJwZGg2BGhoqRAV4Jf2zTU8slKSvvwWO6LQ6jFZUgPDdLjkenW\nPnG24jpeGQtXulhFAW0nyomKTchtSgO26EMv5firu9oD0BrMkZx8w8VESpWh\nTgB2sC3ISOzSGIsUJ/xw16cSctDKtewIf22gn1eo1NPv9YVWeokUNDZMozgS\nMXfjqAeVvPxl98WkrZLFuxHW2vWrXOEOac8IreMbO3DyasbBEBXxuQZJQSjI\n8CITkR3oTYWOJGIYolPza/FV+WjTgQFY7olp0lL2I89h9SYOOs+5/3qOUoHe\njkuXNHgdc0aZiG1ENAzRPxh1iVf8dKYE8io1l2CPyd0myuuxVq16ErI1esYQ\n/DkLAEbIpn1Kc88IverQ5K+XeAXLNicz8smW/jor848pTDA/eHCzSYsuARwC\ntfXsORqq/tXuPJsl0ZihPVNr+hp93CzIth9zmS/UEd0kMCqx+b+VYGFC2Eom\nDq7UsyuFvodc2n9JQ+waFBo3njxSKN1LP7iGt2ILuXjDS4VF5TuNIRX/D/xo\nOc4yXnPfu9+yQxR0ZplQ8ayyeMtKWxKnLZMdCeDw19G6hy5xhvEXifP5bv/Q\nItXa\r\n=n7kC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgm48v7UEqOT2xwEWf+38h82fE1HLxVuykWN10vAZd+AIhANDatFiX9OrtC2FsrOVYfqFJywI/LoU/f2feKsNnkwbY"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.647_1571845124337_0.23909923045271042"},"_hasShrinkwrap":false},"1.2.29-canary.69.650":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.650","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.12.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"89c445ea46b1a7a04f3122bd15b75f0d823dfe31","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.650","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-svNlhap7MVm0Oj+t/A8qa9hfkR6xnqbeklRxom4g1d7XaQdObtIWqgZKFHpkQjp4eI4SXim69Kj8ziJUUHxfuQ==","shasum":"c48594545fda516f11cddad138eed49590be9960","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.650.tgz","fileCount":24,"unpackedSize":67739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsHq0CRA9TVsSAnZWagAAwmAP/2Odx09fZ21X7RV0efbz\nOxhaclNqgaPN/F33v3LUWQpyeAuJ90xJDg9XKzhcivhnL8B1p5EYwp2f1pfW\nqtMndg3A32KMFH7gU17GDXfKSL+xiJ1AzQNv7HcfE6cwiPNzq1QiyhGVdOBT\nD7fY1HN5KuyI/DuVgTd/oAcZq1XzSu2lIscCT2x92Lv4j9ypDzj7nEwgO+GC\nMCe6MdfgsxxzZX3PVwlMGcvKi3gupJaOdkXOHgG/hubO8czGSwJ7kofbjSlk\n4tHmMhSwKxlhYVNGg32iIIU8ZI5HbV3NdNMYlduYcSYXDYYykN9M4iXVBita\nuiGNS4gCbifegU+Cf6CW+Rh+7WFs4QTLwDqRR9vdDF6NwKZ7dpP/nZAP9lSL\ncayuSjX+3Tp9c+TZnw7Ut/EWSQUhWt+A8aLly2+VeLBq8g35gukonAJTeRdo\nzrQujtmhVXsytCsC7YU2QqDWzYZZWZzpdJPNKQeicG9obZT2hhRfECiddNy0\nA//s9sFXeskqY6B5uMO+0yVlY9Ufztq3L0MaWcp4wfl6D+TYLPLMSDc8W753\noYSEeCX3WBcU6iOfuikeklpWA68sLW/OUF4w1fjO44GJTawTIC32h/PXRbdV\nDrUxqLYQ8Lk547sdjTRFwPZQT9rZlVtSxhiBIOpSXgUjJ5B26DKGHsod612q\nZ5dm\r\n=HnhT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBkRqkFHT39qykG9xVboyrE40x1rLcy3JuaAYZetdlokAiAmJFGT6hgbfLrFmvjt+nibahkV8vZgTkTqvBwRf9yp2w=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.650_1571846835627_0.8630320731687036"},"_hasShrinkwrap":false},"1.2.29-canary.69.653":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.653","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.12.3","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"68769a88ca29cabf14be77cc116849297defda49","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.653","_nodeVersion":"13.0.1","_npmVersion":"6.12.0","dist":{"integrity":"sha512-QiKOlYtjpIpIg5ZOHTrA2gdTk97FwVuzCK/3lbR+v0FSp+ZhWQwflkzfCvRenW4P28K+zoCmt5doWBCnAMkGoA==","shasum":"26eec06bb8a62b4fbbb0eea40127985c40d1a65c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.653.tgz","fileCount":24,"unpackedSize":67739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdse3XCRA9TVsSAnZWagAA68cQAJRb3RSiR65GfH/8ODZW\nA28ev82EVG0NNd35XXn68uoW4E8h5G3PCmfAJ53ssywuApJrIk4o6MM4iKzs\nKcVQxG5DdaaB95xLrGNn6oZPrjHV8SsG7rM4wWk9RmlJZM5J697sYF+INe1I\n9ZBnHMH5par1mUhhirMRH3A2lzd29pToLrJITv7MC+x7HdMHLqlLPDUw9Rrw\nxRNMKPBkWXqIOcXYPFc/EF6PqU+qJY8WKyQWWNVgzBihxcwJxctSdDIURwK3\nBOLcue4Ds1DaYNt+qRh9xKRxvyityiL+Abjybht3Hl9MxD6g3YCB4ogmSu88\nrRzk9fSBEISMqAnNTg/WQwh8KMLwsmTSEIeI5ZgjfZuDk6CydMQ1hXl9aQwa\n9f8UB8qzigRqUGZu04kYGL+LOq7ROTCGr43i5gW/tRRFPU9+ULlNMSY3r4/J\nTfburp0PgdXT1ZMhU7hansrxNZJ7zqvdt5Q++8tAOG0UXFFkBR8E1BBUjUMU\nrAxWK43+zUI1VjxP8Havogc1xvtqfZ3bVloFeWQ1o61xGa/ddDqFQMg8EUic\n3FowNz6f70J1fmTq5vA8xKkcEJ3sCpGFkRVY1Nb7vF21NTG0LJWe73Fg21o8\nqcuCLofVZ5fdPgnC2eJOX21Ni4AVPUYtaVohY7Jn0uhALmhsovlcT6qXwAZ1\nmx15\r\n=yx6w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwCw56sdekk4/zF5+lQTqmWyPlESlG2KI6Riz9GSpSswIhAI5i8Ga9KF0Df31O+fumOkTQe4HzE1TQ3MeUAb+PAzeX"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.653_1571941846569_0.355271451648012"},"_hasShrinkwrap":false},"1.2.29-canary.70.658":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.70.658","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.5.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"e67803d2daf61d482bc016391aed5592f15a5d75","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.70.658","_nodeVersion":"13.0.1","_npmVersion":"6.12.0","dist":{"integrity":"sha512-F86Qo4fwlhgMm3mrQ23+YHt9/nV81PPNC24PCXsMbHhjS4bpIzRZz17MEA/yx/xeBTGqc9SeNaibZI2CJfncKA==","shasum":"e8a444b907a52344e0c467395317702f69c23a83","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.70.658.tgz","fileCount":24,"unpackedSize":67738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdtHNSCRA9TVsSAnZWagAARoUP/2NMRTsc5ixoebHdpZmj\nt5Zf/ImQVh6wsW5NpAwpx1fF5ID+2MitfAUUFXa+jgs+yFhB8zueEsqyzOFi\nstnHiczUiNooTY42hoYmoldzr+UWjXHnPxlFhhLHLPdwAlzh8zLuMNRwdkRe\nBGcg1Gt7DVK80FSGOLh91RViYNGsv2Wdlw1ZUiC4dkGK5Ga9+OAcvHqTa/82\nKrhCDLavAkLPM4FBkBYMnZpyDZPlMFNIszEWcRfzboB8tWv+Wesx/pzZDLTN\ntcMqscaYuz6W3LCxdo+LwXgUZxpIXlbjw3qaWRMxJG4xMBN57691ef2EsrmX\nsgJWJ4shuaMZc0pkEHl+t3OrlJ9Tx01LZllolCHDVlf5OHuJqSVluBPidBQL\nbjHJPBkAtN/fvhs3zL0f4GxTkBWLzpYpPg8dWkC1n5AP2RtKQz4SVoRzkJju\nVA9ZsYNvB8I73qluIiiSxTEMLU9NxKEysdXVzMxg1Qc35TWu+yDo/WfSkQDK\n6Fawirzd3/eLss75XaK7aFl6PxuaTp6ibn6HKnEMPiSo+7v+sQwebK10aiZC\njb1Sr4BWSEY+iMup69SR73D/Y/yvUATkujGS5WgqH6XpUHhQW4L9wbY935yu\ngyTynmZrlLaWJpZc3TnloJvotAYo2QzlaU9Ek7JpnRFyme8QwYHxH7442llB\nFtWb\r\n=Nh3Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHVgHMgLlkP5IVbSbFWKXTvb+SmSfXySGsCC/cG82131AiEAywTum9Fhba/nQfRDAZVvDBtKnw3TxeoUFlaefmBPt0Q="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.70.658_1572107090486_0.015748511974046586"},"_hasShrinkwrap":false},"1.2.29-canary.69.661":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.661","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.12.4","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"5824b15a50c7eeb602ae03ec37fea6589cb93762","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.661","_nodeVersion":"13.0.1","_npmVersion":"6.12.0","dist":{"integrity":"sha512-NxC7uWKVV9+sgz77uX0aiG+7XYd3O4pOpPP9FQaJxV1YvWSJCMD0G21HGNCcr0Cv646P12RDVGDWCAnuLBCiWw==","shasum":"34eadd33abbc964609c1f0847620a0c0da5fddab","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.661.tgz","fileCount":24,"unpackedSize":67739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduGytCRA9TVsSAnZWagAASfwQAItbrpSl2ni4k/EZs/jA\nmyioBAzDo8erswmipmhmkjEXgiThhvZq8gFE+DxfRnYxnMNxLO1P7tAJJNq+\nJWsDiFTfwVZWNjmosM5LGHAmJkohpj3vZCWYGLNRXP7luB3d9g3DtdRda9TG\nTeN6Z8KYMM+pOdXSt3vlQZFfBvyDHzuDVmBHv6HVh3aBRvkiJN74cCFlSf6z\nS9F8EwUMputncvsivgaP9DpBOvX+jhnl1YuR4zlT7HDfOMJUCfRh+h2NGwUB\nXl1ACi9lqHXcaw+xI5GZ/3dXhHWx3T/yf8u+Cjjtv2BFeD5FDmmUvwdihIwF\nyyNELR+yWfR5DPly4NgxSfJ2v2Cb/ImBkUKKkG7OIVH/b+QYuCqOKAF53+sL\nEB/XRzCqB8jGOWWk47IyEkJW/xrAzys2jNvisGXU8Uy+ZzxebJsxvHpvjS3q\nttuUUPEnXlPlf7qDA+KYh3hQgS5LKhy6meeOOukjRUOibd5KtW7UOxHl9RB4\nhGOvEkYmrE08X6oijaSjFqVL4eYnI2fMEU7g2MJeSuqKKUJxQp4XM3P6Sq7b\nv5VWLhZ3TjadHuMl7KhqiP5Y1X/GEXqBZ3naLqsaGS/ZoGguS50b+qMGhp5k\nPbesH8VcyI5dOmJSAXmpKtOSlrJrqEqil1CMGZslCXbVDiwO4cx1+KeBWoxU\nyI2b\r\n=FJxS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAIViY0RFSuFbJjTmmZ22m+rpOjFlfVxK96fE4uWJOpAAiEAz0sVg2DFQFNPCx859wCh+8LzJ0tU1saMGdQEdc3leFw="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.661_1572367532666_0.6663366324673385"},"_hasShrinkwrap":false},"1.2.29-canary.69.664":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.664","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.12.5","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"4978c097a255b276aa86c9d23a932b06bf00292e","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.664","_nodeVersion":"13.0.1","_npmVersion":"6.12.0","dist":{"integrity":"sha512-Rjv+FvBtUnSed5zNSI8W1GN80EHJcgCxiNJrnDgNS2HLQjWEgu911zSm3VoxJDYA7iaGNFCNxd0p/3yrv5Cyhg==","shasum":"df9ded003c17cf3ce531ccdeb13138bd4e558133","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.664.tgz","fileCount":24,"unpackedSize":67739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdubr8CRA9TVsSAnZWagAAlj8QAJ/Li3ixD8FH5WRO+HvN\nqzFCMr3C2orpbwHSiuFlkC+h69wf9fsRHWto8efp2mMjffma3HB7tSFDIlXd\nHFD/XHlKNQXLm8Rb60a67pslVvQJxO/Y5kput/6FePmvd+H3FtZkqa683lwM\nYSBX14Rk4h+nGY4Jd+8zmIfadM8aDkP0JHJ3n7vHqOyk62iwD7vmwC3genQR\n+dqlolwQrSAnzsVBX06iAqEIUpYeahZmLObh2AG3pLwj5/K4525X3GSnKYC0\nW4hd6me3Eolt8YwSNmM7oA8GGyzRja3ihRNO6R+gqiMJFkeuyaKnyQOriVuW\n39lBG7upZ6xODmpq2jEF6CU09O8Y0T4vSLo6n8lpAP/G7f046zhQD4ZVxgQW\nrjX2F+gqJ/zFWNLJaBgiD6cNlgrpV08WzEg54dSJuh6aLYoQ8eGkLzaZ0ERX\ncrSwqhhcgLqTwkOqVGecFNYsxdkTPUK54bvtAoibXS1a5PhBv+0vXGMeNyJb\nrFiWxu16kGRhtFp9eFrYfL8fyX0cD0/Z/+ZOkAiC9vvnQ0FNISwGflizNuGP\nZClZqsdeHD7GbqWVENtlF796NQcx7FqL3BauRtUhphFuGc6AwU1bUdSVZGoB\nE7raMVbhXkh1zNajcgk4h9Ba+WXSF28mR8LZLwEIWRsDX1FGQMgFpFxr4YAR\nFmiJ\r\n=f9OP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFyVAs6XedJm1dOOpO1j+PlpdprHd6XCqa6+oJaZuRNQIhAMO4c9In/26ukoz8TS0tolgx9EGY/giWEjMIUgiVNdgo"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.664_1572453116116_0.5538671378593001"},"_hasShrinkwrap":false},"1.2.29-canary.73.667":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.73.667","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.7.0","@babel/core":"7.7.0","@babel/plugin-proposal-class-properties":"7.7.0","@babel/preset-env":"7.7.0","@babel/preset-react":"7.7.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"9402874b83503550678b753c818ddacc51d248fd","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.73.667","_nodeVersion":"13.0.1","_npmVersion":"6.12.0","dist":{"integrity":"sha512-VS1aArNrSqXbCG//wT3nrzPVOx56Ailk6n7lU1lnG3kWcuoH4QZ9+Cl04+rcQnLbR2oYb4BGZUJi7wZQ1kRHHg==","shasum":"91b64688b428d6f6676b18fe01888c1304c2f30d","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.73.667.tgz","fileCount":24,"unpackedSize":68702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdwV+zCRA9TVsSAnZWagAA3QkP/Riy2s+nW9hH8MY/AsMy\nU2oS4eVlljy8K+tPjgBlUqo2cugdZz7EtCEyTfcnG36Iy8JyYMJkiU6ppuTG\nFBHJyK9pwEv3XDQ58CQ0+JT6XQrd/NsjbQUhD3WHeWpg25LmvyiPihgaGC5X\nPtqyLz+Bef416is3ksMv1K8Y8hSy7mzbchS9vERILKKC2QfEh4EC8tg3jOoZ\nLtWBZV25NqVnX/EQ6MS60b01SlUedOXeeeF1Y/6TV9sN2v/g+iXG84tP/Bmb\nCbimhCD5CdKHQ52vvfxHQNS/eJaOec4cSKjed+d4xm3E0/FoLvtsZA8Y8hIv\nwufb8qwVJKquKz6+t7JIvmBQU9UqT3MJK30UnBfZtaqr2YKskjD9ohVB/OPz\n2eA4AllZDi71ahjHCp77woyRl1bmSDMQ8uV76pVXWsU5JdnXPID0uCNHBjO1\nedBcEkZt4zHOsaBARBJ72WQWwQRY3pXVe7Sw5+9k0g51WyAcdInCjILc0WxD\nGpXxVzX34xSZAx3KWFNCWxcQOGODB2KVFcd+NA8//cJILLn41LBr8yjcFSz+\nQZCpKwGODwGLV8T1/SyXLWNLloo6dXfTlSW/l9drqqfspzrjiGx3rw6365Wf\nDYlYf6oz7MNr2YdUq6x+HkxovSVkfupmqviwXxr3H9YygbX5LioSwDrkuJAh\nbpuI\r\n=YK6c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEI199KBt+6BF3/0JSzoZJ1fiVGMey/ojnRq0n9V7SVJAiBPgH1Fr27kb17ikO/o2GThdJ7hhxzkrF3MwmRrmDxHVw=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.73.667_1572954034638_0.21523851346442546"},"_hasShrinkwrap":false},"1.2.29-canary.73.670":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.73.670","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.7.0","@babel/core":"7.7.0","@babel/plugin-proposal-class-properties":"7.7.0","@babel/preset-env":"7.7.1","@babel/preset-react":"7.7.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"18b82069a331811744427422b544b128f792e8b2","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.73.670","_nodeVersion":"13.0.1","_npmVersion":"6.12.0","dist":{"integrity":"sha512-l7TwM7qV52mEbt0b+dmj2HPEOasuRqhx/ULyR1xg50o+4OwA9yJQ6p8aanJpYpx80UXyNWe6zXEJE/5xFT5HLw==","shasum":"3efc6c1a86cb53cd9855154a2558a60d3b68d05f","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.73.670.tgz","fileCount":24,"unpackedSize":68702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdwX5MCRA9TVsSAnZWagAA0bMP/2rko8K9QHnnpd+v0Tp2\nMW7jlEWucFRJmzv1SyrPca7Zs2DbtkeyjsWOaJpNiir7nt5rM+qWPjIZDArN\nSTtPni7pw9XFWUWZBVdPOI0GT4Z3q+sQrUWJZOuTnUxB+Yo0viOFm/LvSz0y\nO7agtErD7Wcq/7Bl+NYsyXcTviyDNBRJL9gXSVp3sMl3q8eIX4BHcQJ3g1wN\nIb5D4VDXqBSzcHvEk4PACdD2qGeRhKPOPbKpvo88uGw+ZmtOA13IhWrLa/eL\ndh852ZCladSEtz8jAi9O7NWihZ6eIcplpptkyfkLG0Myo1+XPmU49z0jkJ+d\nk5GVHl63jF3lnZ4CZ+gnWZraXuWxb8cBduSwn0dWqFs+khYTZFlAv+CkgKMu\nOW1V3VtfVN/zx2JLhvERH1UDp22sanLEyv5ffecfIZhxkDPO5aXJgS53PWZ6\n7vglRl7Kd0mdFK5Odr2z3GTPtcJvpI7Icr92qNNg02JT43Km7w/TTsb75mym\nofC+qcQszyfVKCAD8TDpJFddYURmVAxaDuEY/Pl9Ct22mamsU5F79BOHMsh6\nTA3sIeL/mU1Sl0fKktDoDbeOfxvJ509YWRVE6zrKtOvrBowr3dqkN8YM+/WU\nJYZNYpwy6KtUAg71tgLPFiCweEQFLuEtikD2s79IhKI4umKPSfO8Hnby/rM9\nyu/X\r\n=DBLb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIADUjGsYjuAkyI0e/+vafwf45tXQ86yduYJ31YlZIe4NAiBaQ4zndwYpnwHFfrX+DKvJ0/bQGySK5/E7E0SHgwCHwg=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.73.670_1572961868315_0.4646133683651592"},"_hasShrinkwrap":false},"1.2.29-canary.69.673":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.673","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.12.6","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"0b78ba774b14b4b29a5a5617da6c0b761eb0b3cf","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.673","_nodeVersion":"13.0.1","_npmVersion":"6.12.0","dist":{"integrity":"sha512-LQw47V/7bkIYf5Gyfd6FWH5qBFHrZ9q0GzQdhQfQOkq6hdF+D1ND83wcrW8WAzAOJzVZ5hwn437bXbNWFi5WuA==","shasum":"513d828f5ac79a28e945ca5fa416f8c5ea0fde21","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.673.tgz","fileCount":24,"unpackedSize":67739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdwd0TCRA9TVsSAnZWagAA+Z8QAI91GzuEUwvEMA0FUMEb\n7fxjyZy8QrNy2RjAHDLmGqdaGP+eozQCqqIPh7RPs7BsKdXg7HEUCtFhjOm1\nBS6aB2BqFYXUUeak3sszbQvBX/qaoWd9zYiA0NpyMi+IiG060FtM4GCT7QNj\n9cOTCueUq+eyzOpuhALt9LJzPACj6vTdte91TRRYDc7E5xlYidp+OmA8MXiI\nuKTD4ipBoaAmIfzqoa5ltdnoa8/yg8ZMutgACHL0UzrLcWlvS8fy1a03FoLr\nuuCmU2aY4YJWN8PspmhWFx7jxzAAYjoWdMJpGM6kClhA4zSQUSWEWR4ZDkRj\nfMy6jDxUQD7MjQ805stOu7aNL8HWsQMN2JOBt0rTdYdDRPXleTPqmmtKFK74\nL71+R8+VDc7d3zZtM2jaux4xnK0QiCHTK/+v1ygbmfBPoM21i+eSwT164DOH\n26PvXIiOZrYp1m1g+LwpzqpWmkNRFaaob5DeGL9kxK1AXmASLnxv1a5ANXJ2\nBMz7IZ9hdpuau3Sj0VEj1fGaMS5WDjFZHRQJqXA3hUypg1dIxUdk7424dkO9\n+gCqPUmBwuX6EXkvHDIFeu+qtqB4IgfEThzP6hMDUDZ7+mrNXjAZEEV7KBA1\nMxqWzt4HBkUCRdg5+Nvw/OWbJX0vNOHGUzNXjz9KVTIbFJRU1/AfzptOMWyZ\nE3B5\r\n=sHN4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB3Cz9o8xK7Oz9f54+zo/FlZzxZwBrLRAW9UxGIfEHW9AiEAiX1LhsxlELR21JIF1C2alH6OkL/SadGmUj0daeCd874="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.673_1572986130611_0.09184548942172266"},"_hasShrinkwrap":false},"1.2.29-canary.73.676":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.73.676","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.7.0","@babel/core":"7.7.2","@babel/plugin-proposal-class-properties":"7.7.0","@babel/preset-env":"7.7.1","@babel/preset-react":"7.7.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"5c4ba33cfc067413fc3d125ee402b280a99e7408","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.73.676","_nodeVersion":"13.0.1","_npmVersion":"6.12.0","dist":{"integrity":"sha512-W4dXBCbDOihNWGrUXAg3qvkBXVlJ5pBZaV8wPYKvd/P6s0VzEIue81+NqHKtePcFoHCGj1J2BIMRKGhBr5jB9Q==","shasum":"73baa64c24357b43a5d20d322493af3964eb77e1","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.73.676.tgz","fileCount":24,"unpackedSize":68702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdw13bCRA9TVsSAnZWagAA3SsP/RanVKKeGAmEMEJ+XHzw\nz7h19JP7ifqAmtLD39mTT/VtvEyyROm8NTrNFwccQetTk82WEBPKkrSEfuTo\nQ11tpWGwhDbqKob1RTWcqvs92JtvYTLoqaE0F+O/y4ye5KDbsPaAtZZAKk5Q\nb3kpZSX6fvxuJZ05P9sWpoalmyRKVLEBYRLQYP+dSLyoTeZYonfuUe4hkXjp\nGJYeLXbcOvEp7WPYTknQXQesxmBQ6kcx2HOoIE6vFg0q5fAmNoszckJjcPNl\n+IE+CQ3jx+Je6IhFXAUPZsrg/n8Ayh0LBSQBLguH2U5CpGbA40sUdioEg6xG\nl8IseIKVbpsIQjB/j7lp4SmIQvY0DfTY0qE01BTV/00P0UcynxPyBI6EqfVe\nmD1MgfYNtLEFgip7Hltw1sGJVg5OMrP8B60MvWDAS60kzyjsZGeCrElsd07l\n7wMVfwdBmPCI0Yh+YD8ekhJIXvZ2L2rHIBoUsJXfZhYqRl9Kf6JOsCjGdZW1\nF+ux6PJT1ugjorJNizraj1LKR48NjE7cWwO78NLqonJWZhn8VCcGHwzivPEb\nqaOR+0PaQ8Kr2ApDv7T0NG38IUI39ohe3mXh2W6tWXN79hSqhejzQnWYj8Iq\nNoh/txaIqFYDkN43CkXtYIYOYUy0DU4baOUE3y2FE+y4ciF2xcKgTEsLD8Pt\nbs4D\r\n=81MK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgjg61YbtoTykwfUHEom0Np2ote9f45JXEIoaoHF4/EQIhANz65slxu2nYeDqmG8cdkJsrn7DZqmKihGPrXDGKCm0V"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.73.676_1573084634571_0.894009412075415"},"_hasShrinkwrap":false},"1.2.29-canary.69.679":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.679","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.12.7","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"1853d1e073c7f88b6eeabe51cb04d2ec18ee1839","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.679","_nodeVersion":"13.0.1","_npmVersion":"6.12.0","dist":{"integrity":"sha512-KPwkZu/lf47l2cW98zonx5IDrP7K1tLOkpBzRlCH2ygtjy0zFll7W37C8iSjC4Mx9dsoELS2fBp8aKEvzdPRxg==","shasum":"939c8c1ac1555d882b6bfde100c59d4fd5308bca","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.679.tgz","fileCount":24,"unpackedSize":67739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGfMCRA9TVsSAnZWagAAP7kP/Rf3Sr3tv0mOEFtTmO46\nAB6FfFM7hf1EU4yUGbjRtU2peMZQAY2nAks+EHBOCyr1les7bSJ588oJXSZq\n9GNqCpmcEHgYrRDPnHgiY5Av/+xq+cdmPokIaPuXV8R6N/AhNkLwWOX0trQR\nqVCVcsBeK/fSOEWuLj4G2TaL1HlHcAJUW6k7qsOCId77XIWAs3B7OUL5UInS\nX6k/zwIbTtavpjriO4As9szLxq2d1+ZYV7mRbvl6eM1r2Io7uEdMCUQzWRfj\nniV1BlNfolHiggRIVImzfdqjkcubu/Bb9pfSccc/CaJxJuXn/p4yRot3kdP7\nJhrA/DyIAJEudKnGh/Okpg8VjGUNgWmt3UWH5vPFH6WzKp6oe4wBGwblpxAU\n/KJLGhpyng+UE85rEBjzjPw4NUFuZ5pHO9qDTCHo/q/tThK7Qi6YyzEjB3eQ\nKQyV53eG/0yIV5oZOYKNu5/8Jk9vaLItENpmk2mJyfDJxn8Ei/Opd5B/zYa2\nlCCgdPCiBYzbjx0rgBSg+bujRoPlZ+Cc4DllECQTtsfCNGcT5FEt9gRzSjPS\nH0ULgR6uyWN5OiCQof0JXZB5Hi1GbD7xLNkzdrtNXlKzizRotKlWtu9CsXgt\nZVYmjtjteFNMkj38tQnnRz4349ez7K274XbQTSOc3M2I7t427Z0vcdnLuq3f\n+SlF\r\n=LxtR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2UXO1E1ft9ecbS7lMK9HX4m3/9IJK5Rv0aAU6iQPg+wIgFvBuETIIqfMg1G4X9+bILUjFXtHIX8xZxfPTo1sSuHg="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.679_1573152715694_0.10683751551282117"},"_hasShrinkwrap":false},"1.2.29-canary.69.682":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.682","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.12.8","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"492cdc1ebfa0fe2d2de824f10c5471439b755223","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.682","_nodeVersion":"13.0.1","_npmVersion":"6.12.0","dist":{"integrity":"sha512-K5fOrtTuPW5KQlYaO+fuI7r8FyqOznHMtJVSQja9gWZ/o8o4xw+m5ZOAu+FSL7595nDsRHs6a5AMM7sp95Pt9A==","shasum":"fe19273637ea8c1cdc86aaa15efe3ceccef4432d","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.682.tgz","fileCount":24,"unpackedSize":67739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGp+CRA9TVsSAnZWagAA110P/1OBNRlpA+TX/zdxTp0w\nawtfcfEn566oWLvOhEnFhs7U3eCFbg/jMC/GKBfCmerPcNNj8oSfY+8vh268\najcZ0UYQoJ1/uHS1qCxQgOd6k15V/0MbBCumW0tXcS4OaQttYKk9t+48V6gy\nvJnMVDNX/PDdyI5DMqEQyc4RJmEKAihJ9FIErDrxsJPhSDIet/HPDJyo22Sj\nQ8u88UsnsezqYyrTg52mI4T+3dI9gpnbqEoPkYc+coscFpvpoUTMgL75yrOX\nKoXEeYZu/iTRnwvu4HYuNuAx1Yr6QSTyFjLnr0LZ/Fm3+gf/46TibLsbjWzc\nnm/LGU/hY9VsJsN+xumPJHV6aF1zufzaN0oiZa9hiKmk6N1KxNptK8d5v+wb\ntzcEY19nwVMeoqDecCun+PB8pj2CsV2R+FQ0ji1vt+vQkZE4NypbfNUDOzvZ\n1sOMJ3QX7qYPAWhqm7NUSlJj9Avu5oVZXNU2s5ZRp/DH1HJ+HA6nzCmvpj65\n59cETMkrxVmT0bBXpU+umLojUck/if19UTXV5t9jKqj47kJPIKaVhqwCRb3F\nWp1mn+/J8TUQe7rOIp73SuQlEjit7TIT3UdmOON0L4E9wrVKFyEi9rtKifq5\nIQmUU/ZOLsECZnFxzMjzbX78pHFFqZs9XsUYkQxtD0W/9L/ZzwHzCoCX5jk3\nSXCz\r\n=oUTV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfAveWlq9gFQx/hAMVcAYb57HMsXgie9yOe+tfhhnbMwIhAM98Gm3Cw0sz5jNCZKbZm5nA7tUt2d6c0OLQ74ZR/jZZ"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.682_1573153405860_0.3198596557002149"},"_hasShrinkwrap":false},"1.2.29-canary.69.685":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.685","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.12.9","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"7cf5f430fdb1b239fe7fe4ca5596be5c12d333df","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.685","_nodeVersion":"13.0.1","_npmVersion":"6.12.0","dist":{"integrity":"sha512-xYS82z8XmIidPFqp0/9krPMSyf892nsCp1GGWhL0e9QC1fwVG/UshHK3ibEkL+EahYEbPSVeK5uuHv5CQhWfww==","shasum":"998da5e76f1358275486ef4c3e5e92c0e1e55cd9","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.685.tgz","fileCount":24,"unpackedSize":67739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxHUFCRA9TVsSAnZWagAADMQP/A57PhexdoR83xrplFRi\nsNTKT3p7SYSGHv8hh3LufYI+tBHmUA4MH6FCDFBCjm2xLYRuPkwE5+S5rBWa\nYafyIvvuHmFCPuO3ncbATmF/GmjAzy1P5LFRj4HiJuM98nV6GJ7XYcjX0bmw\nS2wWPhcV9tmkc7yJvaMVjmRRoBvVm9gcQzMR6OW0w3QaJuNUJ4s4FNpuhH6t\nIjLXrLnR8OmDXL5dqa8QuBKr/7GA4m0q28AF6wb2HRtTS2OA/iVP2fsF8VSq\nePu0m2bJ/oal6nQL+b0XgPIGXXO7eiauRGyCBbA06dr9lUL8RcPq5HwyxlDF\nS6DreBGLBSOJclyprS97idwDGTS9LbiPwpswQoXE0wwfKeK2l5lrmzK5vJlm\ntXvC/61+DtL1/g8klRJ9cIC7OGixcDEpRbFxGA4sAS6x5BemxR/M42tZe2hq\nbyWLyU9xzHo7C2pscwreU2LcsJF4qSJe12DoVhn6L13pfTOv5z5EftX/s8zV\nY5HDFbqrWB20eEOsNvaoXdIWSmfo5cCeMj5AvAXV92x+YOQYMClCOIH7IQg4\nZGIQhOrbJH8GWpK/U6A6wCRoU/2R65iFivSn+3hpOe5g84YgKWtG3AhFr2sW\n4u92iim//w4HNVekJt7ONIpko+YWHDrVmkEAE8NtopmA8nkFUmsSEej19ygD\nK+AH\r\n=qFuJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkXJPaP7KB73ZsE9zGz3AhudkcjiFo6udlB+33SWXKBAIgBiuS68au6oWZrA6SeYTic/lIQLaXlLWtH2CzXvLiOz4="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.685_1573156100829_0.045732607329611374"},"_hasShrinkwrap":false},"1.2.29-canary.69.688":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.688","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.13.0","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"3c270bbc4039ed60a1a03ec09d60ddaa0cf2e16f","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.688","_nodeVersion":"13.0.1","_npmVersion":"6.12.0","dist":{"integrity":"sha512-vgO6bal+tK5us+3QZDiPh3R7+YxtkyXC7lcvZll2w6313MI5xudnKobUdnrzXdeJ5/wImrTPNDuBw/iNIw/K3g==","shasum":"ce9484b485352f78edfb6d623a4d98c82ad353b1","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.688.tgz","fileCount":24,"unpackedSize":67739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxJ2uCRA9TVsSAnZWagAACN8P/20REKipDiW+Xr9hCul1\nT+8hPfX++Rq/Ns2aLKmy6IR5Ik2ZETQ6oyY86xlG0ujVFA4/cns4+HTLEj+5\n7sBnHHA4U3rxUrx5tVuoNac6NfkddV9Wdud9lZGZNcj/8OaG5i2xqKlOidVf\ne8lshyQ+WhGj6DXcIsRlqBW0efDRSkplIEu1pyXQCeXtb3eUTZWnWhNBcWEj\nXxWTU20VJDVbSCelwKS5SrL12ae/PfyB8cah33MEu2/DUO3dU8eifK4rSFXX\ndRYT1EJSexCaEGUjRKuZBkjD53nObHKHbsHL3zHtznFPRW2Oqd6AhCq8NW41\nNRQDxASjEVzVWLyQbemCSAen7Zp47VjhSDB2GQwiCSla62ECTMGi74bIRegq\nmPff+x2JvwG6/3/llDk1UOpPCa9FV+F79pK+9owrDUO1j5UGNn3eXz3YUsIJ\ngyAmKsNOYoJR3PTsNHRNdtciiMbp80OC4AkWLCTwWb2Mw0c3s7HOd50YixVJ\n+7RSCUUAU6aD4bgzjGScbWfhfvJf+OR8f1I1YIkhyfJcgAWhjTuuyox8H4Sr\nQi3x+C9B27hbRr0s8/ZrwkdmKhtVBa3+gUicpLl5IX+CEd7e2SrXvhs0zH57\nPGj53F5xWoCvttiKJHH7zDyvXn3yus6N7wiTYJz+cpEqwNBQpUojG65SeKeH\nSDIe\r\n=QCUO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/YOiMQKXzbOWvFxTnOOqPYVkHb9rJRr6x3KUjZ/+bxgIhAL4t18lSYhPO7cALa91eBCx6D60Gz/bDct7BjPFwKC5J"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.688_1573166508642_0.5378049791192463"},"_hasShrinkwrap":false},"1.2.29-canary.69.691":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.691","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.13.1","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"0b52af4c0fef7c07e2fb6475fc98329f401fa423","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.691","_nodeVersion":"13.0.1","_npmVersion":"6.12.0","dist":{"integrity":"sha512-a6sSkVbbb+F4uOT6ZpFlqdj3TWNarO+vjxLdIqnlz96DcJWSUYhOJ/8GM4838GYot8ohBEIv3pp9ra3PHPN65g==","shasum":"761bd24bfdd8e4154e9008af48fb7cb92a1e88d1","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.691.tgz","fileCount":24,"unpackedSize":67739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxKpGCRA9TVsSAnZWagAAji4QAKIAeczKx08JexSgPwCX\nfJCqn1olUIi6RCxa7qSSfpfVCMHtSoECky+bn5C3EaxCgL+WIsMe8EhuzXkd\nB+60d7Fy/Ck5Qse40ITS2CyUbHZ96yaxaiYOaSkP3E/iYlLqGW/tguCC+Ub2\nOQCTdWyB3NlQXmNImsi58B3bFSztnorJDFs5kKyxLXq+mgjuw8hCSLAcgOle\nWMakJKNDJOzPnFa9hTfCHG3Tb4txYv2s1FcZcaRVLEPLeyVI7FkpadUxW7Df\nZ+f8YV8RsecRBoM0V+JKMQxX5kWkIUiQdCTsK9U8/QoOlmHNYa4UjCmY9MBv\n2c6Sz+JLUiTHLm6Qb/6unHyOuB86uqnYTL2PmwOa+Jb1LvwoQ36ceXDZ5YR+\nLtAe85yFxL/EcJ+B9lXEoqoKJaFjT1p6M+jN40v25k5HRpAMSvXJtZtc7rJc\niclThkiP7NaQFw2gHOdn5Nzo+Dw1G3bcJ1HGIcn/IvU3O1sBtJ8osrL1cqqd\nenebrkzQpCx4+WF+BLYMJ3PT7J7LURDh5ka14wrOUS2imgS4Y+0Ug5co8iXw\noiWZW2L5iVCbP9xfDoBzyr6YkMM70cbnJ1zRR7mngd+chmylet1YfP4ymjzr\nBPdcIkUAwwJjHC5dtjguHvCce9skGXbuWotP4Lam1SMUCho7Mnbx8ACpTIIV\nrQEH\r\n=kh/n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvEeVWZb/0wlS3Z0SdCWLP7p2KqhzWDttUrFLOB0Py1gIhAM76eEc4wQGlHJ/bw6oFWYbGs2Tp0UKi1IjSo/QnSXsP"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.691_1573169733796_0.7039554693264085"},"_hasShrinkwrap":false},"1.2.29-canary.74.694":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.74.694","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.19.0","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"24f53657e6dd622e8dcf02ace5cab9b490a318e0","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.74.694","_nodeVersion":"13.1.0","_npmVersion":"6.12.1","dist":{"integrity":"sha512-VbSypEE1BoOQ5BdWlG/AVsRZyvk6SXiiiaDlBmBDsShSbXXxLfTvI5eLjUQCKQ2HCDZy1gdeXdZIeGqCFadYcQ==","shasum":"3c6d97c5bc88dd32cbc17f8456085e4cbf4f22da","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.74.694.tgz","fileCount":24,"unpackedSize":67738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxglWCRA9TVsSAnZWagAACrEP/0sNmxur/rZbFoOhdBIb\nvgF68ZHuJbFjcJtD1A6AGxsV8pZL6/zp3yNAbHLthwXRpL3auhPUBumPx5Im\nUmN3jNXimVl5tLh4nLkiGG5BqYj+K7HGyvGgOgnnDKRsh72BcZiwZPauL99b\nl6GWLvEmSQqOXWz99ASjEXheEbTzroD4GEe4zhoWYbk+lkieMlGVsWUOALHY\nu1Zr6cvHkspuRjhb/fMYSk2wmZfy0e1MAV2lW20f2UDNbL3GEIA1LMAZ7eh9\nDxkslXDwJhBAbo4UjV3s5LBF1F/uU3P8bkmvP3ryQZyT/gnHjS/d66xPb8A4\nTNZJmP+kTvR7iYRaqftgpH1WrE53QUD3J36nGgUbGcxSFiQJ0Qn546NpoBfj\nr0akNWlYzOBLwZpeDNW/ksHf7OFdVjq8KTfCn2sjF69lhbNIU2lR9K+iKc44\nVMWHBEMxloOgZdhSAoojGusQrSeCZg+ZgWU5y24R4DpSaS/aTVrV+KLl2Hbm\n2Uxu/mbAX3ulJ2c1/w6Wa49EIqz2oNiOnihOz1bPBRAJj9GC+OvyP0uHQ1/m\ntLa2nXQgGs3B0JGIr9xRj3aQcdqZMFF9Lyfvm6eE+yGBj15y/yk48ZnLSOA6\nZt+xaDglyuuSGTst65mxg85NG4AaLez1iAjnhNFaDWgZwusy6JyPeNdfjfiy\nU0bd\r\n=S8o7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCb5Dye8VeLdxGN3dMMkrIjWdUqGk+N71i+Hu9ixfHTgQIhAOZU/yyabqDc6W9q2uuRTr08a+494CaUJZ02C+iCk6gY"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.74.694_1573259605637_0.9797196584712364"},"_hasShrinkwrap":false},"1.2.29-canary.71.697":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.71.697","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.6","@storybook/components":"5.2.6","@storybook/core-events":"5.2.6","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"af85589bc89c7a034ac0bfd478a9c864e59db7bf","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.71.697","_nodeVersion":"13.1.0","_npmVersion":"6.12.1","dist":{"integrity":"sha512-nO7hEMEUALeJtpwmJ7oCnQ8K0i/YbNpAzWngLBGtlrTHki4I3xgH6cUEQ2Osm8Vl9IA2NzeLyIc1P4JOBhziLQ==","shasum":"08212eb1d39a265d426e5de7af2d57ab6edfd391","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.71.697.tgz","fileCount":24,"unpackedSize":67738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxoxSCRA9TVsSAnZWagAAPOAP/0rnYDtufaT8YlPgZL/P\nPTkt6Xmq45HofEMjsLkmn7TGLNkDN4welI/CgoZMlIIlMSoKM4XWfDetsxri\nxJIEhPxaRxT4OsbHttyx9vFra+MCzdMBsGgamROgWzpW9t32b/myIqXz+jNB\njssaBCcadfP8RbLIy++y71CxhUVz7NcaDWNMGTJklpMuo+8uckEdLLR6IGg1\nzRKRWyRPo8SMmhNeBMUa06e6rbU2Dhixe7r/YLgH+sqwa7bdqUk+BMQl5Jcz\ntkQ2mo3AEmx6mdqLa38OqCd46vkpYKfVvaoMfGyZAIqJn5vtn06APV1E76Pu\nelW7INGVlUfSnw9uvI5CgEH1XPm3x8ak+bHOcd6eVXUp0WkRppGncui2VeNq\nSQGwgg1LKKaijBnPn8Yzu+urIVofTD/bDK1KBH8AZ3NAcmuasXHl78ocCmgH\nxTx16/4rJInKDukOdax5NlcZvCc5e27gfihEryX3KqsEEMC400lxKhZzE4wj\n1DrTKsIpM2nzy4LrfiwAOcWTaF5NdRiwYNi3IKusuhXzkbiceUP+nSbsGSia\neJPNilzjplZ28mGPwU9o/dGhSVbksGDnpQVeNoujJJI/kX5AQ1y0FtkGvS+1\n//HdN3qQxb8moPUYScN338cPOw1va2/GSrwK+j6ahk3v4gum3mLo2IMWGj3B\nNbXX\r\n=LTvw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBd+ze/ywal129a91HPyeRbnaU1KVI0s7Oe3lJKC33X7AiEAmcLyGFsGzMxXho1YbY0VxViR0UP3lIb2LRTkDGfp1jU="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.71.697_1573293137714_0.23794907220694905"},"_hasShrinkwrap":false},"1.2.29-canary.74.700":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.74.700","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.19.1","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"7621e6c996e386bb462e247995e287656a5fb6b3","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.74.700","_nodeVersion":"13.1.0","_npmVersion":"6.12.1","dist":{"integrity":"sha512-iEaW65Ql0i1YYwlZFvKyqbIPuTtbDnp82/WxfjgzyOogVjqdDs9sXv694j1nYe0sHu/pOyOmIY26Jfn0LBLZxw==","shasum":"158d5a891e45d2304722dd6e8365642d2247e923","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.74.700.tgz","fileCount":24,"unpackedSize":67738,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxrM+CRA9TVsSAnZWagAA/3UP/RM/2gNujhtHnpb8rPRb\nnJ3Kb2kUaifkc0au7wMf5C+aW7WOtkf3WIBBPJVdN4mdZUO56aZCxE6sQzw7\noObnoMln1KssZluroG54xckhJcV+LYZ2wir50QP3KK5i7AyAuotTcPzKkat/\nHEllMek9cFC5m77g8WO0RA4OXHJ7R6hdCqkj7zX4y/mzCvRrdjt3ufww4wOA\nIxZocOo1zYjngKKUQ7SKXnINKD3OjOSE7fKtbbjwP2/gnedFb3F1/lyh2Owy\nSn2wFtOkqczzntfi7mc0H1P83lVtR/YRQ023uepy9Dk1csZClSpxOuVaTY25\nJAJUaEWydYJrmMw47cjACojPRgfLTKEzdfP1Ttv294VjmkRIh3fNoqh4xwnb\nk7SxzeEzzYL3U2GkAX4Pv6P1TVTgOgfx6Crb3Q7haeaaKaTKQmvvytPCs2H6\n6hjLwLNrBesH1X4DkP0CmhOLKeUou+CAQFtfZ2Eoppt6XlG1GnsVUfsjLIRR\nQCP2gu1pj1JhUi64V1IPvL4UMtZY3TJ7GaDaH9I2/SL4Tf34UfoQOh172dQA\nyPQUqa84BjM7nQRP682Gd2U0x3sQN8ROOR/yGOe2gKICTXrlswKJOIkgTDqy\nNQa3G0dwigVCWuByHBomsM4dpXjqE99PbEhURo6FZT899Rta5C8uxs8jT6gU\n5oPA\r\n=RT+N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDonQBgyoBQz0EtgB+aNidSfiHwxfPkZvmiBLsuUH86GwIhAIsJmSaHZxWPEtyVPeRHpzGdhY1U+gpiNAgtXzm2COT5"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.74.700_1573303102043_0.9453960987326773"},"_hasShrinkwrap":false},"1.2.29-canary.69.703":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.703","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.13.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"e92f9050429a27cf2e59b6b999503085ad3cba56","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.703","_nodeVersion":"13.1.0","_npmVersion":"6.12.1","dist":{"integrity":"sha512-EM3DzTsN8JqCc+WFt1knGsUWiA5NkSCx7Jp0zDJFCLseRQfgNkxpP14ny3Ev9/5zQ96HcywcdMNJCNVQawecug==","shasum":"06c9b8ad11cc0da9b3b2e060ad7b9faab9ee732e","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.703.tgz","fileCount":24,"unpackedSize":67739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyQ63CRA9TVsSAnZWagAAf5QP/0UCpOjYI/H20PEpSyTJ\nkLVncKWC2s0OWSrVSbCDUJzanjysD1GAoJxQMR5T2n6Vh0bu37PzNmLh71fe\n3CofmXSXU8gLeUqPqXv4R9FGn/dboyuhj6Qri8+zoOtyruUMYUuX9b594iiK\nJSr2yVFBuF+wVeoZQp7fysEOcUN8HEDfcKt1FR3A1N1ru85WVsvlYAZ+B8V4\nKxk+vH8NBL/hrSMcclmuX3tCcNnkJRo/xbtyOBJxvktyTr0RIci5gIqlcdzV\nFvlk1l+nWM9mrYsVKk+gVTS5p0ZMs04F3AKcUiwGXcFNvWIWfiJwFE/Q3h5T\nojwIKEzG5GJ/M6WixX6ajOXQ8ZzNHayt+isWbqh0Bx1sG/8JTpN/oRNNO4pv\nzMOjZht5l2bhg1oCuj9u3dF4B0fQVk0WUn1Abv5RRzutb0biVHqS7ElhijJi\n9N62vs2FZS3aY4NV3I4sdud08W7lPJtaYLSRHRBxe0Wi7LuGIo4yfxnvVLsE\n4VN59audAixvhPKWo6EoU/oxGfYJTAveYdLeOa+0ktDrqi4dGFci3r2UMiY1\nwggnQ6wDXPCZ8+pIgbXfHarI3SA12ndtCiuqTdi80ScuI3NHSRO0QW21UB7U\nVB1S31c6WaHP6XdKHu/FA4wPSpqlYnRnADpP3dafhAFa2m3pXGRwt9hACRiu\nnUbu\r\n=F7uo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAJvFVGz0LW1qoSR4RmNHvRrNVWQ/jexNryXhcS7Fzw4AiAt4HTshYny1nmmGa9l06XKGOijzL5BXdUAOhuZ2o4KTA=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.703_1573457590679_0.5184698977539934"},"_hasShrinkwrap":false},"1.2.29-canary.76.709":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.76.709","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"b6bb5b7e6abbc626e7980ee0282f601422c0305f","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.76.709","_nodeVersion":"13.1.0","_npmVersion":"6.12.1","dist":{"integrity":"sha512-0aIbEWyEheqq6jcIrqPwm2aCi1NUlb/Cem5u3gwsi0rmvH8RdqybLX0YWkvanj/yiNE/K5NCL0Jj5fdeHT8QKA==","shasum":"879e2820269d33c8667faf2b820bf3e4c649b05d","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.76.709.tgz","fileCount":24,"unpackedSize":69995,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyukCCRA9TVsSAnZWagAAmQUP/Rjmgv9c6RB72V+5trsA\nH2ns01J3BYOGwwrvLmSx5VCWRO5tE/SqNR++eFhzB8zQLE3QGE3/0b4dudaP\n7PYYGqihsaw0Hvu2kuQXxisW5FCe4Ps0D3OQG8pbHQbTRZMTucStpr/FFF9+\nFUodhXjh6SlrYLrrH7LXEosJ43mznd+sV6Qg/RIEda1GTr0jFlv8bVZ9vdR5\nrIZEsquLfxsoS5ECitRHllgc0K1Ge4XAcZ2LD4z4EAB1HHibCRR+IJvAHlu3\nbCGY97BsHb8L2n460EoiqU8Qaf678+gcbynKiceUiMU5uUbgXXLjv3M2AaG4\n8R2LoKsuHWF3gIqhCFPMpeBLvcpCCzRlUqCS1KRyzGXhG4QatxnQSUZU/Q+/\nQ+lq7Zu3+ZkCgszAsbGsANyxRmFudiI8nhNFIAqtVZGhB1DKiW5YqRzU71hr\nmuH2AQ6HTRAgLl9KAdKo9mS7gDCjTtfGVZutxWmjLP2H+uw0R7RPAhR3mISR\nbCDv54K3YVOCgM6vz6z9xuqw7SQLQcyuVIByaBuckpmulqeYAu441WkSrzRa\ndUrM494jvk+CtaoMa6KcbipKi2sqy7P5gdSv5vfJ7aModdz7hxQurO5HeRKC\nS8dzi7bqOJ4k6V1QyVpqOjkKlwhKHJouWe0aC5mUIMUk+wrN9SBggZgY4Qh7\nG1WJ\r\n=8Rpx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICx3UJaaVfUeoHXcf3aLf6Ioqx11Ub5rj446E5HTXtT3AiEA3drYhFjUfH5mEaW9j8xG9uyZOSL/1SfqSpi1BkyZig0="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.76.709_1573579010233_0.6039432638196609"},"_hasShrinkwrap":false},"1.2.29-canary.78.720":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.78.720","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK *;\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"ca5c3b175cbb1f517b09b37bc2bd40d4e17bc098","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.78.720","_nodeVersion":"13.1.0","_npmVersion":"6.12.1","dist":{"integrity":"sha512-jGXBbcXSRCPUo5suad6TU+P9AG9k45FeFU0g5fljqffwbjl7rvHij+Ya8tSvAZc5dhH4m1Ncll5HSjzY8flKvg==","shasum":"b22e1b51b6aad56674043a79f6fa222263a941c2","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.78.720.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyu8fCRA9TVsSAnZWagAAtZkP/1adQjQlX334dDKmQTID\n5wWmFnpfhk24+lTmq2aWsXKFdWPjQOvsqJ9nc8pjy7pIVdM4w2HrTIV61Q1B\nI00TJBVAbZnRIa4jyzaJaII/eKV3+tRTdD6vGqkDz28794r/cue00dhctnq3\nKNzzpYyqQpEaA9KYoY9p26+La4k3Dm2DvK0wh4Fq2/8uIiRwjmRQRr0rxM7J\nx3BCXVSFuRHTw7Woq8esb/iOYA4B6LvOQBdxUZPTnImCssE9OcT9vC9vhdYw\n9OffKSi9fCK2NQ+55dcv/9WFttjaplsibkTTllQeTJZm+5ilKVGbV/b0gZdI\nzbZIcumUWdDAJZPu51cmpR5/My7J+RsgZ3yC7C9JP2wxM3W2esitvWv/UE0F\nkyGec0x1o877W/0lAQhuS+1dmRG6BNi3xzDfBfe9S3JhpxZ9VxspCmdxzQUW\nKuIidFK3lsjNwfv/4VYy46eyPPYQYtkwXBRCNdjBu9FSuMwmvbBhb8bGi/jq\nCsSvhUmOROR1SEps8l9yoOJ4aoNHmrRMhQMaH8pEZCqDcgTbaqofx9f6bp1r\nB82NvQTLBlRdJ0O90vvKm7P+EZNl1NW1X9GZw2KZPlc3eE9jIqtCTUOJe/Qn\neicR45ufDmNgK+/6oIgdBm0/Id+gOmRyNfazV+vuYZq1pmO4wd7U+/qf5I6U\njQvr\r\n=4ZdB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoAHcgwLtGwUOP2JrPwYCJ0bFXm94Bj0CMQxeLIWawZQIhAKIa6OtNoa+EMWNBEwoDWECgRdeFeEG4Q1an4ps2Q00m"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.78.720_1573580574825_0.3048482351769457"},"_hasShrinkwrap":false},"1.2.29-canary.62.726":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.62.726","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"7a70b2639dcfd55ef998645acaacd4752aadc0e9","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.62.726","_nodeVersion":"13.1.0","_npmVersion":"6.12.1","dist":{"integrity":"sha512-LjicX+amfNrOqn0blkjrk7E/Pf61g0znc79c5hPxXGdJCpt866dIpn1z14qZCyvwiDgHoEZ8vwmgMgPxzOc3kA==","shasum":"32e105b45feef23337881a6a3497e5aa849947f1","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.62.726.tgz","fileCount":24,"unpackedSize":71652,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdywDZCRA9TVsSAnZWagAA+a0P/3xxWhl3ZOFxielQsa/d\nUN2yOsQei8/13iwVmFG+wEJSXX1vMEEMzeTnGk1mKSEbjs1RBcdqbPNSqxG+\nSPeJaywYye5rgSU0g6zpYb1mzLjq7EuKeMKskp5SV4aCInsR9ZP88vjLXLCe\nlWvFk12L8MJ36/Xob3AELJ6HiTX+UjfRZRxh3Gx2tTbsSYdmZOk2JAblr4Lp\n4g+oiAiMZ6deJWMW/TxMdgDxQIqjbJK7F2eLJqz+hXaKgc+N9BX6jnFjc2Dg\nL9mB7uIxXwrvGf1e/GOgHhBXpE49Blgona6u3UPZjesf6DiHrQnZg5iMNFLZ\nEw0VBCHDFHUeKy0TK24uFBuRLzqi7txyiwRG4Oc0rcqTIyBP3/cz9UjKtFt2\n9dsOEjzDv6QI7D4BsjlSJHu1tHjzmKGu/y7OI4fOB2MD7CMmUX7B+33DCIPc\n/L6iqaE0dsr9B9GOTdVf5CtS1k04Lh3rrkTuPUyUlRV4XP4/GgiKKSbtw5DE\nckdA4FD6CR5Oczy1VnrDHuILTpLf1CQLgLPLrwGjYTy6lRBuZZRdvj+B7Zv0\nY4xIV+AuzUP6+3mX/T5gKMc1Q88xDSG6yPS76fxLh31b+S5kMnqklaJzuD6W\nQo1fCJhWCWuGaFsTULaIN5r9KaEoxuv+kdgrHNMb9c1/51jzKUBpv9Sqgk0K\nhcmG\r\n=bxOi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgtTOUX6WPaykFDFCsel1s1YaHmNZZr7npKo6vw7rFjAIgep5Jr7cVYqttxRqjJr0tnukM2NR5/CaUB/9LJVaepPg="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.62.726_1573585113182_0.8734498783857914"},"_hasShrinkwrap":false},"1.2.29-canary.69.729":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.729","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.13.3","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"e1722ca21add96613b423d45b7dc5ee096062afa","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.729","_nodeVersion":"13.1.0","_npmVersion":"6.12.1","dist":{"integrity":"sha512-8aMPITMDPGGRH4ZAdg9Jyp+J/HW4PmDriSc+Cgv/yuwLzKl4vZmGfemKcYSElGSdnPk84nIq/kBZ0Al6/Zkm7A==","shasum":"b82f6628ec48e49239bfb20a1961369296df0862","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.729.tgz","fileCount":24,"unpackedSize":71654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyxGECRA9TVsSAnZWagAA/t4P/00P2YUsifx0ily1FGqR\n2T4wVtLOqLorb71wnMMfjCCcVo+9W440eU8G1R5DPvS0dwwh7TuSSjy9ALzd\nEX87r16pERWsm8qqMRRCli3yVXeqPnuizEjJPlA9lum3dMP9D3yOrs9UNRxY\nB0FSMI3gaVx+zaim3HL1pVubJn1zw8RIBfRz4sZeCBhum5ECib6KHCXnpcbD\nlc2koAwsamHnOY5SyJ+kDDSETOzDesZu0WvVnlDq+5sSncZkhuoCMNb0DlEi\nFtDmk3ueBcFXYSGxdveCuKwFHKQQ/GjspAQWU1JdGvMZptaS90iV7lZQOnx+\niXwZO5g9nzNkOqQQopkhTcPM6wCd29una0+S8LoM6pVainyc1OAqdiBUpDPY\n5TM9eO5BhUtIDqC3Xj9suBYtayNN14Tc/wk7qlr2E0gm4ITeDIKo2ZHML1cZ\nqsXZEyrph0ZoQWUWgwbtanriRFlKcrO+ok2zsXShqdxntvzQvnVEkLqfy+2n\nigyROOW4kvqnel5Aczdg56SW6GN6LYEVmviB5cbnQ9M4wM5Q5LgY2bQxNb9s\ni+6YEQv/2oQNalbP3A8+co959qs5GcGGr/SsHNvFNjgxWJ5AEpMOPQty7yUN\nfs5ADBt2WGeywSPJmizfsJk1JHDOEIMX345aCwWR6SiRA6HzPdWrNYoqBj6l\ny/5s\r\n=Iirx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF2clYgCEg/jDXHP0ZPtSJ4zLOojsx6Q50jU25DkVqMHAiABO6kW2WI/EONxZSBIpk9Vqbb1ez4pRl3GPU+VqpyqPQ=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.729_1573589379841_0.5420640905699887"},"_hasShrinkwrap":false},"1.2.29-canary.69.732":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.732","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.14.0","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"7861ea10a2d22fec26af8ca883597f3a6cb42b31","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.732","_nodeVersion":"13.1.0","_npmVersion":"6.12.1","dist":{"integrity":"sha512-kSIxrJmLXjeaTaORX8UD78TPCQYHcS+eYtQRjbUYPqofbBKL0mL3iJMg5W1zVv9Kvf59m5ljhrSRwhcBURqywA==","shasum":"cbc72db291bfec89e64ddb9c327be693096d4024","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.732.tgz","fileCount":24,"unpackedSize":71654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdy0MwCRA9TVsSAnZWagAADjwQAIb7eDNyBbr82ROQMtK4\nvlray3U9fR5DsWGCGA2CMGwp4iC9fQKbuEp6AIRzTtlklSqZ+0FV/2tCMMBi\nmp0mDJGxGKxWR+B5LMC7q2myiPOyQieRJg7iopFzbgT4bKRVUN3Un/wIm2Rc\nGCsbP8pGf06GLRyDugvffQ6/JXu15g3AgoyIkwF8UFhRzLiSPiv6UOj4Th4Q\niaqpKnx/G3M9pVQ2KtZXnQW+XVycMNuwRPp1iblWn0SrUkX62Jk+wNwPfSA+\nxmTHy6ak0KX6qTIg6QdhwQ7tmE5/YRTjGB8tWrO5+6FCNBrvnbQ07BtzicEV\nqIkQsZ7NXcvHNFkrI0+MnVa05F9z7CF90ra5+cL782C2a029r3EUvOroCvLJ\n12VhxhEDFx7rw/Q7HEwG9Sojyhj38dY3VNXa0vYgQqUbyUR0rxnCkTO7gaES\nz+35yIGmsFlwm6DyyKTXEbgDoZS9TIrZ98Blft6QiTcpw0iDAP3AIz2Zat/S\nJsk+Kqg7KwJRPDLXKNn87kh84SmnGczj0fqOwsks5tMECRz2bK2GMV6YkutQ\ngDnz5IajoD0fhkZeZ1vw1Yk5uBdsTe0ml4WgApToc3uP8oiq+jKgfXT4/Sye\n+U5caIe/MpP0T0Yo02/L3/wT9C8MOzloEjPXYELgxxQwMMIXUHtA2L0AsW/L\nq7Dy\r\n=jvrp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbrR2dJnOQ1L8DZw3/sXvEQQLZRy0EHUXrBHi+xXV0yQIgWpxrJ5U3wn/aCC0CRUVKDKammGS6iATPsAz5JXyivI0="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.732_1573602095956_0.5542266926205186"},"_hasShrinkwrap":false},"1.2.29-canary.69.735":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.735","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.14.1","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"04d2e76c6be095920088d013975e90a803d3e1d3","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.735","_nodeVersion":"13.1.0","_npmVersion":"6.12.1","dist":{"integrity":"sha512-Dp67nAkDWRGIP3ohWTqAUd1pvwldSO0BKSbKdafWDSVPrWkypFcbEaD/cgvsf6e+ZZ5vQnOw0b5psNWJsJAYug==","shasum":"aefc1885e9ae292576a9f1a18c79bce6100747ea","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.735.tgz","fileCount":24,"unpackedSize":71654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdy1I9CRA9TVsSAnZWagAAiyQP/j5YLT9+00YfRUFooE5z\nigBSd3Xi9fu1JRzrSlHh4RmwOJsnMTiGShJKuI7APWegf6biqRClzHWdKt8z\niO958w2z296bGpMjvpVZJiUgdQBvOgyarbZv8ZTcjh3g6YlOulC5RjzwLG1V\naJ97w1d7uALgepFiBjIrLgtXbfyzhH9q2LkDR8h2pP1r6+7v4/o29526BYZY\nlt9obELbWF480tcr7gQUut7lARf45PpuI1xADUYhqx7mvy/YRbLGgyJ5C1eV\nahDir0qQmSV+dWJftIyhuA6vNqjPBBRAL8XRa2PEs4eu6MBDppRhk8avXUzk\nVfonN9ypHqOD7OMrfx2mOCXzQqdY1DeBd74Ak7TYUzXwdHkriQDxYfqjlJ9l\n5fXUzY14S0TswJ73cF6nYYmV3QjOvl44HtLenBZ+2Uk5dFfjyRfaQ4algjkH\ndGQ4pedBDqajZZ510Z3Jc9oC69cAs9ODR16MktFApB43gOr/zBoUL+MUpcSR\nf9wg0XwwaDIar9lgV+Q2r8FB3TNlkbgD2icocsd4JAlhJ3u9UuNJxl4QVKmL\nGrB598MwaEr7cWNUwU/lDrDk6kJh9h6/f5pB0OR+TxMYBuWB0xCGSoWYGT/3\n7Cw4Ym+hgaPUCridZ+9ElM0hMZlzKWtdm98/NIMrfSfuuUGHUx2QlE6Zb6sO\nL+fS\r\n=RMfn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWbp9nbv50gyUVW5XJZa31IvMUYae03psO5oqDFPWn8gIgeNoqNf8OC8fCMkww1oIOeAD6ZcUinwm0/saLovMwrBI="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.735_1573605949111_0.618817495651347"},"_hasShrinkwrap":false},"1.2.29-canary.72.738":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.72.738","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.3","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"813170f4e82174945f418ff9efacf54907a80f0e","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.72.738","_nodeVersion":"13.1.0","_npmVersion":"6.12.1","dist":{"integrity":"sha512-nqTfvf1WGDvRihgUPOFglS9jdhxhWNY9WG0qA+kAAv4bxXigj2dmpB87Eo4+Cg1/vdg9Za4WacCLrM1fLmAFXw==","shasum":"fb3a4c7ec76069ce53b0db1a5083463334673bf0","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.72.738.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzGVdCRA9TVsSAnZWagAAofYP/0VOP4T5SbhQLSPCWZf+\nUkJEXUaEPD8itqmJrqg8zl+Qb9NrID1lGccPA9YXL38xJTsnI35SPh1sPOAS\nVqlyGcAPvpKzRS/zDTTnhxYu3PZxnoZv0yZYgJ1onrMW5wODva10AAf5/74r\nNMFXCUg3FFDARGHy4h7+EVT3ZWEkjtdduzIz51SKDG75iBPeETjxCH3eQ8XO\n1CKJrnkVjT9BaGAi32RlX1MJO0PIrHEC2UcGVNukxEB3b3AonM5jVJZfAfbR\nyJDHxkIF8ZNmngjV1HOu+RLgjXmuRgnzfh+GATV0ekroJoUP2VX9QAGExRlb\nAtK1erFNQcdzh048xb0NvF38d0sf01eLc6lX+qRRenGZyi6ZTlu0ZXuqNHvR\nyuR5pn4iQ6pKFAKt0a9BwkeqdznHB/4VYQ9Rfx6uvVppdhM1I3g9WIhhtAIM\nbcP8K3D3NAv3YC4Jgp/6L4UuUplN4xKAii//NIIOtQ1DSOzvWeV0jy9vlquK\nWgBoG9hPqdMiVbGzUDe5/r0fmbLukQ1femU3NotOKrZ4YW1kVinUs8/4q9Yo\nnXoxGX+x3OUdNni//OBvF7PcqPbsJRPA4H0rMZCWETCe/nirdrBT7inJti/N\nFe4JnPA+AcVnvQEodCbFomOPHKBChcC7d2a0nC0Ejy9a0BzK8RfEHx4KM6v0\nw1hE\r\n=3aK2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVmELYlz2TGa/2aBBdIJ6t86zSAyazY3AEnzXJF8UMZQIgAqbyH7qcwkZzd6265HHC61ey9ELnyLL6zUIVRUFRh8g="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.72.738_1573676380914_0.5699806971229313"},"_hasShrinkwrap":false},"1.2.29-canary.69.741":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.741","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.15.1","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"a9261dc54e709313fa4e9f026ab8060321942f62","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.741","_nodeVersion":"13.1.0","_npmVersion":"6.12.1","dist":{"integrity":"sha512-9Y+w5bB22Xne271DJQ6eaY5KqBPWbKMxmZT7acCyR+oFopT5Bm3ss0FOy2nNfNmzwz1ym7N74T1ouKOTqrpNCw==","shasum":"081d7a449ca645e81533cb1349dc0aa946753e77","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.741.tgz","fileCount":24,"unpackedSize":71654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzIjNCRA9TVsSAnZWagAAp3QP/1TRx3traiOzUjRCxtT5\nA0umO95/g0Cx2hWi8ZM1EdwHp+ki6ipvmVRXytv8QJTh2SHq7Ywojfd5jDLm\nzF4uv0VqDgK/xz1/YOHBTqzCsMWSp9NZUh1JFMxc8SZTwxT4Q1tUH+LlBLfo\nEvs0dxIr07cEjN6IRQ7AetTkI99x2EqMe7Gahkrj6LpSdNnnRT46jlsZj9op\nCknfnW8oh44N5cdDIOD8khkmcwCUivTZ7VIKPK2zPeVEGC0FlbU7HSlj1mZv\nflqjc6IpbChNCE0WnaqWcNilJnns86qWjIkBkSstFT4XJ3KFIW+RgRKGeDy5\neZdGMfMoa/UDGWb9zomffRRzoTX3iayUgL+vNvbLg9M1iSLLcFlgySvPDhk/\nXxaED0b0apKWT+Wimjx/bWIB5lD8yiFCymptjMQncLWA3pCdpuyaRoNBqSTf\niz3idtN2N7jp6XhlpqzgMcS0p4UdEhi/w1K1I52ETvDGdq55bX6NNHihDINz\nP4Kv3rOxdYihwDpIG+h5txtCPxh5SLbHmfw4QncXEYZj0FPBzODa4bu5TEHj\nmrRgqR7hBRrK7cSzcPMpd4rZ74W0ywl4v5du1bhW0jpDZ6zwd3fM/msYMqbM\nvoyQGGgD4rLfIfCpziNbyPOXD3u+sNmb161I/o2zN1UmxhSt6DYcMt9+Cf1r\n9mW4\r\n=xtON\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxtlfdjx4aHc8xFBoB3zUCw0oC0+OcTFxvzzA9JylRQgIhAJDIbh/WlIMhdEk0uZe5xiCb9yfuBP94W06yIVSJFwdc"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.741_1573685452770_0.0674396519666618"},"_hasShrinkwrap":false},"1.2.29-canary.69.744":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.744","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.15.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"6b3336f8061d72bdd716bec0bfe2028bd2ca2305","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.744","_nodeVersion":"13.1.0","_npmVersion":"6.12.1","dist":{"integrity":"sha512-AelZOfp/NObMER9zm0YE3G7Kyf3Q62v1XauENw+3V0lx98mD3X1AIp4nQL5oi5aLoxAi6gozTEyEm4TRGsj65Q==","shasum":"6ecd4229ee11c7781165f30fddfec7405ae5f23a","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.744.tgz","fileCount":24,"unpackedSize":71654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzdgSCRA9TVsSAnZWagAAIuIP/2XtX+4f8TBgwW288GZt\nDoKOBYVuw2NeHsC1j1SeLVAbzwQnjfMM6Yi3cDn8Bn5S6W1geVLTJc/xszjn\nBcBMAnoogk7rhqddYLHRK4V5k7xscYDxXKBBvUXirC3fXAdrrcBtYJb3rAlp\nUWm2m1/cyDg10HbFVzl+0s7CfEpzyfNWGjOkIIpTFTy88DAC2NXVYEiXJ5vI\nkIBEIE69zPwOB3GLIQSGcpYVf98TXNvAF0LcOonSeG8ZU3FmpwftqHYmqhpC\n5PUIXcLB+FV4xQYilP7y+z+2mrvilE3I9kwDuQ1KqqJrB4Qo4fULJ6ymu/av\nqBsKgGqld/cXmQpRWeIW4dF1+UheqFGKnVJCP4k000o6INDeqVgjI0ocY1CT\nP1IZDOwqIHMx5l4XBbGT6TisVer4avOk6tOK7RApfo4yZJpxJOgCbV9Mq5hn\nuiODWo7D3jgq1uE9Mhc9vQkI7Bc7UwOMqxrMYI2hBn9PKqU8g2wlm10r8eb7\n+0izhexf7zoeH1SXMKExrxHf3U941fYxB8RxaKt2BliSRXHziit177qo6WfU\nZfhFSTf5Cq8AINYqtxBbxHE+er+8fQzA/ZKNUT+wdfF8u3TfRnLi9NJXPHpK\nre1hIJBQGLtzUey/aydzveFiP5YJlh57kXgLRK7dnXbOuI4eei+j1XUXATHL\nbInM\r\n=qBKg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD39N9viteZ9g99TNMSNqp9pMl4IazsmXaORROFP6CNawIhANWIEzlKv9FQGufGoK9XkMAhaiZ2Xy7MWTJU560fluX3"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.744_1573771282225_0.9536313295932195"},"_hasShrinkwrap":false},"1.2.29-canary.68.747":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.68.747","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.3.0","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.12.0","react-dom":"16.12.0","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"0e7e82d52ce19dd30d8889a92fec0b0af946b63b","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.68.747","_nodeVersion":"13.1.0","_npmVersion":"6.12.1","dist":{"integrity":"sha512-waDJEZ815Vw8IBJbW0TsVV+TgX7JIqC5bvsdwFzalyAudg/ShhSSEonM5uHhALalgOsvGCgvLENXPMFpTWSd3g==","shasum":"b5002b853febbf3531dd5d6f7a63967ca0ff0d16","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.68.747.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdze/uCRA9TVsSAnZWagAAF+4P+gJ+y5v9GH100XSthjZa\nwO9HNL6QpAlIs15xRk7fsfbFXE38Wq8cJqSPXZUtNdohdG5xujfyDVBTExKG\n4VZDlVLkTFNo+K1onnQ3fInlSze+nLgpE/UsffrctLp2SiJ1VkXLjcOOHBpj\ngQpuipURkblJujNQjVJg1xZvj+7UEJ2XEPDXyr3G1rGZwYYszrOSxWKCqVrf\n3ljcsXxXKx1PzETJ/ZZR9etV/jgYnkmwV7XMCuyoTX5vsEgDYP+Uz2/WrBio\nCkK27otlY7hi+NWrGZKcGHPbwpQgqfHITlnQOPqJ+SN18oSsYWqv4ocj/DMu\nagCyL9+WrvxJga3QmpiygbMduWidLYy0a3RiGq29lTX5LNf+LmvbwdpIa5NX\nPgVoiCZWx0nTEDHxIUY4+udDsEys8apcFGpUxc7XAQv2r1Yavr/VfRgOI1Bn\nzTs+7r5+OlyuIIos/cuOBhgOufGpWbSR7tIdoiUe0cATohqPRfCd5gmwEx2w\noFjI6WS7eUMSLWlIbXZKG90ibsk1e2EqVXblnHnKCO3+NHMvb6ePVtWFkvLn\nj6uPQAJB8UfLKz4BlGhUfC09tNPUr8XzYI9Kp0qv8j6+vLuQ+5dA0OtSLvqY\n3LLu1YQCR9KoSITmSApvGdJdVImhh0tIslyk+XIxHlEfQKLrPRCEzXkMWbQC\ntNnA\r\n=HuDe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDs5DwCC0cEs1J5VmPJvVn10ZVvx1+cGgr5kXJ1c9YVaQIhAKFqdf0bGk3hQZlm2X+ZJd21iS8QQ0hhinQJRrPSCqQK"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.68.747_1573777389721_0.14645957375123353"},"_hasShrinkwrap":false},"1.2.29-canary.69.750":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.750","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.16.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"c19b4fbe09acb7429bbb4bba16b0115d62050f76","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.750","_nodeVersion":"13.1.0","_npmVersion":"6.12.1","dist":{"integrity":"sha512-1QZFAX1/tbQiUpymGfznxuiKS3P7G4Y4CZ2mJDtzWQU08ZdlkjAIQJFRpWeFirhmykyuMgx03WTC2o8ySMvkyQ==","shasum":"69a76bee7d1442029d400168ff0584301af3802a","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.750.tgz","fileCount":24,"unpackedSize":71654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzklqCRA9TVsSAnZWagAAi3wP/0ffLoJTRxe4EDRU2RbF\nxoBmu+dTh7r8G8Eo4ASDJNNZyT6gPwLFn82Z305RI+siPOfvfEd6kpQpyZ6I\nvfuoo543Z1HSj1IyUgvAaSU2OltcR0L0rj2fCjB2LQl5m7+J7FIKFjBGGRot\naYdW6Gww3k+858BoFKuRGCzhqz9HxVpnxeQk3MtXMFDFSYAgpXgMKL3MCDEx\n+QgNgmKnttHVaSUUPoBv52b3s6ASwtTkY05lZbHkl0IhOxNsonnuJ+hpOhxB\n6FsOfz9SdosLYFK9GC6mLhKqhz7y8Y7BVSHH7AyfJ6CoKa5m1f3h9vbRI1EZ\nQfG3O3isqVHrFPWzvBSUwF7rLBPSmOaDtX25yD+aMxTrX2ZKds0w18h7HgxA\njHErBCmMCJNXzXcOn7ttXXZIBpGQhv1A55sR2t4kC5+7ORnSxF2i6ZqxLSo0\nOTCDm2K+6soB/wxugjfxi51ysGvh0M10CLbDQo0KB+aD4VXYblDYZ3Nha4m7\nCuCMisyvms8wb/jcoS5uq4BSde88uCTdUei/04s3kzUT8wfWktGwh8zfMORx\nCKKJ0lhbquuZ7rgl3fWmMow3x7sTSaWGZaIlZNKJTBw8a++zTOX1gUwwL0tj\n+IVBKPntsuh+Ly6YR8yhrNEbvb1HQSHSgI7eJHtCvvBHQHQpj6U099fivvDF\neh3Q\r\n=H458\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDD54w0JI9zsGKa/glb67NVlBoSN4dfrSXz7ZfdF6YVAAiA7U0kP4q8+1OVjS3xb/UP93eTk/6KZXuIl5SvCSobqDw=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.750_1573800297898_0.8079738262550029"},"_hasShrinkwrap":false},"1.2.29-canary.70.753":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.70.753","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.6.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"ac669ee38a4993d56e4b157f9c184b36382cae7f","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.70.753","_nodeVersion":"13.1.0","_npmVersion":"6.12.1","dist":{"integrity":"sha512-gI84524eLpveSoPOkOGFrStkAeJlGnPGZejd6m53wCS4BTn6Qvdphd17uB6azIlRlkjvJTczTKbq/DWI94r9jg==","shasum":"456375ecdbe88eb3821c1c3481625c2cb3d9f198","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.70.753.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0Je5CRA9TVsSAnZWagAAkXsQAI1zdJFVOToQwIX+7GWP\npdJ0r1RmBMVZZOfJsbDAR4dlgiTilCg8FxFDATkL4IrgC+6s8Hz6+2slwEcH\nZkIOapx+YHyn8AlW6lXDG8MdM4KPOFINeanPpwYH+ecfR1pFpUL/GrMeyehv\nqqq2lpkHEdIAppVDmMdbwmZY2fmT7DGYEJgyCgfa7I9PlLjd8zyVTCN0OMiA\nU/+8ag1ZdfT94qTmADQLFyRdMXXksJnAktUgepGYFSLpHnDHHwkJEYULZKLU\n3gSKVBl0QPIBR4QAOR7lSY0iSHSI25KB6yUifTkHu5/+w2xJXQQWEj2PRD9O\nkTCxmoW7DxXkmxwMiSDIRytx27hsEC4/YFCyOAz5qb1Vy0ZHaKmC0c6prX32\nDFrNYf3dT4X55QoAIiiW8ZnSbo+Zgif9QA34zNOghSiSD1fvoSX72PgkJq/j\nDDrqRUqhVo3QNpkgTpgVzktsIPT0elFyxmPQBZ8ZJ/vrR85ZFS6vdcOizItK\nfvmKkgShy6ZQBXnCndkuPUKOIJUlIwEBY5rS8hBL8/IamPU7SVJOem/jIf1r\n/JYjngeX1BC/4jhVW4oN4/hOnnL9rJ3+ZWK+KA6iNiolPPbwXxT7TH4YQA0u\n0yfJ6pyWYpwWWQ0xDJucediNdoQYs+lf6MyrI0rKAQvAUwIqPQvbja6p5xyO\nfAw/\r\n=cIse\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICzsZ6WkO9UkM+OZMHSjB5dpE+vzTMlPmq+cH54ZUlQFAiBRpRLtMjcJhMH3vbWNsiQhogPn/gj+rhSRtt5gVedaEQ=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.70.753_1573951417066_0.2128262359286679"},"_hasShrinkwrap":false},"1.2.29-canary.66.756":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.66.756","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.1.0","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"d98a7de7a4b50a5c8b72d47d13c75b2dd4684508","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.66.756","_nodeVersion":"13.1.0","_npmVersion":"6.12.1","dist":{"integrity":"sha512-IfGYPSJkYDnvoORepY9WAGPBiH298B3MGk1ahzZCeHIfL4mzlI8nQChYExvTuRvQSxM4ohBw6l5QhPXt90XPdg==","shasum":"7c2352fe4fc1f5951c0eeb6d57348b770fd224cd","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.66.756.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0gWFCRA9TVsSAnZWagAAvfUQAJISW/3Ztm1B6LUKQAy2\ndx/Hobd5PLrJ/ykoLIdc9IK6tEBUKr6L4bn9IGzf0wZ9lj4yCIVCvf98E9h8\nwauqUigeZbS7Fj3ilIFLItVt5XLa3VKvyScIPukhOe8yulDEHrxwVcTQTdmq\nimih2Q1AWXEB90YDvMuCCJDlE9cStshFyL9s31rylz3BRniX6tPPj41/98T5\nz7lclUzXtOD72qaB1/xt4Mn+T0n3nK0HfQ/3t0p6B2sxh29RUw7VLboP0hXq\nF/LPEnzefHcUXlAzVpUrPA7DHpvjHfdqJ9vi/y4ENRHa5sOCA3xI6zYUnjiy\na/AvzhfC/zhSOxBRLq8RpNaezygclcj0CnlvMwtTzxNfSPAdUq2aONlElICA\nCxJnILomAYgvFZ3vhQb/svIID+DAYx4F06317ECJT2rWEXZ9WkBQ1FD2Nygi\nSIcmAJKFvWROjbZj9fvHuhd3YcnAA0ki1I/h4MpctuxO/9a7m/DE2rE2pA7G\npSsC8snYXFBgUr2TqtmHLM8xz7XZaSkIOakyo97WYHbaTHOXMYaUs4PBV445\nVv65ZPsyiZ0XjPP7b2rRX6IBGHyIihoRZhKj04H46AHm6B7HXJye4C3w5XEq\nA/3Dhjq7qYHHE7m17bWwJl683d6LXAAfD1MPlIq3jqKRqGP1+7vLHpBurS2L\nZ2g6\r\n=tgYy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHBtfo3sKororn+yk/8Npo/kX4+HFT27dAzR1mzAKVuKAiEAr8mbAeiTebdlsiMIhI+NL78B9iFwjOizxdsVmbZVITA="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.66.756_1574045061008_0.019013470308200775"},"_hasShrinkwrap":false},"1.2.29-canary.69.759":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.759","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.16.3","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"501b62b9a6d2d95500ad5aee069db843f3b4f0c5","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.759","_nodeVersion":"13.1.0","_npmVersion":"6.12.1","dist":{"integrity":"sha512-a+HrAryDW14n8H7vDvgMJQI7rns18RIug9vzZ6T45aYBIeJeK1btqLG5CBKpPXzfAgXzy+STlfSe/sS9WHKshA==","shasum":"daf625780ed33194d619ed57b3b68ab22ba1d439","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.759.tgz","fileCount":24,"unpackedSize":71654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0vzgCRA9TVsSAnZWagAAU7kP/RUNnsx+34AxaHHJeFZd\ndddnfqEgy9AvU6aKhjXxRqnksF7nBxrYZFoCp9tWz7qmFE+txCTL0u29blVt\n2IXm2mdziqZR8xt6OkYmQAnTnkpruL55YXHs/rYteAzgVEh0vSwnJXF81Qyx\nQLVrxXWf82jnLxRP7uEQsKX+YGh7mtA8JAcG/xy4lctrs1jXHVXpIpEjKgjW\nLpPbsPmQHgqihjRQeUaGmq7D6ihcvJU5c46+lnzJpaTnQJqO+FNuzeVq49X1\nPHWK8t8GgwchtU6M45K9WG3Vi86YDP47ZocmrB/Uwgqb6xtaHaxtJORz3AZR\nNdJ2OYplUjuYDbzONetYEPTpDhxjCC/50abfHE7Z58y3Rtpxw2wuEWk0M+SC\ns4FuGzlkCApL33WI52EkcxaDUJewLoy7+tPVTzpnH0ffN5+1vDhJwcuNqU1H\nj80hcGpd+nzYeWdCVcS5mAKk8mictQEwCSpFqnIjykEPOfzjXmWoPkwPEp31\nNdkmlhcnqNvxjLQbzFHc2sh9RJWL9dfEDsPoielJty+G7y6ZnVg8bjI4DQ61\nzepH1d0MdDeqGxDAqY6JWsZQRxNH0/2bV9xIhE0N6Fzv5hfUIFbcYDJHeQ0H\nI7QbRecHksj6cN6qri2w0Ym/tdYQmTWCiHMyU5rQGeqe3TZgPDLcKv6wqJp3\nuR5x\r\n=tOCo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA/9J0CqacsEz0G34Q0xKgBMnHvtYKHQ3Tpx8E3rEw2/AiEAs2+8Ej17Wh4vFwSaD1K8VKlOXGR3EFHiq4dkPtbOIzQ="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.759_1574108384304_0.4579026907437327"},"_hasShrinkwrap":false},"1.2.29-canary.70.762":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.70.762","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.7.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"10c1e386a853b93aef9618e990a1a03faecd60ad","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.70.762","_nodeVersion":"13.1.0","_npmVersion":"6.12.1","dist":{"integrity":"sha512-PnatiZlAG+k7MR9P/CaOMajKrn+VAjvmctsgpKmgDx26y6GnDo3NyFWBYXicbfp5YHIMor6SRBiaDRj31dshcg==","shasum":"23e6cddb5b7cd6e0502327c78df84928bfdea03c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.70.762.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd04pJCRA9TVsSAnZWagAACNQP/R72UZvs5e7qr+eLgjJi\nr86n+ZH7M/h23pGiA0qelQv4cr5SlgMnvc8K5uVR1zAgdW4IGtfBlZ5cmoLq\nhOUUUbJ4eNfjE1i7YLgPmla56gEEPISeoEdtfdnKf7MzP5OyXnnnOy1NKWXh\nj+YAl2UQsHuhY6CDL4cAbHP3gp7FAexHFOYOwDH7myuG9rxk3Ez07VJh5sih\nc0vPVMXa+1MUS1vJtFOSkR5bNpcHoiDxOnQvk7kkYY/RMGjtFyhPggIcm8K+\nvonMDwBViq6Oa8RS/hFjLCdFR+B9sEoNZpGGYHAj0QzpTrLeiIVjd43/E76C\ncjgaFVKHZdcRpoBB4F/rxsJPg3q73FP2l4D0pH4Bz6xuFVDj93GHwXS+KXD7\nyhRVfsPPHH/wfkCsZPUB3JVniLShD+5ntjm5GMMsd0Xf8MhSqTlOev4VxOL5\nOTG1TABbIDQvs0mAWSQ5KvhMZYRMWTGJeTLo/5cupXKIcGyagmsmd7J8kz6v\n/v1QJrFAdNtz/G3RIDf4QuKUsAKV6Zoh9EBCHU8lkTsNXNSuksvoPHX/FABs\ng3edRtfrMa2ygKT6jBXmRrOBZ2r5V9uWvt7T7alUi1zkmcDDBiqnRgny/oTT\nZ+IZ01mQNEUvWCTmPEVdsLEYa+1RR2ZQzR7neagd67c6EoI/9zbmHHaK8vt9\nxlwB\r\n=uPod\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICPWt/3ug51l1fJCJI++4xCvICNhWPpIhKNz7WESxRkXAiA7p2pVb8txUlC68LEgzyhW4R5UreMBPFjjy8JJH4Gp7w=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.70.762_1574144584656_0.9239534816484996"},"_hasShrinkwrap":false},"1.2.29-canary.73.767":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.73.767","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.7.4","@babel/core":"7.7.4","@babel/plugin-proposal-class-properties":"7.7.4","@babel/preset-env":"7.7.4","@babel/preset-react":"7.7.4","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"39462b0ebece33f9162fcd40babcfe999a903c3e","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.73.767","_nodeVersion":"13.1.0","_npmVersion":"6.12.1","dist":{"integrity":"sha512-NaXMLUUvBFiVHNShgUfWsdvoZc3/UHLyPNwQ/fawXfWhbavpK4wFtw6W/qSfAPGFKkbn8EJqHtoaUSPHFRwmRQ==","shasum":"123e90817608feeae2974754aa81f55267e01c54","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.73.767.tgz","fileCount":24,"unpackedSize":72649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd2HGhCRA9TVsSAnZWagAAY1gQAInvSi/KaqNfode+2/MT\nhtojXnNCj7MIM8xqmaMcrnHmreXnwkq4nIKHOR7wEStvGpLVIv6X/M6xPSFS\n1OChjueMSUj3f+yuFcHPB3HO5RKktctlYFTNIBBy3pBxBEOjAOmPAbl1uku9\nJyKAPgC0hKqLS7FcLPXxLObWgFPiuZ26nzFKO79sCxpeABi8xupdyd3mY/ha\nj0KRNDNKL1gQlzZNCUeJkJpgvym+66CSm7NgjBYhmYz6Arm9LZm9bARJPrQA\nFSd/bBFngu9rXahvFfdv/B+WfEOBY1BSGyI4HNSDe4j/6c4Vn52G8r7Fnpab\nPC5tdWA2rP5R358l9ti1bDS8IHu94gcJwQJZ+tpguyt33djii15+gV5xYA79\nEsT0sytT0yaZ4++nXdcY2U9ruCwCA7DCifyb1u2jnbTkYZfR6euHRQAukuVS\noemvkU4JBCQCHac62tSHFSKGxcIYSdntMnSi3lLUbzz5Cf557UmsqHQfBGQZ\nU0hoZYnrc0vF0HRfbKCeI82UxQ8MN+ImLDRpS8PNb+cGxR1Ywx7VFZZ63NPF\n1aufUrKMwC5SLa/YhA6x/ESM3WNOqbT+oerpAdwcyHIDm+JAeaEek0AKYd7I\n1iX2iRH9dNZ0SVGn9vh1NMHvO9C28o3SDD9yd5heKbRG0jLPwpprmK82Gzzx\n27eD\r\n=tqHs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAluzgWwQG5g7DV2xck28aYV0Q42L8MnL98B4RDl7+zAIgGPpGOiN97pqofN/td0MoVBp0QC74xfL3qF3RgF+pAf4="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.73.767_1574465953426_0.9829911253509616"},"_hasShrinkwrap":false},"1.2.29-canary.72.772":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.72.772","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.5.0","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"0653f86f319a37f5ab06110a107dc8695dcebe63","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.72.772","_nodeVersion":"13.2.0","_npmVersion":"6.13.1","dist":{"integrity":"sha512-jKICqsHNA2WiAsgsC1GdS0hIKKfDge0euuLXPKu70FxJ4xw2J3DotjNgMO2yqj59fu25RfDCAjO5LVWEoUMH+Q==","shasum":"9a349cf502ffb9f31505c071e59dca3f469083a8","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.72.772.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3gfQCRA9TVsSAnZWagAAWFQP/RU3rMfGfAJzXnQQ5qRt\n6WVGRCzBA0X+bhOItwCWXgQHqrtnITPKNq+W0mfEvtqJXJDbmA4x/1k1lKFc\nFT7WFGjRKtcVxwK4TNXqzn4CB6NYPVDkR5mnHaY6f6XZ6LwVEqjfv11LY52l\nlV+T0TDDlcJU0mnQYeNVHOGhNPGssPnaqPEw3asWdGOfrTb4wk3AEODA959w\n0SNIDWUQlihA2CsVtBDMdx8Qhi2+Y+mrj2F/HGV/XIlXg9T7v0JnY9qX2jKg\nJsFv6e5KgxJnb0vbxlSJ8SNrqUlLNlTkdt8xkjL5bHd7f0sTIsg4ei4mT0z5\nF/VzEI3LEQ+v0lttWurEey2qtmkVJc+qdHHIWlitodFFlIYkDpNJOyeDLOGx\nJuKVwFgc2tSdxPVlfVKlLSMbryXBHa6qaGtZXosAEVbfvU0dxTl6RsG6nL4P\ndWaSur8GrmifJUn5B10WTs47Fe2OYmL3DUwhjmJMmvVH7reiICgNT4z4MLK8\nYL9NIuJxS2oddiqArWhdvrY+0QeLDAQ+uj2uqEdy7Auxvy+FnjdT6qT7QvHa\nGdLQf3A60yCri6gKRDY5uQDUst2nTZYnb3rySUfgb4zg6DTZyyVitrabPctx\nIFEhMzD9VAHtFGsiXUXXmuj5/i//utngipeYuRhb+NN4QLzNX2+lrdJvSq1I\nyE1Z\r\n=T58R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEsQI1u6Ye6ABdixRjEJ4irvkF2vZA2nSIkhyH76+QAUAiEA4ForUdvfp9cs2fyZEa+FMXvHuSznUlfCfdTp4oRxcYQ="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.72.772_1574832079766_0.042435302168519984"},"_hasShrinkwrap":false},"1.2.29-canary.64.775":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.64.775","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.17.0","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"4d00823b58250985d24aa433233d53d41dc137d3","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.64.775","_nodeVersion":"13.2.0","_npmVersion":"6.13.1","dist":{"integrity":"sha512-tj7Q5oybVkTDpfSGO1fPsUMnXTXjwCNOr221OB+tKQpA2TgzOnXdPb1gqni75jjJpyJNeB8LlANhMhuIiTND9Q==","shasum":"1a98816664dea7efd65c274fc22f9d3486a411d6","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.64.775.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd4MzuCRA9TVsSAnZWagAAiFQP/1wnVFyI9zvqWRlA0lWV\neyf8HnT0ayjDxkGUI3mD3mb5qxWP1R+IC/6k0L2aok1f04uV4LWMP+PX87b9\nWTte6SxK9U2P31jH2AwYYXuyd1eD2obAl0f7f6pexaAKxUUmcbcOBQ+TFUc/\n09I1hxcqF5VgJ9UrTaEq4dzk0daSyosXuBVfCFzCS2mcdmAAOAnGRdgzcqzq\nSV6Zk4sxy8rpHa5ek/z9kCIsOEhCnX8cJO39GlHgCutYpdsWUXQuwko/76tV\n0Z/0Z3IME4Yc5qYfPBsP2ZW5Qnw8ZTzOqWi7Pv9glP9SeqKZIB5xi4qTdNzT\nDJQ7KFpfoUSFY6fPqJwOTeWPBtgXb3Q2dxix0PKdhf3PdLNaiFl8n11xxiNe\nsz8I763DZWCaexl4EG2ToyVz5gOlWIjQdpIFdV2oM1+umDr3cUAkTSQg3oOv\ngAhckmYwvaxCjG0iOSsSFgVfiovITXd4tnKpi3N26JyBRy/fVeP9jVr1uOrs\nquuMZbQN1N/eXzkHl/3cnrcTyh7S16VuHSBLtunWmh5gvxQJd2KsF7sYxdnl\nVeMmZvpOGoSKUTT2lC5m+Z5LzJD6thJTw8Or59yAB00TMdpKZrgwmEe5vDke\nkG3GYnvbahS7TceHkRWVVw7AiMk/6q7B6W1rCGwtTyuwqUhbdbqGgn/1pF31\nZ4I0\r\n=KSDQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAO9fbhNtpWF6S7Ls2GxG1WQ/wzL2HiQGO8luOkYGAxiAiBJ3LnqXCM0EkTYx0BFFKq2HuuMlUDN+wRJJU3R3CIV5g=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.64.775_1575013613387_0.15698711617190564"},"_hasShrinkwrap":false},"1.2.29-canary.71.778":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.71.778","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.7","@storybook/components":"5.2.7","@storybook/core-events":"5.2.7","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"c05dd0c3da1ba1aaa0912847a0186c78e691ef17","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.71.778","_nodeVersion":"13.2.0","_npmVersion":"6.13.1","dist":{"integrity":"sha512-LGl2LEF+hQt8ViyuxApEdlXWB+4RztZdOqPjXBWdcPOrkoIj6SrJqcgwh49vnGzlf9N8ndBdvfuzTcWHZ7O7Hg==","shasum":"20340ff5924cc6fda10c5b433ba244134f746f4c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.71.778.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd4mxWCRA9TVsSAnZWagAAOLYQAIeYurkT/MLp2yDIF9Hw\nE04tuALk6+iyb1dLKiU1Cc9qPbISVTZSlQCIyNdYw+xYoi1eDU+M7PD5i0wx\nkk/BbC9DXV+nhOanL46PzauqvqyX65wjs/6dOfXXw1HczT0gfL+K9OLbnboC\nIcYnbMOJaYKNPyDVFzz+LtLqa6yFHPaDYyJWrWB6Tui085LEEBfydchbuyXE\ntfjky0SeWJaTylXrn+iHKOxEsfUCWmxLV9ikfiUUTCHJ624FY/qxQISS3rAU\nC4HzTW5QYefnexZpjhkyscuAJAJykoVrcpIHcaIPMMTSO/tjsQzE2DpIbfcn\nmVoGZknBO+djY4NPPBUqRHUZh9pG8WgtLaAniWZZT+mlpfXwZ083u4hDFKTy\nUpj574Sm8wIEspo1QP4J78MLJedIDqO7UJcX7SWPBvSV4ltx0RHWoa9Kgr4J\nxf1WA4QyFsePAN0VlIj/TCh70A7hH5NDMNCTKPjlpav2NMrMikwDVgRpb79W\nQOHv0D1CasH8J3rb++6OIBOhL7VQETfArOm6kOfyEUGbyU+TphKs0qd9joJ3\nZADYFNvEIEAvOErm3xpP56K+jdtPOyFHbwV1c2PqGWEmcEMEuA0zn/lYatSk\nqGrja+g33YfF4hPFyNroo7LNxUEVit6CaxhKN9XSYo39ZoOH8i/3XB6kvkY9\nlupQ\r\n=msNJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqY3DweLaEbiXq9XQLZriLh0p6H5dvYT07/3wJg+hkkwIhAJ6WBbWzKDLdBfjjqjkXAQ5//rM7E+88W0jaWud9ojDZ"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.71.778_1575119958084_0.38975094103021224"},"_hasShrinkwrap":false},"1.2.29-canary.71.783":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.71.783","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.8","@storybook/components":"5.2.8","@storybook/core-events":"5.2.8","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"dbee55f2d4f934f662fe2660098548e67c0fdff5","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.71.783","_nodeVersion":"13.2.0","_npmVersion":"6.13.1","dist":{"integrity":"sha512-4RujALvLs1b+Fg4dMEQFS8cL3Iul8ANoCJA7MYaIQzQUu4zLzYVF2jLG92UffDCUFzIAlnCBSOicEkhxnmn+uQ==","shasum":"ad3bbed01587300c3978c4be02df301c48b54603","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.71.783.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5K+5CRA9TVsSAnZWagAAW4gQAIfn95T5tlDc5hON3eTG\nlN+g4L7g1vLghu59nWLBGF5PqYchk8JSKwmq4zBHtk/qvP4SZkL/nL/VPr8f\nVTLDrL8h9OiF3bDdbdHCEHJxFMEzszboSmJIY0+FesAZ1ZjdpSZubeMfwuCK\nvnWB7H0kpF8Qmv1vmrEIWPM5OpIbJzaJOkjEIK36kqD+M6f4W4RP4k9aQCw/\nICvDxwtagMhxjc1YryJJakK+ACg+YN43TcuhGl477yOupCV0+mRD5Bu5U9vj\nfG+G539OwdkHXrowsflYSGJ8Mu0Vnlv2P5GDLZCClylAGWM2m738FMOXWft0\nAiTTorQeKmMyyLTSUYO6+jkycMIxQY1Rx4tqF7BJppEln5npcaBLa7oN7PdA\nJsoQ/wr2Bz3EfpVsVIdHHK9BYra/auhSKiH9RexIJ8viasFKT4NSkuhKKZIl\n7GOEQfcktKFHy9awi9opvnQyt2d4UhrLuaCrtfpDTetWRFguEwHcMXKEmCJ5\nve+e6Hip0tmR0q+EFUvJHDkwbxaQaM+AzZvX267eLl0o+6AJ4GD6LLKra7VV\nS9Tn3uJZG5LYhoSBKqeW23ZZ+EJMWqzouUNniCTVUCkRIDiULwV2ZE8fy28T\nwcM+bzQtnq3crNiQdnwrvUwopv/VCNGI/Aj38OXdGyAMWrYIe7+xmMvTzlwR\nJ1gQ\r\n=4HYq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCL7Eq1AIdg5to8EFW4EMHjgEIwl7n0CqKERYAc4Qm3uAIhANK1cX/VGejkYkz623nWQ+L0opr4cb4Ok3MV6KexC5yX"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.71.783_1575268281275_0.5328300991446"},"_hasShrinkwrap":false},"1.2.29-canary.73.786":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.73.786","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.7.5","@babel/core":"7.7.5","@babel/plugin-proposal-class-properties":"7.7.4","@babel/preset-env":"7.7.5","@babel/preset-react":"7.7.4","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"fb54c886a29123e3992b251bbcb9c4a62d231a83","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.73.786","_nodeVersion":"13.2.0","_npmVersion":"6.13.1","dist":{"integrity":"sha512-jRQSKieO3CKoCzS7Fyseo1VcQcFVotSHktAKsgRpa4oXM35jqYJsgi4o6S2IcEy1gB6YJBNCdbYDXo6wCgHSvQ==","shasum":"862039b3cb4b596d8a44e06a93853891ce9fbc21","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.73.786.tgz","fileCount":24,"unpackedSize":72649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6lhQCRA9TVsSAnZWagAA0NsQAIxRHlMBzQtjIeedn1G6\nJt0TF2dAz/XMVO/JPAoFU0vIootSfmOBTdWqhEzUxFETyR275AmInb4Wolpv\nrUwQX25Z+Nu/ZOANfzJbKhSlulh6vyJwYJhdV1EMctT9G8L++7n0tDvARBnN\nT5Oj/5u26MY5NPAaynnG0RSQcKOYcmfW6kQd2UyH7UKlvkCszlFYd1C3ZjKB\nFzOBx0e8KmRrWLyX2bHZI5Cufetx2NbfWVqoOpIiGVL79sY1u+nvafUwpwAV\nmC4yJFk/gNWPqBDGeOTcaESHarRVcjtMJrYUkJBJlzd6DT/kR5TjPwsKhRJj\n+wj9H5CB0wB6oYGv7Eb+LL6smO6VAuE96xce9YUojHzYS9Zwx8BbGy4Yac/w\nJ2u/f+h0tI4NKopd4gkvKEJyGtHyfL1wafu6PYvLsfpmqN3xkjkYIQV3ydIR\nFA89gOZzh2c/lLri3cT40h0aeIiqpHoEauMTj2Wi0HZNxIfMUuw5TZT9amm8\nEgLZ2cVOnEw8s10llRow7l7Dk5ZZQmVu5NpUBKWWtsHC6UblTYV6D9lAcbVr\n2eLDnBPNnB8s0YYqAKPmJ35t/P8P+t2+O1FMV2bSaMvd8/Wxo27GWWMdTGRT\nSoGXDkMv5mluvrkxm/v18EZ/X0n9NPVYBVjxRqOaM0G3/yvkjZFlwbGloQ2d\nywWo\r\n=TNO9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTol3/G4ctPveYl9HOTVoq1Fp0jcx0o5pLAd2D55+o7wIhAIDDv5C5xfO+bl1CpSRfvakjCQsxlrgXRc2MAs86ZuoG"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.73.786_1575639119772_0.35812967714354427"},"_hasShrinkwrap":false},"1.2.29-canary.69.789":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.69.789","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.17.0","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"0501c79c6d5c67ed5352efb284862206414ca0c4","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.69.789","_nodeVersion":"13.2.0","_npmVersion":"6.13.1","dist":{"integrity":"sha512-yWaSOm+R3CKqnPL3wDQ/aqlvemyJjAvXl9H3Gg3NQuoSoW48Bx+wfVQcjOv4MQy7ZmMUqObDbu8iqlX1R5CO3Q==","shasum":"f8e0c72e49cd79a8484b784ed4d1f9553437e512","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.69.789.tgz","fileCount":24,"unpackedSize":71654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6utlCRA9TVsSAnZWagAAkHUQAJlPTkyLRDbuASIa5cFe\nP+0OmRnx8Tft+5adRAGunDWslhfRu8f03Z8NxlTMnmtIRoLTTa6gTt9rLmFb\nJ28pELm0tT1wCI+AhVYvz+wb9Nm79S4NKNbl6mikv2JNzF0KSIirNLVN0Bv1\nZvq/WLZpqM+kC1/4iedDmmhO02rpEftrJtRhhTAeLeCK+jG2fNTQW+G0cjC3\nCSV0xg1DbDfwPqBaTasxow0l0BUhTc0VOLdXWLnkhX/HxP6QM5t5QMUwnxcb\nLbulzaxb2s0hhqvhzV3MHPsEgJ1BCO+H1p+TnRBGBgHpDm3+5oofgHNknLIr\nvJ5YSKD9QN9j4gyhBtq3M39NJda1aSb+IyWZ2vHzyxVg8Wp82yUfAQl1I8f9\nSOl5npprHpJOWZg3Edj8YxGWZHQQu+eZ0E/Bkn8PzN52IFCfJdcTz5eqkN6S\nRyQplgnB9/lp/OFw1cDiVaoAczP6oTLwH3HuF8TaARhdHmJ8lBHuT0vPibEd\ntcb15qDKqs/Z780A+hioloxN7EdFV+kAuVOZ51/z2X2HX9cP/Kiwu6v4L2ei\nSzNF4eaalIf4v/bQrILKjY2R9/wBA4u4/eChiZ7oi5+i8yLqG69MkfDHQ6oC\nntGLgbzyF3VPVsPGRDPblAW/nG+eGc177+X/bDBGvCNc2cOO6/uxRuP6Yk/O\n6sxc\r\n=/ES5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGxj/HGfnhx6d9kG6LS0qCT6A6ir3JkJ1CUICTTQX30jAiBwHDdM03dRuxZk6K1qlKcbesCTNJoaIDty+C50niaHGw=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.69.789_1575676772276_0.26621258949725535"},"_hasShrinkwrap":false},"1.2.29-canary.73.792":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.73.792","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.7.5","@babel/core":"7.7.5","@babel/plugin-proposal-class-properties":"7.7.4","@babel/preset-env":"7.7.6","@babel/preset-react":"7.7.4","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"6bc35500b3d706897f9f9d93d14314eabcc363ca","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.73.792","_nodeVersion":"13.2.0","_npmVersion":"6.13.1","dist":{"integrity":"sha512-OdMOaG3g9q/zygIYhpw7Mpy4x5hmRqgALcniBLe5Ma9xZMiBwUC9Gybn6rXa6yJmYbn/6FbaswVhPv7D/FqXhg==","shasum":"f10d769635e2e2a3db970ccd8b41e594bdd9db38","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.73.792.tgz","fileCount":24,"unpackedSize":72649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd7DqjCRA9TVsSAnZWagAAzSAQAIqxMONVecRBprX2o21r\nVpGpmqcupKBvWALWHG8TAXWmXRoBfI4n5bjeysJ5SgiyYJQTHtdrMCRI96T7\nXfRuycdOSKOcHcTZcSFcFD5RP6xWN7jKUdvEqsPGA6vlmwD0W+3ePkjXEtBn\nlAQH0A21xliIlhjukP3aKUH/oUnsVh5Dg3pDbAQ8zC6iT/7Wau4sXT8qDNFA\nHM0foUtsfOfBECwcjGzdf9v9Nwx6a+k60mfykpxYxbJ0fmeh4SFt+u+POLrt\nzfDQzaO+4zk8n3wzO7E2gMm4HkLDNbnaWNsSB047qBt11f+Xk33nKZM/1rrl\nKCg+TKYBMOnL2zF7K/8ln/kvKCw33wH4Z0FovBCCmCeuMU6scYY8Dh9lbLok\nf6Lo0CUwcpjRtKknRjfMFimcwESfHVx7T2pWPuE/5ezOKdhYv2g7/cfpF1gP\n3ud5asMlJP5NxMDHuHkth52whA+fwu2HnrDWBehscineQCRb3PqlQmohlUcU\n6k6CuQT8niAYJXyjAszaJaqgUgcwQoeZlSEJnecq5f4TSDvNV0fKEJJ635EZ\nrGDVegi4xGy4OjR5kofSqbFZkytB811v4tCvA1uG5XN0nAGQmuknYjkOQL4Y\nW3GVBw8uUPK9sm3gSja32wKU13S4G6HP2yaAKGnnKhkdnKqI5Nq8NEL/tz5Z\nPQkm\r\n=WWms\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICpasfnbZ2HxJ8uapy4fpsel9wk8g/nVaEYX9g965OiUAiBEhC1G/tZL4B8FutW8ZX36fztHzp91frxLMS2xjzvEDg=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.73.792_1575762595102_0.06724388051148433"},"_hasShrinkwrap":false},"1.2.29-canary.73.824":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.73.824","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.7.7","@babel/core":"7.7.7","@babel/plugin-proposal-class-properties":"7.7.4","@babel/preset-env":"7.7.7","@babel/preset-react":"7.7.4","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"2cebf0f1ab9863e003d1cf2fb52e4f05c659ce54","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.73.824","_nodeVersion":"13.4.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-GOr/l3LFBS6lzExvPHvCm65I2mYPRsQKpZvBm+tOxHtAk1eam8iPxhFxMaaGIxhvjHXpKofgTn1OkDdF8FYWyg==","shasum":"d01619554d3027a50cc9bfe6184ba2e9eb85cfae","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.73.824.tgz","fileCount":24,"unpackedSize":72649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+s8ACRA9TVsSAnZWagAAPLsP/R/A5SNYX1hJPjmK6AD2\nEjbMshbRa2gsUvle27J6vR/HOkHKYicXWfqRMpo9jjLILKio/flDzhRwNngx\nZIwWMlg3mBRHPtfzPigB2eHBDdMEuMTibWe1i0YNJKaU5rxMw/MncDByhC1q\nkFxOqjUKoUpYu0ttdgTnTmtXerF09jPie0I4UIepb9Azqit9zTBe7Nbaq5Fa\neFjM0JojiqVn+klqhNNxUseG8JZ4IPkMo0D+TrVlJvn0GBz2wY7o6W0T9Cdk\nh9e3tIPDFbi+GrcyAgyWAuoPREXhuAHaaJ1V16esxlTNPQJbbjXWqs/YtC8/\nHeFimnDLIl6w1GTtFhVkxKqhUClTfgzpq9CHi0Y+kvvqA+Z45Q2eSsXrkBJx\nV2Pap6pWk36N568OJvCo+jREBI/U98yc7elnH9ndFKyK7W0IljwImhys3jr0\nno9Le9SDIk3pIdytLb6d7rxVirbQBVn8M/5slhiGni6QHJTsTuZg6egulNvM\n0BFRLKue+HNlFOdvBgSTAmnHlCv2WbdpgukkY6/Td5kVvibis89Txdx3SGeo\nuzcUMsIDBFEra1ZCWaz+Cfr0XoaNDH+5XKXJq9Y+oVVDyBmJ6ilQjfKgZTC7\nLlX7ybsqJCpCxu3onL8qwQfQqR4aCxTeRj3W1lAk0XwUrvZduevkZCP1bd1v\nqdaz\r\n=n33D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNU/AVv4NhULGpDSOwYIbJitvVTleiprlq/chqLEcirAIhAPiVaSOSP6On7ZjJMhJXJatrA6T9SdRu96cKDwbtwNte"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.73.824_1576718080304_0.9691399171130426"},"_hasShrinkwrap":false},"1.2.29-canary.70.847":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.70.847","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.8.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"150dcd30d308fd8b45020170798bbe66395018ed","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.70.847","_nodeVersion":"13.5.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-7k4SA9SiS9dHMYihQuSMlao7jonXVGyTmYjwgEytTQPFcWwBVPhHf9KdrRHghbr6cfLXF+lMKa8alm3xfgNhiw==","shasum":"4ccca50167507202294d9653f3696b37032471cf","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.70.847.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeAzY0CRA9TVsSAnZWagAAbVUP+wT7dX7tW0gVD/JdrxxK\nCzLLpJvg9TytyrzhPyH4NtLOX0lZLQHD0L9j0YMZmpKxuuz3oMz1k2qcfYss\nC2sAKkxDf7KRptf2giozEF0bH0Jl0K4zlodygIbJpnODdINAQlJo8Dl6njv3\nGL+8un3UgBhtf7vI7EGqJWw7RuqFhAMZ+JEGgLhhNK3ATKCte2o1MsAB9MnQ\nSmGHXpiasvjaIt57iQWW1uHcexIRWQ6f9ovm8kd7Pt1s1sCgkR3etKv7YWpa\nFz88hhCEkidFX1ovnsjgRP9vFZcuXsOkewG6ciFdsum8OcBu22BJnL3h0o/B\n9J/lvG4eg45la7oaA0fuHhb0Xft/pnSr5BSUaqpPrzi6g66Rqicqo/zR6UyZ\n9Sai8B2inDLK9T3cBe6eu7mq39YUNPxUU87Hkx1Sb+rIkVYTsVmzcGxLZAle\nO8DISxK5cZsMZWveSUgdqGF2PZeyPj9zg07bVVmxkjfe3V9FQoNow1W2RbYJ\np3XSAAv38KeLIYz5DFfHRRKr5I+1r6tPFbykgwHR7qdcGKG3huB0qtIJmPsE\nXjE3KMxAJ9xmsPV+t8YDfJr54lQlIqYrY5iayFFX7kQW1D39AffmR0RO4x5k\nnVhfn99ovNIDnjhcfKGU83xZEM9CTmphva1EXIK7bAg94jPaTSlwva4T3qOJ\n4Kgm\r\n=giZY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAD8T89wpS+WSwFmm3WxE1J8zrY2SJ5KuHR9qgHqGKPRAiEAtMA3cFZf0tjwqlHNTB3uZy152LiXfmj5JZ1I0xnr44w="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.70.847_1577268788082_0.43965521397903773"},"_hasShrinkwrap":false},"1.2.29-canary.70.850":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.70.850","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.9.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"db96b0d0e838deb20c72c892e403918c10cab20d","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.70.850","_nodeVersion":"13.5.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-GTJJQCjqT2sBp0PtYYdQjx8as/fb965S2n00pZGgKHuQUx4zbYE9hyR/LxBSLq5pelA/5IiiB+m7aZCKqej9eg==","shasum":"c8a92602cb12642fcd0f0bc29df69cc5f71946b9","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.70.850.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBfVCCRA9TVsSAnZWagAAzawP/RiDcWY18P+Rk8XLPcYS\nnb1AMUWWiPepEWZbaGCMf4Ww3wWD0dBhCZyqF6u9olyOcD+enYsTmxK74/qa\noQ9M4dVjs8JyOZrHznhBWFCRvZdn+v9+40qKqY7L7ssRw3BWeX0sXFPoBvcS\n/3lE9nstfDUfRBjWcHMnxoqm4v0dCo2E3NlvDwwoUC6pYsJKvfRSrv08wtlo\nP1SPOxgFhtjU/pwi2tLTEI7Fv3DUfhcusn5jaB6zh4XB/2Ori35kSoi7fA1z\nYwBE0xpb+pbhK7UTt9gKVa+Pv4Rtvc0D6nVVNHIy1sZzXisYcTJL61+ySEsw\nDV4PJY2PcpBcHYlD1zgMcx0EAx0mJwL4X7eW4kP7Sj5CUZJQilf+OxXuJL86\n/1UZYImt/VHPwKOEp2F8ITpbbcrPyfFJysYthEKoBvu4yu0eQMAYxFJbJJ5K\nEp99MPmU7KCnhSl6EiBBJgj9c29TLpYb5x82cHyPzHDvjildMDUUgGVelrIM\nHK8XFYwCk9VI0K6P91xycau32y2BKZEOxl2ZW5s6dt+zkNMSkR835XNz9tLn\nlcOWZ22olfADjlMuxwhpmgdeWCwHGo4deiTaUz+dGXecmv4niNIecdBWutiz\n2fIGjxlNKSRF1qL62IBBsgfCIA0W5LRuXC6tCxcPZy1LQXJX4/iDQMzQ3XFf\n+ek/\r\n=3Iyh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIALYMYmkebp+ZWRK9M9oAJxV8uXdZiQMbgXs69PTCWGVAiEAqJFfGXcrnKcM9+mYqZEQU2TswKQlqYvUiOO3bKbb//0="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.70.850_1577448770323_0.7331556273479047"},"_hasShrinkwrap":false},"1.2.29-canary.83.856":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.83.856","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"4.0.0","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"93e4b2c6c3afc62b91e8f9bea0a471bc0f4cb437","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.83.856","_nodeVersion":"13.5.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-Nyt6yyIw3Qp3TSvf3mRL7o4NAGFSoFcePwTooCA3/Bf5IQUsBxPwyZ62xvqAr5+sqDI/Ox0iWfcP0KSYS+Y//Q==","shasum":"5004db1679bb1fdc7c776b74bc8bd557afd34189","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.83.856.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE92PCRA9TVsSAnZWagAAVm4P/jo0lFnl5R8jc4YneZhQ\nqNADBR7hiNvcSoQnMxFjq6EJ4r8d+ZDTlf7oa2sHG/fRiGrjz3zpQ2eHYYAf\nKmPBtKK1P7bNLOunqIq1H8FG6hMuZlUK4bP4AVyzisl86Jc2crdLFEcPaiVN\n/4fmjUUyD3d0f3Bp9/TphfByUYw11MfsvXYZJF4SL2Asz4WrLiyy1zLIoLsA\n2K3ZqZCI7tsfVS2L8t/g1e4M2v7iZJydVVPz2IVIa3tXH4IgoSUMwd9/LakO\nbwY92XRo9aWHVJ6mLltoK51V8jUFx1S3MVZ5/ZMzZ4SVxf1XUQ5RbOAMDdg4\ng22IKp511vF/R/o/A89NylwagHZZ+g54o7FhwSvdOFgToPXvrbs1mZIIemOF\nlnncl0MWMEqk9QFurBz89l+IYrGi47LIxRzhN6mBt6Am1IB9i9+FR5Q6jW12\nPr2sTOslduedP/ieRaFHIDFkfBmGu9Sn/RXhW4SAq3XQgTEVBie6mJhvSyNR\nk5M3S+7w+NR5iHCyx/Ij3YY0be3Ucwwc8+QnklltvUfkze9N+aj/d9T2bihc\nufi7pAlCtS9rrW39VlbLeqzal36XDl5s2hp0h1+FHQC9vnXnv4RyuynVuQLp\nCzeq46DTmw+vSHbjIAzaVebtOYN7hjyEfR/q6MCwdUYfrEc8SVczeF5bGKWw\nEk5U\r\n=Ja0Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbQiLjmPcu2dFBoRn0jp34C4doD2EfKOHx/bYiwCGuBgIhAJTszfhp62FzHIFV3jtWBCgJwug7E5QyX3oO0DX+B+8b"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.83.856_1578360206621_0.5329404442602985"},"_hasShrinkwrap":false},"1.2.29-canary.83.861":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.83.861","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"4.0.1","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"4689538f4a0e7d5ec94dc4c1141f324dd0c08c48","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.83.861","_nodeVersion":"13.5.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-yunzQR83duGkGIsrE3i5bzEjdKX1FpESRE/HX65bLhbz5UowUdvLXvI2q5q6QiERVBsmOk4VoD6u5x4fDXzVGA==","shasum":"ba4cb8b58e725a45b6fdd4025efedd4a2b01f761","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.83.861.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFW1tCRA9TVsSAnZWagAAID4P+gNc8HEeczcFVDmmO8VB\nkBsNyq/wIf9sNklO3LU/Xo0woYdiZjhoKnGdU9o9OCW8uBEumWmXzW5yrKf6\nWLKqUv+CZWstxOt7extzOWqLvysai+ifXTtWowRbKbIchQ7AveUes7RO4tHZ\nM3ZkRXvW82pqtkicZsS5Ng+OUYk7V5x2X+f+c6G4/or/MPLpGwZr65sDddt7\nJK/sf+JxE0zmYgsOWYrGWTxsmZqbsljQaAoZHA/wslKJt7/WAKkZLjBYVzIP\n7CqFkgb/9iMpk4w+oGJTQoVul9IIuI8dEeT8v6W/pt7lwmVL0239bkhY6ox0\nm8aMJwey07izx3bqriPIxIaxtgqYz7CL4LgsQzWlrynCp9iRinE0NdzTPHNq\nkbN3rWaYgJt/kpxyoS8YYOAGlebcfBp0Cn1kOdzQxFYmJUDRfUoJWw6lRffR\ncNWwDi11T0vevUF5L15epuaB5zGayHLvTGAykFI2TIYHSj69k0oceiLnp4AS\n5tuiYoWV60qOSWxj5iUTOO/UFpbA+04sRqFzrvROGGGZuWfvkTJFnyfpNdPM\nKzjzn0z0OF6IF5Wf+u7VOFzcfjZjaBPpinmq/fGV95BXDNleDZbqwqV7olFn\nVwBl6W0z68HBf2FyQtk06KqktsgGCl8ORTqKJtPKH6FuArBzAsrlWEFTjRLy\n3QfQ\r\n=7uHm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEbKKw5/ofFca3J0NvUAJdKepw+nm47qem1zEVyUPfleAiEA2qy8uMMuYX1CiIUhCMpd5gthTYGiXG0IjLAsEp8Feg0="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.83.861_1578462573276_0.0459269722896305"},"_hasShrinkwrap":false},"1.2.29-canary.83.866":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.83.866","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"4.0.2","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"4bf5fba047f6fceaa8ee548c7a34f3ab699cb4f8","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.83.866","_nodeVersion":"13.6.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-bH83ZuTZmyxwpxwUGXVU4SqXHa/MovayMScxC4tFXH6iJ00U7zAMAn8kdJ2rU9UkqxMraI/cdLGOWjEVGKhr5Q==","shasum":"ddc908843fbf53e812070c7a390a65674dbd8437","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.83.866.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFqu5CRA9TVsSAnZWagAAI7wP/2NlzVZlYXHnh5UTmYkh\n+V+bf1zSUnNFH0TX4RLYz6ThGBgGIV0IpSvd4L5hLpS3u2n0FhQjIQLL0zno\nvLLJilnrEEmBZhqo9u8i08JZbv6Hz3ZxzDwhfvLf8+0d3M6leuPEuLu1bS3n\nsSu9jjigQ2T77POEraSAKKNgrPqhXP5rJJAHSoSNG2ct39ksYTs3flrdjsqd\n+MCr3XU/jV86m6+EzsY9mArLJwep7NS6JxaqfUbhiUrUW2czoPPN7erHKbwZ\nFoznbE6zf4wA8wc90NoLo27QubGeFSdqRRYCF3RgerM54VfwElYXRF7CeWrz\ndMbSCpnIxSke7HsW4Uz7ojbM6y6rVU43gGzqiOrKU72V3ieCxNbe2g5DVSRw\nGjvO01yvwf8PkYFg2Yq6AbKIvIM88isev2b+m63Uju1L0eOgTDzBifSoYf3N\nRngxagBDq4ee1f4vaXST56dnAcIS+eBjzUzXYC0fBR1ESZTRIGqyHSjaSu/q\nob6blEL5zEvT0qqfEYy4pXpd5+f3mX1IrLw8P/RSP7zZh8imAHbjWyqaXofl\nzcdmKOQziw3Udl2d8potMQORNFDEczVU4JrTNggR8pimcg9dJ2iN2myb/DrC\nFq0pnbEcwyPeNB8U72cDJeQbNormDCPn/NmjrUDm4YpqCP1Lax8aAtru4CIF\nQm0v\r\n=yzJd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDJ13KucQYFVtBJ5e1SHehZLjTI0i0qzScUKkxWKCZoRAIhAMYye0Sh4Oke6LjNdb/xlf0RJ1J49O0FNV88dGXX6zV9"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.83.866_1578544056984_0.8527252484363592"},"_hasShrinkwrap":false},"1.2.29-canary.83.869":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.83.869","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"4.0.3","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"d53470ad88722a8a352546d2dead4bffebccf15c","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.83.869","_nodeVersion":"13.6.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-oP7OxI+N3mfG2fkiC7dyXNp7AiQAa47Om5oEiJmYLQFXg3RG24kLGTp8zQlOq9ia8F5lRL6ytU+e6zdtCaHDYw==","shasum":"122e0b68198ac6a03175a59cc645cc510ceb644a","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.83.869.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFrGWCRA9TVsSAnZWagAAqG0P/3a9wuOgoosGyC5j0jyG\n5ReFWMIKskT/B6qeXDpDY+F2wUD2XJfB3y184EcvID73LRkz3v/YHGYqdjcL\ntDA+J9ERbCt2YRGCniRo9/Cmf6SaVTn+CZ48bouuB1ss5H6+fLDvItIyclj4\nKH3+Gl7WbofOteOb0FNAl+ta5nDpiMCcDAQeNULqAsL8vV4UXGlsABwk6GRl\n2X2LpEx3BgOVdgwkaBjdG0sBCv5rQRrb9G0ohIgee2gFYxuq2MYpkGWOddwJ\n7VGPKgw14F6NyfLoHspiApIftf91rhp/LeqAwzpzQK+oO8vGqjkznF1dXWna\naiW5U45H7zWQpvmsBSITrh7eOqVh1n3TxViHcupbLlVoAe0pTEZpnmyqKRQ3\n6K8gz1/1tJ41Uudq7azoa798Vfl6GKoDX4/1lGitagnRoNPc5OYnWQP1Qfnz\nY/JVV8yqZBFkfNupXlTmC74bZb7aqWs2MM3XIw2tDgDl1l3rNOWGKG9Sg3ng\nO0rKqtraE/DIQv6FeQi7PfLqe6ErhFVVvYMNzGZ5+pLeQITLVpSjDma4T5fH\nQWgctGItIyhAMs7En5llOm0cSfqLN860YpIVJVZBRD5voaE97ms/6wVKNFF5\n7l5TUCsRMxYAWKmc+2GbwpBhCbUcBbtHCWU7ahXbW0yprRbVncOZm/UaV34F\n3zoJ\r\n=tfpR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQCE8CwJPZ3L4MYggfYUgksrOCM44G1gy+a2aG69KX58GAIfdUPuQuQBoXOmt/flnkXlr+GqIn/4sQbTkzbVtb5ylw=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.83.869_1578545558214_0.31333441329960054"},"_hasShrinkwrap":false},"1.2.29-canary.83.872":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.83.872","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"4.0.4","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"4ea33f9e102df675531903ed428236fca8b6fbc2","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.83.872","_nodeVersion":"13.6.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-KjGo90NpkeaPQs+ZIpVvivTtO1JnY5og21FOO5J1OOQ4NpmERXyux/RlxhDj4p/vEobq4kAGS+vtoZAXwBHDPQ==","shasum":"3e1c2f2ae96630651348edb01b2b1f30b4cd0f7f","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.83.872.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF5p0CRA9TVsSAnZWagAAyOMP/1lsxI9oFGd3ZaeLLVCH\n2uDfUTR0S6wqkX3UckFWzpopGYKJSVN9JR8tCPWDii0zCcJJ0CF9Iq0Ncxie\nOFjBiGuh5eEVyuo10WaCuMQQsgsX06mqDda9JmI6XUWqyf8XP5kTCMiV2iYo\nqJ0TtjcOKfuhba+Brf2cVQTrMCBAM43IfB5l2EIiRIm0PTwMoP3IZkvbn5ZN\nkvN3ddZzgmN8URoUJPaf3qwk/M1GoMfSgDA5SAFh7iRX8IerH06vuGtv85Jt\ntKWsSJfItGPVQ5FM8LJ7nzYswB/xJS9z1bqq0XOr0ADCoEVGS9Q5Ash0VXtt\nao0fHA2hUcTol72dFmMEX6wx9KLXk1UTTSN/FE0lT2FLWKrOTjBJLxa+7ush\nThDo7C2MGecjDKVmnf91twAnhM0m44FCRHvzWZdAJKvZrOKTd2Ah5G2Q7xmu\n7q/5Wz6pXBQV3TqHHhmFiaX4hJOgRYQqs1eTudRxviLEEWJcPym2brcJAjwz\nt9iwIlaPjuebd+6i1r1XJa3qF+L3qnbq6w6ChBEnCSr3leXwDaHgASdijxPa\nWCPTX9Jr5eTT/g5Yma8RjFoz03NXMXFLvyEMAJKMDuSU66PxDZoICArUHYsI\nTHkLsW90NXOB7g2kFSt3bcRAxG8peryN5l2GlNV2YK+2zjRc5YvZhczQuBaa\nY47F\r\n=d+tz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaBYo/A+jV4Ljyy7Vz9cmw2/YEp3ypWTvX5fR4N59clQIgEEHDlO4k2hDhTVLAd+96NDnNT+cJqedrY0Hm4ZvacTk="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.83.872_1578605172165_0.45522191365458586"},"_hasShrinkwrap":false},"1.2.29-canary.83.875":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.83.875","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"4.0.5","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"aa4c51b578c9ca168ee2c306a8023798979e2ffa","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.83.875","_nodeVersion":"13.6.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-odmmORdCuKesbbVhblhU9VmkEwjjIT2567kXF7iY4nrcsOkRjZ1FW0+24e829Jc24r54qFLMV9IaUI6Eu/MBpA==","shasum":"8b0c78030f24bfbb96dd8c02a35bc9770ddad87e","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.83.875.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF/idCRA9TVsSAnZWagAAqEUP/jARqWa5Kzr6aP/kM+24\noXl632XYw54cTOiqMCNAW5I/LzexLmcVP4hdHK2cTEPMCV4p4wzWL+PJLXsU\nH3A4TcXKbsv9erVU1sMBcm/KdTe0VDwixmEavCXFMrD8RDiRmMdoUnHt5SM3\nzlxPu49k2rW6epls72wK28CSU1muZ7mL3UKDjM9Uuc5mhIPwOH3aIRvhRcAg\noU8D2Q8iedv7q5F+FiMklSHhUek/regcEsJicK3dsQhxLCI3DusdnvpZMuJe\nEls1b9NWOJS+AcVO0jByST1k++khUb76haJ32P/Rxl5CIeAMGZMX2jbW0eEj\naHAY/gIAfQatVcPgpEcKPZlNYienMyH64VEAoGEwW63fucHuvEQSXkEC0+lk\njQDbfPfyUnK4fVCxY9qSnfGBTi0ddVSq+rlJADPb65SDHGJOb0sChLje6Fhm\n+ezMqDg9pF0/jFwS8K9yx8QG26GKqC8PjT+3LpJPHdGHzOfsBXyL9SeHPbYJ\n2ZVc9mgGVcRCIg3WmT4ewu6Uc+jDunACgU37Oc25PxtN4cjGvVRBiYSlP3Jq\nLYvGSSdiapxeh9T0X+q2RynVxPO0EwkIQxIQXUwA8/ZI1+0h0lmyKSFUcySM\nA8A3HU+5xPwkjkahd4di0DGxCkw0Me2dXh8C4n7v0Y4AoOIVI7jZC4b6KP8W\neHud\r\n=82Sm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFm0eFFW3kV+Ck6q7G3qPYIakioowdiQqVvq9uiQ0IQ3AiEA+mnJ2bcGJNe9jqJgjUdXK3fqAWByn7qb3LAfVP4lzRE="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.83.875_1578629276788_0.7165041852288772"},"_hasShrinkwrap":false},"1.2.29-canary.83.878":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.83.878","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"4.0.6","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"d80fc5e8f69711c00b1e8c5f01154a395e253b0f","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.83.878","_nodeVersion":"13.6.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-BGRFxIEPwTZ4PK8OAOCFIdiuQjkdl/ak3MH5/jNt7zJeCVHoMc/hNMpSTRhtInbPKknVe5T05AB9HNZ037RJyg==","shasum":"fc68579febf3fa8dba5a0eb5ba73587f6d1b9872","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.83.878.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGCuWCRA9TVsSAnZWagAAd2UP/3W7aWfreEkev+sTYE2+\nD6h+8mQqlo6fRQcbNETDXR5A7HVT+VY6XNYDHwFx5q9AE+0Mrb74bqcIQTRn\nYZy6TerijjK6LCna2n88gQtrm8AaHjjGgoQLEy8C2BjfgJ1xOyyjSbG3/AyY\nFHj0XxG+eVV+A7zE9BW+HM3rZKEFqou7mzoZLwJAm2fG1eVw2VqO04euorto\n3XKJsxogMWL8OoU7oBRCsj2dX6on7M9l234Rv+c3p1gvr+rF3v4QbgZHAppw\noFQNyMKhwUYyubtEGrM9BBNCbjUwmRnuNWKYaHfmiyLIXYL64mFK8FSmU2ZP\nR/xkdZaIK9uynGq4/HnECAN2EAkgeH6KiIQRVCWOtYcaTt1tpUqkCWGsZNlC\nBvlgO8SrISOoJ+5AxFliTvT/e+9cQzuaTffGvvo5B4YK+plgrCyqHZwHK9Kc\nYorGM4Jsf5DqjPK2gCPnzJlD2s7IICh7NpHHJBUCZPUBvtPGGql/CqJ/5cTD\nPf9YHUJVYmwHI9JdjKgn/6tC3edaWg1TN6f2/I8+rcthYhx5SEacI3KaEN/E\nwZ8223xrsRgWhpXWEkqGWY6iZ3qY6Xu2IZFAyUQj5gpeH01gwAQ2Zytg1bEi\nrDdwt7mOdxGf7fYM/EMf4duSl+YgulOAMSacNfUGFUK1k8XH2H6aC0SlYW+9\n7tJ0\r\n=MxWN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDbBQZT+Am2qJg/xlPPizj1xasCWAny8YKN++L5MHdQxAiBLrZwEaepQhKwkwjaRPAjiDft389SuuAqn9Is94UcgSQ=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.83.878_1578642325937_0.4161371337174522"},"_hasShrinkwrap":false},"1.2.29-canary.71.882":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.71.882","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.8","@storybook/components":"5.2.8","@storybook/core-events":"5.3.0","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"9e6e413a8aae7e7ec121ce662f3fa3987e5a0597","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.71.882","_nodeVersion":"13.6.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-/byzdRdu/KWee8CJgMUHaw8PdcINsTSYBY9sZ8FLgQ9pwRR9AxvlQ8tb+kejIMNRC+0+i0a5DadysPhlFOBlpw==","shasum":"dde946b69d8f118f337d8411e4120d5d2600a95c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.71.882.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGZaWCRA9TVsSAnZWagAAjREP/0okiPwjltyKR0nypFXh\n+BO0K19WvZ23CG7ylwfeYvBanJn89khQLZkf0e/SFl5/hkiqn5r/6wyLb5rK\nmxYLTTcWH7PgR2itAqBgZ9L6cDpPe++P9GIbYzXOCnFkg4FRLCyiVu05FSOo\n+YcoHUiqpyl8Hj06rWMKuqnlkMNeQIEVipbBeLdJ00MW5g97NUlXrMGt1Mv1\nCBEAel5lQBQeybBBEMTN2JnW+ln/yIBmbrIePztahRSnWwuixuaiHA+wEupL\nvbTjYLYiLzwmKRdd+26FTGQGY+OMn7ARyBUYn8BuaSRkmS9Y7T9hCrJxXYUF\noNB7ZvTVv5PW2on3jvb5uN3MZnH8IaLDQVGV/GfouO/IJbOeOEbJcjih897e\nnrClgasv3FnxrFPgkIzMncn5+UKiJnDOQgJAi8rhWAGDlHS5qqrxQ2jOjhed\nrHkRqmDQaDvKp4Aki4CZgqn1npvo2T7oXghs4e/UvXB52VY5O1HqvVRjDsIA\nf5LrndaEz/P7pEF7qXRK7qXixnfQKHA+QyOkFHnna1NiDYVXridS+ecy/SfV\nTbm8nMpz5FFmZc0B3HzLV+ovYO9PRLPYtL0JVy3qWTNndUQQ836Rkiis8B4Q\nOYhALj0HIiQaiLJ/Dhg4XhUNsHEo36EIbGy8tUeg+POk9V6yzdOTtVI6WjJd\nr7x5\r\n=TMcV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGm7/IHg3ecllh6zSALcA9mNYU/4FERshI2GEG2ACx6RAiB/mJvkCAXEFXZIAuD/RTKikhbWZeILa8q8RHw13RQJ5g=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.71.882_1578735253931_0.19593233989060677"},"_hasShrinkwrap":false},"1.2.29-canary.71.884":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.71.884","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.3.0","@storybook/components":"5.3.0","@storybook/core-events":"5.3.0","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"02abff5cbd06b700197f345e9fb22c8be0464bc7","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.71.884","_nodeVersion":"13.6.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-KEjvtrYFm7mqo+2RNgQasRtr0uK2tZdf3yiaLnjJcGQDpvMY3rN50+HWcp0gxik7n4rn1ZW762w32xLObqW9Ng==","shasum":"5bcda127553cb382a271670145305bc14ddba44d","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.71.884.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGZb7CRA9TVsSAnZWagAARL8P/0CkLuvLkjAUiWg47Mex\nPAJKapB8cEaAfpCcJTHpgNzq/YnAVwh7EYnjWTUPxuIH/V5P/RVKYzQ34J+1\nRepzoY3+zNd7rWVBQc8d2sgGjJskHmLzRWlOXs4vCbX38AidPoi6F6eHGMhY\ncdDBBUAx2Z8CX7lIReP6p/RSHzGCgDfPSV0lD0X2sl/nvQ8dJe9DlOMudH15\nLSig7V0v8Y+P8U8CJAp+diZjGTbzIMfY7YxC7NFxuoeGgP4+PJ/ww7Jb4ZA0\n0j4uQkzBhjMnzqmTldCSD8H3R+6HGnLKXcb/Qd6MAGXu2/PE1njSwN/aHz3h\nkeNleqB+lgeWEH4shLn5LmMg/2LvDmHL2FSEOWYkVByatUOsz/MPh+vrYSDt\nqWu5P0f1Ok9W2W+gsNvNyOVhw6+vSMfWQzxJXC2FPbBAChMhu/bNMIsxbkqW\nYMrB6/DafH0Iu8Jo4nmYG1OMd9NsONzco5q4oQii1qU6RmaxoMhwDKX9oOQU\n6z6l/wbJVwZmftcwcItJbSF8hUgsnBxTd9mrNy8tSJ3XylaPXtaviASd4Amg\n0+Re4RUE2GQkUn3sn1gfa8H2Y7dyTOFRxRFobS7eVksGVbUHCnQrrzP/2KgE\nWSQOdDdc2aniBWtQR5P+v738e761sMN8vgPkt+pBTMK/dIMvY393vj4efDnO\nTQxR\r\n=uvyl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVnq6CnVv5hX39YF7a2ccqw2RrlwJUnXLBdERFzjf/oAIhAKDLAvYkpnKudqpeD4OVHZ9UJEfs4Qt7JK3B7tBToSkN"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.71.884_1578735355174_0.00016617626644932493"},"_hasShrinkwrap":false},"1.2.29-canary.73.887":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.73.887","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.8.0","@babel/core":"7.8.0","@babel/plugin-proposal-class-properties":"7.8.0","@babel/preset-env":"7.8.0","@babel/preset-react":"7.8.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"6aa74ac136c6eb45dee55724f26ed7c9bfdc6d66","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.73.887","_nodeVersion":"13.6.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-Wc2DFhotO4maBSVoTO8tjRf9P4eZnFTG4hBsS/vu4GiGyOKa+HCf/ZFbaamNOvxmwpD/OyOdQMEgvwGwwiox/g==","shasum":"f0ec2e5e4093302c4fb89eb2e4249b40ca193bea","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.73.887.tgz","fileCount":24,"unpackedSize":72649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGmu9CRA9TVsSAnZWagAAVhoQAIR8CCvROvbJyUldxKmQ\nk50OdDdl00oM3esp9WDSWt1qQhvK5bsN3CASUbTUiQGpSvx3cRldiXQF6AeQ\nnoJn6GCLhVj4K2SJrZXsu1x3WH2X44+gp1YfV/sUpo1hKedsBZYbfD8uP/ob\nLRe9a0d8706zzaV5BCZVi8RBAVfA04MvP0mMUeeIt8nbPSg9awGnQyESamDi\nN54u+MImGxIdcwf4JyR8w35qePKXaviiGydFtub2INN2nMTORzQqywMYw6im\np4hJ7n+wPw44qnjvEFWQ82DLN9kamvSp2L7avxlaeeSmRKFD4ue0PHOPxn7E\nnPMPg+FnN86gIbX1YrrYiALxKXTSndvIujRlFrtvNRikgDb3lcw8JndU008B\nH8WhfsDiM1/okOwKoKlGcEvlJuqktbRCXffUURAF8Pc6ECdu36dejEPA+qXr\nNVap7l2UEQASrrLNOWTB4YnFjYtMQNkuxs3mgzL+tpXqY7Q+Qg7DAA+qQuSI\nYv4D9WZwe8PP5aI6dsIvSW1avJ3Cy/WsCL+rGaeGlirmLH7q9tyBkdwpC9ym\nI9dg7jNymBuEpmTXo/IRieqwT3DDtNWZTkCrQ0XznZmQ6HC381PYAFJEtubj\nevx5Fp7ri2o22rZscTRC963oHF3pm/6PZIDM4m+rR3/HZEegKi7EJklSZmwJ\n35iv\r\n=3F1r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGNEx2nJU8b/mfNrZagSM80c4NgEdoIlio8nBOY2smDSAiEAhMgQZnQfvgRVnx66BuYIzWoB6VAmQ1kzT6vaMpo3Byo="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.73.887_1578789820956_0.0634178207649696"},"_hasShrinkwrap":false},"1.2.29-canary.83.890":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.83.890","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"4.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"59f6f09242743ff8916a6993bc91b643f7265169","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.83.890","_nodeVersion":"13.6.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-h8lzejpZkKLNPS3VYUGAT82dlmYSOXcANBrgRHFIQiP9gvxw6GcN3hmy7kLuPymudJdgfbGPoPcv4XSpjHsJfw==","shasum":"310053cb190d306cd3d540e9d97678643f27025a","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.83.890.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGrn+CRA9TVsSAnZWagAAbooQAJNM97MFQ4V5+fU7OgPY\nVnbjKcDLwVMexybENlbRu1gKwuHNBPqUus4wIHNDo0aBC8UyCSiNZ8VhQ5Ve\nEDqd2dbsRinejdeAT4XvLL/Y5jQZNEvg+pnYf2CEpQO2rosZKdNFgaV7LVLS\ntfFqSiNkmCkdgywIpok0+y4EnWracmrsbr5j67NWI4djpxAuoKOyPPHlMTWS\n2PfDvzc1Vr98vOxmhGGyu0i+d5pCCxzq7TeXqXkJYW8rgHt3p2eBkPFN9euq\nnpuN+9bg94pAMCQkvq56rcbZHhBpqCXbCYWVJx693xxII/MAhPEXkeHse3Lr\n2mNOPRMXo6iDXe1VdkL/Sy8nbTwpoau6190l6W4TfUf6AyPEUEMfRC9slUtm\n6k2vF1Fqi3yQwpbrkM1B/AMjPp+TRTgmX6+zE7xggTvV+qzurQghk7dtDeE1\n5T7MxTmKsJp0QO45RmdSeVQ6HA8l2S+VD1tgnURbKr3Ghtn/a1t5VOf+bcS6\n0pVQ2IGihsUYnqViWzvvfUeA2OzUoHVRINZy5IrISC+rXFydcXjp373HlHEp\nQZuQLcVgMSzv7AVQnkqJyptZ0tBakPfHjqxTTVXAB/LAn8dWc9BfbFc8u7oL\nt6ONktUcxjc6kfvNK2ttgvJw3c6oqetcxoxi9IosR8F9Ag7NhMBbOF5OiQke\nhyga\r\n=DIb3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkV8pwCWmTsvV3tyE6ETWgcJQRIbSCV9HysFNVQWenuAIhAN49Vh0ZNBcA2imcFMf2IKNnTOcTvZrpNauRMOVYbLx2"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.83.890_1578809854511_0.3596045810759594"},"_hasShrinkwrap":false},"1.2.29-canary.71.893":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.71.893","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.3.1","@storybook/components":"5.3.1","@storybook/core-events":"5.3.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"f6e8b1c26eaba3f2c02fe596ce113b94f389c13f","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.71.893","_nodeVersion":"13.6.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-1XZqB2ZLqKa0QcM1bSKmKAoLcbjq5ePWySTepaEuDMj5cjXGQ6SbCn7+pNyTwwuI0EMBkgdFaXi1SM5krqCF6A==","shasum":"bf489d98edf4c44f9b7f154143fc6c32efce848a","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.71.893.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGz6oCRA9TVsSAnZWagAAdpcQAKIlBSZ/nPS+oQ7jc67M\n9vu/qs4YgVnefYE8FpakNDcpwrSRPu+kXFSND9uKgk8V72/htTnqpNBWG5WU\ntVHZV8ItijIh9u0mycxPipvqpmXMY81JRhGLiHQ/wWQHRPK4QRI/YgfcyQHR\njDjWPUsaxTweI2dg1lb6/88tmPmaO9RhZRua7VnbIi2RuBykg2HjrfY/Ref+\n0uS9a9u2UPtjQWZ/9UREDGUzFor1/MfeHtyxGaMdXQ4BSgrfEpPP7Yv7YbzZ\n+1uhuovq3jSgNQU63GaNHd3Sca/GVnNfViZdWDX3hDi0/oe0NCYy/rGIeR4B\nLx1HK4/vvTAZAglrjcXr2VwBOhPFv6I4ETLG2KsTnk2DhH1qgRW8ABnPknx6\nydFkKsHOfXF6R99GxmvvVYNVkg+d5qbOmmECU9CVX9ZPwOFgxzy8lOftGvBc\nfXK8JW7Rjot4gfmcUeXFczhuxE8xw2+xvDMPLsvQzWqyP8c3tg00MBQrTBlo\nQMnrrz+lyG+R5TszeCbrvtrR+iQu6HpbRk92cXt1Tf/B/3oHMjTHLNuB4KQx\nfvRqBA7qemlek9Jd6qd0upqymTvVLFeR7ls9DgyRxPd7SNkPF+iftbL36owp\n1pEk7O0OSSUFaJ+lnfAC3wJe3pneazxZGp4xJjpam1TwG29CrO+xVvwzoFd9\nTXnT\r\n=of68\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAUo6OZE+yFlV+u7FUpVvULRVWGcJaDPGiW8plJctWzUAiBMuWqGlUnr0wktzDong3YfKzalAv6jF1T8QmHRlNvPwg=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.71.893_1578843816236_0.908417745627653"},"_hasShrinkwrap":false},"1.2.29-canary.73.903":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.73.903","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.8.3","@babel/core":"7.8.3","@babel/plugin-proposal-class-properties":"7.8.3","@babel/preset-env":"7.8.3","@babel/preset-react":"7.8.3","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"179583a73da6ff4fc28dc24d69f7fae2cb406fb3","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.73.903","_nodeVersion":"13.6.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-hQlrjUu8VCDQsnfQaxyShvz5k8OMWN0qfLWjM6oIqnUn+UCTdK71aHOxqMbBreUT/KLMws4y1HiHiD11Nl00bA==","shasum":"70655326f6ef0d73525902db02a163bd2c11985f","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.73.903.tgz","fileCount":24,"unpackedSize":72649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIzoWCRA9TVsSAnZWagAAhTgQAJYtecDe/oQUwaAfCTbv\n65FNn1zRC53VHSDcu9xakz+H3jzENKdT5UGd/aMeaTgfp54BIkGr8hZJQqbR\nrqq6c7giqtOS7qGxYJt9JHu7f0ahVqfsw3Qv79qDktS4XRe9E/Hx7Rf+LL8k\nkrNv6LakZvWot8JbZSHUbhMdL6ThnTRFB/vJSqeGIi0aGRow6S83ginM07Ln\n/jDRzus6Oh/epTry3zgQsVmuJL8F1+p8OD+FMnfddGZ+JgC0+yX3lImBXf29\n4zKIM5aiFSeGNRJZ0qhDkO/8Whj1kjgxkq4ejdLlN5z8vypiOxBOEK5KO5Y9\nk6t7dzAT4v9ZG/w+cawNWmGDYK+hkeBNpWUccBn7Aam7UAgECOk1PvjODxf3\n9SpMu0jlzBe9VNC6tEJPVUDwyxX8WOyWxtL8JaDyrSNhVXYTmacphTld9sr1\ngXA0F6c9YZTcUYoBFCGqoR/f8dkdAKsQ8S5mGZ3mAPL4PnuP31L3gNBsSIsO\n7PEpC8oCV1vE4MM3rqWh/nmn/IPSN3ULCT2hPnPyqt6CkP+INpRjswAPXPXL\nC5bLDLtso1GEGRCgTctnA/ElCyX4hMWJcaPyLw+1OWJJVefhjYNnJoQPm7A0\nSuqnaTwNCFj/Jj7ibOHZA50TPsJAhVs1EHaeD48RBzSJ46TfsxIrZTF0VKar\nKQym\r\n=zJf9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCGOu5NRSS951DVptWUBNA2uBwHzJunFzAMqJUNxH2nQIgEQH/oy/S2gRvWq7sCenXEcdb80oC+MpXhuL+NAc7O/U="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.73.903_1579366933495_0.9036896457039896"},"_hasShrinkwrap":false},"1.2.29-canary.64.901":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.64.901","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.18.0","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"36e4d9af3a56bfd8053fe41b67694b2578db839e","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.64.901","_nodeVersion":"13.6.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-5ytiBuGGJhP9QxM3u+ohQke5eIb0Dr/42zEh6OjyAiw+RkA4b4aWlug5A0GsAbkBm1EO6AUiWo4pWwVjHTWvfw==","shasum":"aea1afa0d447ec7ac9a981f67f9f4484972494a8","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.64.901.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIzomCRA9TVsSAnZWagAAP60QAKJUnXBg3axAcnkpPB+Y\nuFrYvp9T4PGX2IKcLSHL6+lNWacP1hMOyauP/T6yyK7TqIxTgJp+E7VJHaoH\n8RKnJHhBr5IGgWTkXjQcxTuAC+rGyzpa8U4YWHybREAuwSNqH8S9XQMMTYQt\nYlAa5ZTuxiB0H6KjVqoEu9DvDIWOEYtBtub23dnZFW+UdKsPyOBYpnEbfHmQ\nfcsy2V9jKJiiGm/9BE14PFWcyWrLAdZ2GvLC8d0TmL7XSpCe+aKpYEaY3F15\nfdxb75wOJZ0CFLlLmBEBCtDWNQc3WCmOh/HqsgxvGh32cKdd6D8iWbEXsoaz\nl5r7loqEXWRO1EwZF1Jet7gQUVYvhYiItPxQXEG7k+JnXAx78kvnQvWHxS6q\n0ubF8OakVCKcaPHlymD1C49FPkSyRk0TxVw6UpeJkeXV8WvvGmtDqEB0SZJr\nez14LdvanLTzV5K3qdmaFK+PhnawLCEWL5TSKhrRwl4gtENa9VIFVWYMopGv\n5k8R4+ek9sC+G7LdVtabJ7ShLv/BF4NE39tB9NL7r/9rq39Jg1eV7hTvpGex\nBHWtFdwnLJ5GksGEI2L0mPPuBb3o1VLVKg/NaDKQ/798fyfLxrCAWOfzk4IJ\nLdnYThQ9aJJuAOIHZ+hlVjlhxoMKxn3QV/Wj7o3Iae1oJKE1jRf7UnMlgnFM\nw+vf\r\n=w7dF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEgmtxwi11gxDlDs0BMHOcyTfUMmVdwHKxZNbLZ2p5dPAiEAmz7bB2S4KdhY/m4Pfd3oLMjcfBpyqN5VYO6SxEg/6wo="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.64.901_1579366949668_0.614857262173657"},"_hasShrinkwrap":false},"1.2.29-canary.71.904":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.71.904","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.3.6","@storybook/components":"5.3.6","@storybook/core-events":"5.3.6","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"e4be343c5c805c3ea0abf4c5138f997075d2474b","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.71.904","_nodeVersion":"13.6.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-zH+Gu0XinQZK9Gxz/gp1gLE6Bx9InAW3RV/EYbGLJUonypuMlCVFs9hhPUM5hOBDdMnKgFK3XxoNFSqe7ZfDHg==","shasum":"457b93caa77d4084bcd0dbac701966b24f7d1a0b","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.71.904.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIzotCRA9TVsSAnZWagAAxdoP/2Aq1y8MuJvUkJksfm/Z\nHPTWCNXi/xEAm3OZwUDWlUzXefWCOLua6lDwyd9h6WX9NHYqGSXXk1Ch177z\nDQyGbWMq5tD47PpBUfwcyA4XsvNPyMSlckatTRPFHcCjnEsqBNHw8Sez54pr\nNscOfAAjwb0bQ6iFVR4Y0oITa3UQTPKHQJay00A2mgKsKbIT1IqaHieIGR19\nD6VbgmKxQd+jYB74I35dXBSjxSq6VmbjGiXhglQ/BW6LMFOsRr5T+Ib2HyBx\nOBjiCgXqcmiPr3bPYwQ2QP1xtcOdMw6WfKE2P3crLNSgMOfJPfePZ0tLgopa\n3iRoHbLgo6nThVasWYNPV/2Bc2nUnmfIs/ZIKVw23PTBfNMKc1kjm2MJQrTm\nZHnHObCX3ry1HTr3TQz4SfFeUPY/jNYDFW3d0OJe13vYYZcSdAl1WNyKC8Or\nT8hR81YDTvkVPI3tFQR1m7GQWGJ0j23ZPW232ZK1Og+253SFpUDoUUXZ42k2\nlNOhkyLJZZXlUAFaKrNCQW5L/Cf6kmwkkWZ9yy44+oON3rrz8tTjb4Eu7KD5\nIDg/RqnsncJzqoXAcDBjYFytVJqD33o94yX7vU8jLlR1gPQlOr/QoVevRLuZ\nqA6rGAIMXRb9F9vzquEN6uPdS+QUcz+2tsNcUFFyoRXGhhg3rOtX6KJSCNww\nNF69\r\n=iymN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNBhlSKgEs7i6mg0NPobS/H3TyeIk+L4Yi2FGh3Bo6ewIhAPv/dVARnp66U0IoEiWkkAjL7O6jfdOH5MUed+OVB/wh"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.71.904_1579366957028_0.5364706288783376"},"_hasShrinkwrap":false},"1.2.29-canary.83.908":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.83.908","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"4.0.10","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"a0ad0c4c041abd8d7ec4b1b8ae3878bc9c70bcbc","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.83.908","_nodeVersion":"13.6.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-laeIE81OpZRjy5LAyb3T9Pc2Yy30gtUHsQamZXfvR93S5tv7PX2/YuldzbvxsFbN8aCkJTQMKMxKMUQXCiAGuQ==","shasum":"c59a5a5355455471879ae8f5133948a78bee33c7","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.83.908.tgz","fileCount":24,"unpackedSize":71654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIzq+CRA9TVsSAnZWagAAf2AQAIsTNsceAjKkZOtnUYry\nVWNP7WFnQRFh9RlA82mmxBsNTkaZTrSSKcBtCm8xKxpMCen0tPQjNGveiBzH\nYpCKf9V1ZX1i3ri7NrDSbKMzu7pmUw3ngVNcmun7IoopfJkj7dTh3a12ej1v\nrdh8cROkVsi+HwGlVDLIRtoRnia55c7gakzJsgNzZ/ErFbzOzzNBR/OJPOt6\ni/AzU9NQdqBp5A4qOia0KHXh0kEzskZCcgCQN8p/8/T9kASp79ktZjRQSQdt\nOrGqZWL/l4/aVpFtcU8AWxIZXgKr7HebAOMu2lLLgJ8xB4aVDas/saMnbkHg\nmf06JvqBv8uS3yGhI0Pt0CViSvFTBidQBv6RUwZNxA8NpTgEolqQH0B9MMVt\n57XRhmb5akDBphvN4VLF8wWY80eZjkYg7+Io7qOBqRq9P1c5FlnczVfG0ydL\n2CFE5dUPJQDq7nFvRv2gnCj9pTWiNVD+7tYwaITdihrehPnfe0TE4ndAgZda\n+Z+KJDcsZLxPB+HzcXd171s4aIdHzZrCiMCnFJfwJpfZO3klYS3owawdgQ14\n5a9HbRLxJMrZsCDxWb4o/ZYNHA1ZAiMDQwywR9zmMphm8DhVp43PbOu01v+I\n+XJlLcn71X/PVoNbav93Y6kYWCLzMtepMppFU2Yw0tSC3R7ay4DWSkkZogN1\nSSLO\r\n=VJB9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGRB24aAt3j3D8VeYvR4PfUNAJnlmIjMlI/GFfQlu2s/AiA551QVxj6cRHTzoKjQwi8H8ShUSexCqTec6bT/zg4F8w=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.83.908_1579367102468_0.3861003505206886"},"_hasShrinkwrap":false},"1.2.29-canary.64.921":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.64.921","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.18.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"8275e4859d005a65088ec4f9774fcdcef5c08d8e","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.64.921","_nodeVersion":"13.8.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-cI6Dyp+d9jd6+/s2RozHvYbVWA2zWD5/tr2Ufb6jgbcbjCkC6PH5W13hbu3pqgdZrYv6pGFJQkuCKzymBpgtRA==","shasum":"a31a4224ff0c1e861e79b9650db32b7fc883380c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.64.921.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeP0saCRA9TVsSAnZWagAAKpMQAKMdCXbaaPjljRudh8tk\nKVqBaxPwGGGnmehuRY57kgxjBoIHkafxXwjZ6vLsodVHKkkluaCEV68dO371\nOk//ASkwY/vzFidrfuK+4l0HWzmwzcEeXoxf1zbfK9brGwr865hlZIoJPDXb\nbpwBCkjcTbCPQ4OTzW/0Larxnz/VHhOfnMO3AIp7RADyysLCAdaFK6zNRmQO\ncz600wmO70N18NFRDFoBXybz/qGkYy5ZRev7VXiWYFimazFr4UcUic3+ksU1\nxpVt+BuCqUXwZVpXN6IZYiB8I04kHKcT0d8KFfK/Kyv5byL1GnxHma6odCqJ\nfMs8PIsgX6Vh4QQDM3/jrRSQWY3upHRyPdH18O9dMWRY36iR0CISwZQNQT6c\nfqH40pwu1lQO3GHQwWPF5Nsg8cp74aABDMLsT9EZ8ZqTltB0nw4AneXzicMA\nt4otHbojWQ9ybYttX7fGkSqR2t9tvSBsN2nz0gpZ8M05ClJioPHKVyl+k8Lj\naTn5Ukr3WPQYVZjSJBXbsOocQNECCyQ68L3JEaxMLQH2O+H+t6jpNo3/u8GA\ngVz02NvjvzuVf1pWFmwDmfc1WB1+P93Oz/QEgCMYXiV38pjL3Iz9iKW9F1A1\n/+k1359Pl5BRh+n/gM3U7zjALysYNmim77Sxqe1uT9TicKnzlAFEqzs6JalO\n6OPK\r\n=evgn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFPZceOu4+krWkGqvcze92MhypFVQitkzAI0OD0ykI0QIgWYsHmiey4pHPUQ9lJXgBMzCCTGhf3YK5PI8aXU9oloo="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.64.921_1581206298061_0.3991472109341412"},"_hasShrinkwrap":false},"1.2.29-canary.70.923":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.70.923","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.10.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"36da18df3ff430cced5f9054efc74db6b3829635","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.70.923","_nodeVersion":"13.8.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-x+jXUsdEPTHktjEE4yCisWkWH/RoJARrUz/9LvYQIN+1PNq4Nvp/3Z/1ct3yobOEsz8tBtsJR+tL3rpKL6unvA==","shasum":"2580ffd74e0ad87c86fc95d26ded484130cd6ee1","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.70.923.tgz","fileCount":24,"unpackedSize":71654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeP0tPCRA9TVsSAnZWagAAeocP/1g1or5McnAA/bBGQQb5\nNf0qsVfnuK8bx5owHb1IIC82DjlPI8gJe590VbV4Qei5/mLOALQE3p1zSOj+\n3b6NU7QUfKrb62u+N2+yP7Xq8XcAc5UhuKiqozi3x4dP+pGaoX85Vgy7berx\ndUqfD1ySx2c5iPWKMVpx6yULCd6VhrLt1p/5vgfeZkWgQ2yYNDnnFEB/0dBc\nH4Ppuknr5+3TbRbcGoFvAeaTyimGtrp494YqSIhpo7UeYdFTX6kYPTHv7QKw\nr3uaJ7SKnqv9UpL3ABV39R5RHo2AQk023NY6nq8tQavG9Nh77FjtL4fF/+su\nsRP7VTglXcSOnrl3au0I0HY5GW6z2Hp+Y+AaLz7NPbfGNt+LPzLeL11p1LPm\niwJ6QMYvWlbx11X7UVmwRYTJoO/moakaqPCPYcD0wwQhdo1+CMDaxQWhn5CP\ntFdOJG58xKpXNGJSniKspKGblr634faK4CvB4oErq25hBcGbWQDoznZxSMQp\nhm4EaoXNwYCg7xLov6BMNx0BmeE1y+dsPkYIANaVuxjgY8p5kPBuWOVCctLa\n1AjvK7y8GF6LM4UJr+8XaCSwn7ApYPqO4OJr8GTny/N8/d8F8C6XLAKCXLhL\n18QifcxFfmPoVTruotruPF0qr+w/fi0vCf0zQu2h6GPRl8goqJtDGdSumJvv\nYQG6\r\n=fic0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGVANdEetRuSQHRrJo2Erj9chyAA5n0M0GEl66FTKQc7AiEAob5WjsLeFvdqx+CRgNA/vbCQNLTq4w+bDJ4B/XMnyKc="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.70.923_1581206350856_0.09657171655893637"},"_hasShrinkwrap":false},"1.2.29-canary.71.924":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.71.924","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.3.12","@storybook/components":"5.3.12","@storybook/core-events":"5.3.12","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"b27611986d2038210da3a09de9a373604c18e62d","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.71.924","_nodeVersion":"13.8.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-pjbaP7cvM6f0YaCXMPUJkGTdn0vtvAdXLOUwbkiEHcX3cVIWAS18nfL9JsJnjCV8hyRSOLjieS+6qdOuLQ2EKg==","shasum":"b97404c6a5a5bbfd9b4e10119eddaf2934334389","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.71.924.tgz","fileCount":24,"unpackedSize":71656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeP0txCRA9TVsSAnZWagAASWkP/0YrZYTauR2JlSrGINZS\ntvgNj7drd1JLiL2kF9RZeliPhBj1nqU2TdF30mFssyBPO7vtrfpw4U1j2Ana\n6OZNNuyoKdSYMOkntwU4HeEUTtWfF7SPB10WvXpKdVSLisyLdT/uAOZt8N2B\n9tqY1qC8OL/Zqa4nCsFSzXajgrYzoHid66Zf2oR/gRU9BwcyakYo3JI21BMg\nytkyCCib+2rgL8U3uPckV9DPXDlUqVVZHoN4p4IwYBF+uOkwyp9AWSO+Kl53\nS+eDhQkZOAMUPkqF0ba69ZzYQHQ6Ecvfv9s33EVcGewXRKCMIDW+loMPmXnN\nMfKLH35Ik7/zgDezHGf8jBYxhT0pYA97LmUK0y8Oqk2JQm4NToJhxunu3Xfa\nMKczEP8EGNOoJ9TY4vX3hiuiTz1ZlCA60AdE9rK3mnfIUL1D94ZsnHftRSnb\ndJ2XAMzTp+bH/6uw62aAL+IUiDAnizfvTKWYe58y1MaSyl5aOK7qIHMHQV6S\nkM8yfXOrtI+Lx/QG2EKjHfIq9eGdAqjdGLcGM+MdVT4weZCfmzwsPsP2YHVa\nyNLy6fggqCbQKH1tfHwTMv+FzYdmRDFZHS6pAWQs/gr4OwTR3Z/0IY/BQGX3\nAyRqsm4iral/gpS4BPzGsueww3uT53jSoOPP0DjlfsgcDU5P+SgV5b85Wfhd\nqXNA\r\n=KFiG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDD7B3jCGF8K8/9KPjUpfQy2ZE8nqPrrkCo4UlN8AFEAAiEAmoyWBFna3lf1svoRjDGm7IkY+nBePC5qaDfDdNMwp1o="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.71.924_1581206385238_0.8693290972686794"},"_hasShrinkwrap":false},"1.2.29-canary.73.915":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.73.915","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.8.4","@babel/plugin-proposal-class-properties":"7.8.3","@babel/preset-env":"7.8.4","@babel/preset-react":"7.8.3","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"aa043a31cc22c367e72750fdb092945c76b8bcbc","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.73.915","_nodeVersion":"13.8.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-dJdRT5cCEaig3ljvCjdCJI/KeGqyVTgfh6U/q7Oj9dpUnarlrjme48tbZ+ZKAHKEDl6n7M7PG8snDuRjrKuRGA==","shasum":"53b3a41610e3b5809ee982938a9880be41e7ee64","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.73.915.tgz","fileCount":24,"unpackedSize":72811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeP0uBCRA9TVsSAnZWagAA4fcP/Am3CgAyygM102UuFJyU\nDyEVy/RinZSFEMFBkCr/sjenXg+pgDFwpmqrI37jRKBauIhOGZl6Uf0qiBFM\naCUoD0hDApCli+/LAS50NSqU+JNqfU0o/H6PZipxbDK2+lgJX2XQvwlKlJaD\nS4Ztawke6IHAntN5qLV1kwI6V6g+oP0DaYURUUKUIzjNXi9CrhvJAvJOkTkN\ndwkMOL2CC7uqs23bPfrc5UinKBOr6/YrjzZBJe9JtVqrKOt3sMD4ATCMOmfY\nbDDTNkv2KqJDHNOiVCJ/6kN5N1GaJwJm8ODOL0PV7I2znCm9ktxlKSV5OVjC\nrqKK/bHg0rom2bBRxymF8/94cxWl3YOYwy7SwrY5U7NTQK00o+KozlcQmxSS\nFisRk8Yfppa8qKc6HYgIKT62p0sJXIoQRHzaY8asexcIIMvEOAg77lqfkmcv\nhaamMXi3awVN5B+9U7mXDgpk0qSo04oGh/hH02OSbgvr4ENpyTwXXi9KU0ni\nXic3d1xOS3xKyIlhiO51+l5D6O/jtklPWdxSRspvAH5PkVwTB/vLPG7cfz/1\nETN6Pi8RFemE+gP9R1QRoHUdoafdn3+UMXvkw51G9OdshVQJkzbHQrvRrIvz\naKptNIyGdEH+zFEK/of7dCflhUu5su3exyfIlFYecdBsiSLMIhpl9VM8sDR2\nHqod\r\n=SLcF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7dBQyrzl51b8TqU0OblmmIp1ihoC9PdOudMhOtq3sjgIgOYh91cHlQ7jg85K7NKic9wO1WroiBolFRA3hSyKgNR8="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.73.915_1581206400634_0.6107381577485056"},"_hasShrinkwrap":false},"1.2.29-canary.83.927":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.83.927","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"4.2.1","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"2719f47f96e248dbeb96d73d85baac0ffd8bec2f","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.83.927","_nodeVersion":"13.8.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-2KUT9L42+FYfVemT96uoSNCvzm5qV/obh2OjG0UZ3aO6a38qZwIIVOm+MxJ/pROYg/UVaMcAVS0VBVYHlQvPlQ==","shasum":"9ca7f0b533e957af452c096d8c4790170d1ce49e","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.83.927.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeP0ulCRA9TVsSAnZWagAAh/4P/jBZUGyDVCfqw2KD7FWE\nlv9sb5B+g6b+LQx9x19dNWJuiD+u/65XUPIJrY9nMcITGDVAA2/tph1FHh+B\nCoWSpkvSqJ9hADqBpE5l9aAU7+H84S2Uo8Z0/80U1UOJ3su6e6gZSKE84x9K\nHOyeob13v6iTxz51WB9KR09Ma8/39o79C7vORmOEQLc5fR6/AOaZy7N6/5NV\niLSrcGUYCTB+KuoxzMGupVEFqD8Pbhntm3CUz4NJysgNkkx+Vn2sNyzQhWC2\nLsvO5npOKJSDYbfWcoMLaUIGqnKbVjgvS9Vhvnifc12qFpglchSzjY//5ZfU\nelcJWMZ3E0fbfsYvYM6TTBRmZogg87MxwogsUxK0eLc5012SmdyuHhZD8pbw\nSfYVSLQs5DGwcwA7yHBURZBjcKdcbdSFWp4iP5/tG3OC/hnMUY1EfUNDr8LV\nDa7V+Q383cL3VcuP4w7I2lvYmQKIfIdihDbi2/CCuWn9qWjlUGQBhpTU1ETk\nt/TmpIsJISlgcBBdElHongTh8iP9AIidkUx7QKyoWuVbdPTfJxV0F1+VfSLq\nNN5ndEDIJruV7NF2/dSr/xhiWdF/ypd4JRc5Xl/goPlGU2HEWFsD2Z8Y9gw9\nx/60/wCgJo2gJ2qXyxRtlV6AamfvV9wmsbLonYBO0Cv/5LRnPPy6wYwUB0vU\na19R\r\n=T1xG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHT9tJWaZjREqupAX83MFMc4glECdFynTH4aS2c81h49AiEA2kFK8Ue1BOMkgjpfzsjkqMRiFHsZFTBuwEUScFAC1JU="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.83.927_1581206436462_0.8134531193050114"},"_hasShrinkwrap":false},"1.2.29-canary.88.929":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.88.929","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"10.0.7","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"0e1af09eeb62508b24a7310f124618561372145d","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.88.929","_nodeVersion":"13.8.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-JTsZaz4CbFiYlEKaJHQQ2ZvkKj5NgRp5q4MLBbhbWYfO3S8D/vexy9b7JzVyNhz3XT2l901D+TgkCyIlv97lOw==","shasum":"0b6c046eca2fd8fc30ec292c9df9a6a7003646c8","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.88.929.tgz","fileCount":24,"unpackedSize":71654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeP083CRA9TVsSAnZWagAAyWoQAJ53JGLRPdTXSLljbjfk\nNbjrIxPIv0C3mJGEs6PhszGyBhyFq3Dmy98NLH9ifkRvpxA03H2MsrJkm3jT\nvmffnKfe1Z8AJRdTByrKUBuaJsKtcHtYrrQM5464kK8cwLZb47Eir2dI4kxk\n4HtmPNFan49K1HXshk8ww9RP4eX2MsJZL36AifKoZxn4GXITh2XaSDLlUKpM\nHqZeRo4G8wPReh0PFCuZvnPenI6g/54dxWnAjwDo3NV7gSm8ZiUrt3+epUmz\nILaqLJa0Z5FEUgu4ta6anPbo3NLSpuSx7vYMH6G43jjGUWoddRrnKTl/jaaY\nrUxWJc47qqVF8IhRYVYQ7JMnmNApkzq4Dtaxhmd4BhdLK4cDF9HP4u6hj43d\nQCzsWjFZDYVgCo5mpKePf6wLAxqZSlZEvqOt/1VydDim8z7i0T7pNdKdxDxh\niFIyYNvZmq1nhjGHoxZLEkiP5CSsPpWFf0RWKqvcDdkVHlxnXWKybr2IvBhV\njn67lOuHXsYQQwUnLoPo9LRnM2vRjJ2hYAjdO5q6AKRGKtx2JXBggOLRQozD\nWdTGxhYUmrSweh4YuMTuNUOTjIDABeREKsc3x4ZaAh1PiohERAiLUBudkkMd\n+06xL1+MlgrwoahRtrXAZ16w/MrlRWHOVzRDIz69Jt+yCq+aeNxOWuxarFm1\nBoZ9\r\n=QZdR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCemAylZ6PAj6Wuzb1ie8DF6j+ffu5FkFIgJ0YvTfceYQIgNzBcclnQOjpoM84iR25kvDZD6lvCciPVN+K279UPdqA="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.88.929_1581207351238_0.14682641964489007"},"_hasShrinkwrap":false},"1.2.29-canary.71.938":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.71.938","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.3.13","@storybook/components":"5.3.13","@storybook/core-events":"5.3.13","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"96fcee3172cab6352b3eeddcc8ddf9a64c4744f2","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.71.938","_nodeVersion":"13.8.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-heVlB/Blt7gsNgUQtSYXUEJVOPA1vGdJ/J7CAnK59ioY+pz4TkFbzlmkoWtccaqZvGMeRSL5oZlNRWQGNe3+8Q==","shasum":"da9ecec0ed6ce69998932c9163322a2b43551678","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.71.938.tgz","fileCount":24,"unpackedSize":71656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeSQSnCRA9TVsSAnZWagAAt2AP/RcGWAD9r43Kyf7Q4kZ2\nKxrdB8/4BkkLeMTcadnugerf/H3ooEV6FVUcWiFsfpsbxvuBXdySiYzmyEio\nPVXeMwP8OCDXsoJ2QiTaZVyajLc0xiTOAAlkaTEUtCzp2eM5GAHbPy58gzqF\nR8y8Te9TcjhGUQ7/5cy1QVK8ZN6cOazdaMHCct1w4lYYx7YhDpvM6QhUmpT3\naMkgepQ9QileG543S2tbb+8xnrFmIhLhUmAeddEpr4qdvh3p1qym7N96WsQK\njCFlnyMxvN6/AF0OAx8b8ors5HrU1knJPcs+Ti2H4kk/W4vtDEGyjETusNzp\novVdjopQgGZDoAL6bMUB6BT7vppdfplCUrW/CXh5QZOmbNLmBd2YJ94mVeg8\neZODdwDBtQINb2kJqC8Tm9zPr/AeuDb0oVtOdTKKe2PJDH6+5mQsfHFWc9Eo\niFuIsM7E3V1xIFB6DuBSQ4GRbIoAoQc8il1Dcv+5h1hOhIV9UFDD90oBYbjX\nAeumQU7N5a1wt9udAxGrbG5EWZaUseDnI8Sd86+WkdR1NMjrirVqIcTtJ87f\nBAiYO6RXyEsoN4K6o+IfgXnh9cX/b4xCjFnq7DK7kirv+vuI7t5Ca73wZRcf\njzXAPDhiDWgMvzCsva8b2mID1ex7kKa3LgaKrdkoyl8jVn7dWeLf481Z1OnB\nZRlm\r\n=JH9s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQF0dUZbbjbWzm6W9L1bX0W2+yPeT1KvocycX67XP5FwIgbIB04RFlSB6NWw85sUYAp8tBNsVQ66QARcoAKu+GdR8="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.71.938_1581843622500_0.8453300512520825"},"_hasShrinkwrap":false},"1.2.29-canary.83.942":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.83.942","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"4.2.3","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"40de178db5bc420221df1d1a622be71185d6d8de","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.83.942","_nodeVersion":"13.8.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-8thKhKe7hpi2hFEcYhp9YzbtQO+oWDevJx6qT/bu5AKEFCCCdZnNhGDm02jx5fb6Uk9nSsWuWjH0PScE+bUc/g==","shasum":"3a2008acc6f84b4c3017ab2cc43cbcc76668e84a","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.83.942.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeSQTRCRA9TVsSAnZWagAAMY8P+wS34Izi8FGInVpg6W/V\ni/M0VTap+bSYnctWS9YTOYKdk+/6mJ5LKQbJl1gxOfSogtehSji7IQY3ar/o\nJClXKYVl/21jf6R+pltWEYy6mDpsTKHkkO1wJCnb1FnUXnZdCUwtWte2nox3\n1two5VTlUJiGphrOtSwAXH7c179yRK7A3SmJpmTXeEVuBbNK5pWexm/vsX/P\nm44GBbzaXhRwP6ta7AZrIAAwNj/fjfEfpCrMBdhPLOoiuqu5ujH8k4maZh9P\nRU3FWc4kpNWRTlQW1oGX3p0QQ6k+BK+KR+EJ54xSqNhTR3LdfCjIZmGptciG\nEKd5mu8zOUS0oAwCIZnphazAktVgq/WcQGUknZS4ems1zVyhIFOq0s4/Lv6V\noLJ09GTNT9CLLRTPQ/q9i3remZZmhvrE7Jz4jn1UrnU0z+IonR9VslDI+Gu6\noje+8gr7MAQdTCS27VDZnYGic4Kq14iYXfnrL/zG+mlz2mb7+MZeUZ12tQkx\nNLezphUge26dgv/AgRyrPrwRUD9IxZgr0qZ4oZOQu4zQu3MSV1OQI3mg/X3c\ni4cABYL8UyyzlDvnteq3ZWOuKeX8tVoFaylw0KNnmEi2zrwHa+oz32mRpDGU\n07SYoDtmP0927N8njgAENMYqMKP5t6QAKqDOadZfW4qzMIa1GrxI13hkQv0j\ntPS8\r\n=FDZ2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBRsDRziH2cUH6KKA6EJ3cflGpC23NmPFbnIZ+MOw1nTAiEA53D9zCvll8Wy1mF+W3GyPo16SupUqfcDqOFCElwgHBc="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.83.942_1581843665501_0.3714042352636766"},"_hasShrinkwrap":false},"1.2.29-canary.73.949":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.73.949","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.8.7","@babel/plugin-proposal-class-properties":"7.8.3","@babel/preset-env":"7.8.7","@babel/preset-react":"7.8.3","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"f54f43bf1fb6f07ddf2b07ea45fc1dddef70a60a","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.73.949","_nodeVersion":"13.10.1","_npmVersion":"6.13.7","dist":{"integrity":"sha512-4AuhKRR8cpQfCqu99N0cvCW3ppHOKwFQN8r3j/VA0ZCc+1kV1RM92RkO1raohR6VpWLliOHKeW96ErSguJBjjA==","shasum":"211fa8d317ec0b1dc3c38185b845727502c9ee5d","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.73.949.tgz","fileCount":24,"unpackedSize":72808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJebOOjCRA9TVsSAnZWagAAG0oQAIgTN0TfIw3YtQ185H5/\n8qJQIBRLxifBw0h9HCv39HxOqP71y8pbQC588Otm8cJqEjXptex+9ERj8tX5\nPp6Bpr+d5SEUmC3gJ3rjyLmpNu8RvPHrLta9tDUaiVKcOJFvxMixfvgCnK41\nw1Qmv5Z/vJKcAf2ByObAszcPm3RdW59SfUCXz4Y9FecITMLgRAyMrOmbRdT6\niZt9kZnte7rpbn8wx/oJYu0+ClM5QFCJdY4zjgqlvZRchjp6fi/l5OumFbVS\nel4yMphXZT0c1sVI+L2TmKndiw8hsdYDoh5zQOIJsX++v5uOeGZ/ziM0bLtp\nRo+d8Ldoip0F9uiWR3OwE/rQx3Yr5LHRaycL8JE9DT0Lf9fJoMIGlGmdXIoe\nkdUy44Yap73H/koC8M7ayJtQ48DPZP99N7wzxgX5t6PT9IBxyqfzyoh9zgrl\nBVTDAkU1Dc8OlPkyGF/RWQj/5JIQv9Xrv+6XCi2Or+UxNwoFoFmYRObLP7yY\nui3vuAx/20UnLjJdhLkJLFhb+AWsAlgHl2oYyLxtrfB1kkUpfmNyS5grW/mY\nQceHmJtHiUX3bTspUW1A5maJk/NofMMc3jd0AdSSd5ozhZULY7+L5xgp9qSf\nIMp7aNgzcoUNMl5q3yCWU7j8fmft5RVJF8omnq5WWPDXZvZihM0hA8tO9+dZ\nrcTn\r\n=KHOp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmXUhnz0w1xMwA5pfkUhcnThIpSesdMWyLOH2U5KPsDwIhAL1DGG99GiJHe4UcDJyyDEGVRBpeWyIo1hUamcZOhAoP"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.73.949_1584194467020_0.637659476325114"},"_hasShrinkwrap":false},"1.2.29-canary.88.960":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.88.960","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"10.0.8","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"25ae3f8057ac8ad8f81438d650081d7a266b0f11","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.88.960","_nodeVersion":"13.10.1","_npmVersion":"6.13.7","dist":{"integrity":"sha512-qXqH8/1VIb40iuaFO6QCkZjP6BAZJvYKpDBmCuj6Ordm/U5StOBFB9A7RbqY74fXy/uo9vSl7Za2LtUp1omS/g==","shasum":"e1e8e6aa21438eb78dfe30f3b1ef0d0866844491","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.88.960.tgz","fileCount":24,"unpackedSize":71654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJebOQuCRA9TVsSAnZWagAAguoQAIwDaUFHIwuINP+Cn1eP\nPI7hUkqXntdtRPqhBkv+Cc2fZncm1i/AwtKNc1ZNFWVxjKhTku/JK/4Nqaq0\nI7Qt2UySK3dCVNTPoUSLL5ykLsGN9Sz+a23SDkLKJYCvWDfu5Tqf38hbwOOq\n1Hc3laLLTr+VuehuvLJTEpVvsq9CEEbbj0FvqrtmBfn9FTa6HwVHPIg2/gu6\nys9/k1GthdCmeL1M9EJ4MarW2KH28zUFnr5y7N9W520H+yzeeK1S09aMyZVS\nL78gc0GP7LGtQ/p3W7uDoDoyszJ8BukHZ/jXgjQDnmjk7V6GiZD6BKefTvvG\nNXJI4M872Hj4yTKPEc9zkwwnhGw3gxovm2bHGRz5ElEdLevahxOnZWpjztdR\nF+W3LLdZVMxha+CHf0yaPm/2Q+abvayqD/YJyayGoH0i4em3wIEoBKSB1q9I\nM7WiNezoCc22Qx2Osoq+cBUkxcRTpvaVgKIsGIJjoQEmjdLpZADjDu4KRZGG\nBsy0a6x048sW30COlDzq8gnc2CIh456Z6Kol3RDwzNDaWpjYuAlsa860bKep\ngMaZhgUvo8zkeDM29CIZuM8A7PTO3GxtmZpTlHe9mFLdAG+S/pvM4ZSqakMp\n/FcuD9ByufgHaPR36ZLTJY0HX+awZYtYaS5C+dVCv0ed9NgxvY65PWf9OWBc\nEqbT\r\n=/Qoj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVqJcQbNrdoqUcepfDpxIZUSC8PWwdN4jPpVd0oyY7ywIhAIC1BT3G+E/fPMwnHvC4TYIar3pFu/sLPq0iNo1tt6hf"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.88.960_1584194606285_0.41093231031104427"},"_hasShrinkwrap":false},"1.2.29-canary.64.959":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.64.959","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.19.0","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"93f95941da994bed94eeb83cbe69d5e3c6fb2d20","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.64.959","_nodeVersion":"13.10.1","_npmVersion":"6.13.7","dist":{"integrity":"sha512-BnRN5pup3UN2IXjeUXmC/0/Sk6+TM/XKQYEQsmAaWcvHgpuN2E+LFrNRzgueHzVubu6OVE+ggIGHeR0BJ94qoA==","shasum":"b02b07f92a94b01ea07c37dd4478b160fa022d1e","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.64.959.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJebOQ5CRA9TVsSAnZWagAABKUQAJ1T/E+IPa4uacmRjqhA\nwQ9/lSWMj5Wdqlts59XnzTSmj4ktIlEb4Dsr+gcukjvDFIYtSFnqZ2x6dwb2\n25dyjcXv9XHb+uWDR7mNr/oJUvpFdv6+DeVqybgfpWKsc69aI01LWkfTfxMD\nppAx3AUo1QbbZQIpzDen37WtCUNu3cOSfNJVfdDjXc8TVE/OLBfVIg9cp4fh\nELTU9Wjhiobt9j6HljTFysfcPydMDnmqgOZifoAoC8Q9Dk+WINEAw5Wgyzf6\ngxT8HErDyzH4XUQWeTNX2BBt3y0Fk9QyB1kPh06LWVSx7mCstnPnCUfPOxvI\nPH4EtXYst6lUYhq00HPEjzf5ZMhkpAtQ+nzvaYHpMQWyIYo9nIMTKqq80yEd\nFF3YyGqUKvY1TdBt6XTa76xjq/Ab35Ncv64rcGOgD4parY4TxU4t5BqMREs5\nteialLJ+YeWp+MF5D8xW4uRGzDjn7TE5btZdsf9YK+e6B4Njtd11YM5AsilB\ngDR/i/487cqBrdEC+PbEGmX/LbViP5kKV5EzP4QRYIBDeiIutbEhi8nOue7k\nO1reyfSxa9qpB2FZRdoDFGhe+ERKkUrvIXTVGbibQ0uRNfL55EwIWUTAKT3c\nJaJUbTa3L0AiC4VfA4Q5rf221oDEu/1cyOYysolDA6kaVdmEQglS0QycKkC5\neDCJ\r\n=7lSs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCD995yMElzpKzOCBqjKJhbosiVKFzxSmo8qyAS6FRNQwIgdCT/lS7dzOOVDN7+GUqTEOcB18QwEoo2DDUnvHtB1bw="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.64.959_1584194617008_0.020207327957197485"},"_hasShrinkwrap":false},"1.2.29-canary.68.958":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.68.958","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.5.0","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.13.0","react-dom":"16.13.0","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"05e91dec6446dc338d00ba3e5b388e49d166582d","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.68.958","_nodeVersion":"13.10.1","_npmVersion":"6.13.7","dist":{"integrity":"sha512-ys78Uh2T/CDmIU3MQMqGEqmI7R66IUsei468fWiUok6MV/NZ/N6gnGor9fk5SnsdQqXwYxHhzjcb5YEh3IbdKQ==","shasum":"78010fdc291d8e1e35b313b4ce47b016d11af6b6","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.68.958.tgz","fileCount":24,"unpackedSize":71653,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJebOQ+CRA9TVsSAnZWagAAeSkQAKBwjF1fTrplZ9Yera2I\nsfILY8DujA5T5XaL/MOewr0LbdHcOGbhTBV2vnWeVj/Fv6lrtGNzS0cdCtZa\nkb2dJjAuyAxyl9CmjYNcyZFr8BAaoIiKfR5T+ZydrrFWsIts1hdN1SaxBB1j\n78JO2DAghmT8ynDlwjzTsyZ5sO5wIwZpLXCdUc9c3nz4nEBD4J5VVhrs+P0l\n/iuS6mT+hIwyNRoYseI00BOh7ifJzm+0oOUoIsYq9QEydAaGwJHRZ/AqNPsG\nsj9ArVVMzs4YlKDQ/I1MXGrDdnXJNlqGFjpJ+YYkzBxkfOuLHdhW4ZGyru1e\nDVyBXByLiwfIWZLP6feDZ6sqlRdEEcF20IjEwdEr4UkcQu1LB4uObzKnmhXT\nk88Is3w8/WW0o+sypFvpxDH9wzUmfB56heJHNf7bSr8fD30SJnphL3F36l6/\n/x4+gfb22Qi/hQLs7FmJhlsSiMfUg+sNyaz+l6OLISNM7O2+wmnJfz5APUEN\nVbrg2L4pFiAKh4hA+WA5qtjX7YIsoObvHbMAHSy/f6+ukxPXgeoYPjhw2XCV\npM9omWMOB0zjNW8CI0FhTQkgQMZ9ZvH3qMxuPstDfweoP6jAAKM2TMySHI1X\nymz1h1za5rp/W4gm3euW39CWqHkoxuE7WMUg/jwjwwDmmN3nRRKuWL4bkwbQ\nSE4I\r\n=tNTZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoVe69o7AZLe3k6oi8biD4BVkIV6qErygei0FG09FLogIhAISlxNNhhFY1GDIaW2KkNeq2Cg5neThArBdYxOrDlXye"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.68.958_1584194622383_0.9159778177876954"},"_hasShrinkwrap":false},"1.2.29-canary.71.962":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.71.962","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.3.17","@storybook/components":"5.3.17","@storybook/core-events":"5.3.17","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"69cdacecfb2a3308790cc55db8a40e6fcbb4f972","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.71.962","_nodeVersion":"13.10.1","_npmVersion":"6.13.7","dist":{"integrity":"sha512-JGcpJ1h/2OtfrqhAGMj/vaFj1/bzYqnngQAgyp28Q8cqXPpbaspJCg1jgBNDDabxeiM4HHScMJJfkpDO71T6MQ==","shasum":"b5a91c84afc733203c668682fdac7aacbff8ff4a","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.71.962.tgz","fileCount":24,"unpackedSize":71656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJebORLCRA9TVsSAnZWagAAYp8P/jK2YMiZxbbjLVHcA29+\nxb2QYSmoJfckQiFIxggdBTanH9kaiD0Ay3dxYW40Df/a3zYDFltAAztwk8dY\nYnzfcVo0V9KjOELlGhqQnsr2PB3hiwb2jKZEwZeAaHvQ2opOiHzsrXoxF//H\nrX10Tbf445YmFvFV4tK0NguCQ1HSQV0AbY4uaI/TP98Lsl4FLUwYjtviG9gv\n45Y/jQzOwBNrKnQf9B2qVmB694kqVsgu94phsnizmnhoCzUzyQ0ktKV9lkEd\nx6nrsZCUhEWdrXHUNW+OsKWogWRo7Y5dQxC3ZZFnnso1gvlgYY8l7irbzCUc\nY45mkd+5kg76o3XDDiYemjWDyI41rKWd6/vRArTjvagMaZ8MUPmVm1ep4U7j\nvDYUm6L0aYJkfWNScigAtn3vHPmpAAelkTrY60Rr28V5ETaNaq59Uz9dNXRO\nVH+DGjm2/Q63ozbEDfUsAY+OZInjvkdXfbIG0RqFDs8S1Ort1Mbx604dCkoT\n4D+BykUuFhziuh3pQ+YQmkxQouvrHO4d6e4AgRBsXV1bixsKcxDSEUgcouH/\nkze6v5ZnU89uSpL50k9UvyS458WehPyFfcXLtH0nZs0t+S20hkpgNGRtX6w5\nOAg5DtDYyzAXg/0hsDRHSLiMdG/5duBDPDg81E1NTslgXDlLpp2D2FBrSAbx\nJmX0\r\n=2YC2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDDOyQJDQkHeysr7yt/nP+P7+NGV39OuDEKik7ROYcSxAiBOZbkycldg1oSPR5Xe5o3PXqUnoI8T9p5Z0Vr5DzjFcQ=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.71.962_1584194634519_0.4361207384530772"},"_hasShrinkwrap":false},"1.2.29-canary.90.965":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.90.965","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"acc55e86b1ba1bccaae6a850c4cacfc6428a1dfb","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.90.965","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-u39RTS0Imuian+v4opx6jYLQdF45P3OduqiFWcdT16y99lHqNbryCvK8U5N1B/8M9O8sT17zab7A3CvZ/WR3NQ==","shasum":"4a79a9d29e664a70e9fa0c7bc040c490a75953b5","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.90.965.tgz","fileCount":24,"unpackedSize":71770,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeiefdCRA9TVsSAnZWagAACpkP/176ElgDU5ZyHCd0RHB0\n6fY4NbQ6q0nePMgAH9Tb9hQ2hsI6cINNC3piHw2WfUET62I3TxbosCuCox6t\nR2dyOGhza2wU+Rpe4B9jAEKJ3G7PDkBg+Y0vztvpJK92dpB31bZHzAdp0MC+\nqEgD2StcrSwSl8AcCL0vb14uhranYgr7a+k6eLoOJEo7+hZUeOqDi3fvwMQv\njNfE/OuNyaHxI0eqbn5Lx6HNZsnc3x+wZRIh7Td0f8Oeco6G/mg8sLxWzfVJ\nfBCSNUID1AupL2iz1XKhPf0kAI6oPXUdPJppXimDqcuLncrOzNdHFientnlO\n2cqhpFiQZX0lYbcB4FfgZ84cXn7DrpvFnjl0rNA1CZB2Isp4I+ql4XvHnGXV\ntuLeXOqpAPEYDAsYAK5bhEAFKAfwG17ID/i5HKpxpLBt9SNg1nsxxIjDdUig\nJh/sovX1rhgAQL5kC4y5gRGnEw28KVp0vEBCXsHSHgfjoVQf66BXvP2eJeyd\nhVtazqUnNzJSlaucOjai+S6n+BZ5OXGuf2bvkkupSU//44vB31HiYuQf/OJY\nLFFVt5JZfam2EHZZd+LVDmyA3SBryRq255eiqcv/Y5jHSUjZLDiCyfXVF482\n0vAGErKzxEOGy0XCnMMT2HYUAQHxpuITOREKWNmVqntazGPyfE6Y86cXfl6r\nzT0Z\r\n=rV/x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAjbF2yK/H6CefqN5Tg457bcPGE+iZtI6ECLcVQLtTxGAiB7xTcdmj0DRMDqpAYnbPUJ4aBJJHxLvlkQz8j8OyBxAw=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.90.965_1586096092576_0.5322588750224646"},"_hasShrinkwrap":false},"1.2.29-canary.91.970":{"name":"storybook-addon-react-docgen","version":"1.2.29-canary.91.970","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"eec853e59081c325d2565666ee37d6cf4cbb6c36","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29-canary.91.970","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-dKgYQvHsAT33yL/XUJTFYEfBIR8CzTuLhb5oThQwOuHMCFWnKAgUJUE+9/PR7JmabyvPXo6cWoOufjN4W/pqvw==","shasum":"a66ef2b6d673ac65c96dbae7c4b2e4af241f214c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29-canary.91.970.tgz","fileCount":24,"unpackedSize":72163,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeifh0CRA9TVsSAnZWagAAA1cP/jIPRwcCKWn5N5ME48CU\nraxv2SxsjZtfBQMmBdn6ABO/sUY4DW3cJ7iiiVZ2ZDS8DU5pvQszHicGBPwS\nqcZqT8xebOE3P2ufrHvs9GOmCg6XzKwceA4OSlh//DUSQyxb1IflFHVZyMM8\noIOrh3cPYBkrLh3olnOPJMH6egufoRqHhZ6/ptuDQE72Iq33S83+6zvHu7lU\nSXuQI5SPIvIsWfwmiuX8EVonHFwouRCGWXhFnn7YsWUKUSvfdhdyxJHWPSIv\nWuBMH9Dtd+eiIUIUMiBg8cBOrooKwZkXwVVtKD28BDtZ7inVW3ILvk1AcuGV\njGkA/ZatwGNzwtuvrP5tYsChryq0RrHCxXER3YjAJj2al/9G17UtPSmuTlkY\n38EBDTYcVytEgJR3pXfOssvsIawJBSce55d4O1t7x20EfEPGdf3M4jbXxo5F\n8oSbxLll7F4GJcm4q5DAJjwgfsJ3ybLYcjRj3B6S7aBpmvzPJDRSLNxhkfDG\nOTcQJ6Zkj4zXV3Bh3AUnZRBEGN6mwQTx1vGXX5yxhFr0iXv9LXi5n9T8kfVT\no66m83y2K8SiW/GlxfimwyLZyKAraNdqZ9KRsfolMKd9M5kVHAOqG1CvRaRU\nZ1nQ2MQqu462bu+ua4zZBhC7V4iWYSQFl/NzPNHYBJdn4d5QhNJDJnofu8P2\n9yn/\r\n=jHJS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC82JX3ai2V059s1WvWqlBap189TbG/ptt9/K6Sy3sQKAiEApIPZ8L39tdU/A0McfRXhJNcfz3XVa7k8tZW7Sq0cBwE="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29-canary.91.970_1586100339668_0.12822278098609607"},"_hasShrinkwrap":false},"1.2.29":{"name":"storybook-addon-react-docgen","version":"1.2.29","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"96d44ad24334d80b8f8f220fbf21e945f785e8dd","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.29","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-+p1rx0xGuKtPlt9WuBv2kDwmusA1b6tEplkdSUYq2uiYGQ9foDC8bmEL8EPfXn+AEFYMZ3DsB6BsC8kz7pQHkg==","shasum":"3bcb0ecd657a24b05ca6a00b89a81bb87f83b340","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.29.tgz","fileCount":24,"unpackedSize":73464,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeih81CRA9TVsSAnZWagAA5wYQAIo0nCsBzWybbdsjk997\n2qHsyrVwQFy0QBvrDs0QHBfSiIKkcsQBiBq2+32qkIEbe70yCF5LGqN4FIl+\nwz96CYMyum8yv4DCdPVJobybYVoMsAL5MromsjkpGME0NT+kLokmBP7IAACT\nc6aqtEwo5od8KHibrNJjKLPETJvUlDFln3N9EZty8cToxTDWMyr19G1mkuWN\nWPF1i5SN7jyuTjpxKUceaPH36UYSyd50ubIZo+pyl48bMj+YBVNHSJfqK/tZ\nQtmFDoMDKRSVDDTzddwIR3Ce/04YNy5xnou8Xzf4DtD/Oi1hS8Sgm9quQ0Iq\naLP1fWBoZ8yRqYV1QsKDTET47BBOwDnZGcocjwLLRH1JKurEHck3U0NdthGv\nQYb94tIxkXxYc6tJf+kj2RQvEUST892fMXqov+5CH52i9pFZna+JPr8ijnZL\nc3HwPNr/6AOUluPsKKgTEQBV3frhiV/qgsBSUSzPmzVh3R8HzMkf03JGRm7/\nxJgRh7rzOzvH3uxyQ28izC7P4FmD7MvP4e7/b2TZiPMSVWv2PgfFnt0XgJ9u\n0E1amL6OG6UbD50p0915TJ7kU4aUWZs7KNyyo6DAw0R1bDPlV3/iNwWZDhYt\nWuynjFO3bE4cJV4WezREJNu8hgiEFlUq5TsHPDMbk3aya8CmVmLyoD06XdBs\nJzTx\r\n=olxC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIK1XtDEiCMQew4l7N8SN4YRfYyY/Ckx2SqDY6aq06NAIhAOc8ug4FCo28EGCNwzQQhGlWZhOCFNTYLj5z0qIJy9v9"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.29_1586110261037_0.7502198574853234"},"_hasShrinkwrap":false},"1.2.30-canary.73.981":{"name":"storybook-addon-react-docgen","version":"1.2.30-canary.73.981","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.0","@babel/plugin-proposal-class-properties":"7.8.3","@babel/preset-env":"7.9.0","@babel/preset-react":"7.9.4","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"91eec0037e4b34154af122f79cfa48d25ef836bf","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.30-canary.73.981","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-XDRPDSlHcGEZx9VpXlj+XvaaT/8ntyhtN3pTwV8kHZF+3PynzwF2S7alC9pbnzbrEHZra7vyG37qrVvxkt+O6Q==","shasum":"8664199d32bc4831f2df0bca5fb23cde83d7dc0e","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.30-canary.73.981.tgz","fileCount":24,"unpackedSize":78097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeih+yCRA9TVsSAnZWagAAJgQP+wUoPOOOtX2neqFtVWqa\nsfotrlsENGLmtom5pgfEKcv1vAQOcPCVoJ5rBq+ZYjwgQnuhHsfDmw01pNjZ\n6dpGiqYY5raKayhJDVEdvBCZIpf18r+5sXU6Wt33Ns4YMhsU/lRufxjJYYao\nE9EphY+kHE/BdcFdLyoc2e74SIBbA7tC+oB3w7jYuhXQkFMtFl6BG8xONuLG\neb7FC6jWrzWmRMzOnbsBijTrZfm7kOGizev0Spes+HqnhGfOi5TzOUjHtawK\nrRynbEtvUTPhdO9WfgIkBkze7/N4tBDDd7x0lgCcQRXLjSmkRQLpcQLMPQyZ\nfdzslQPpbz3PW/+IqyqZmBqg/Xv7QtM15lB2KQ19psL4Eo/zgQKmDNxgr4TU\n5Bz82VZEkl4m0KwzZDTxy5xip200lQ923NfIWV+4ctHvGU7nH6cXhLivoIy0\nddp26QIZZ5KcjKT4+4t4khs52TyiXEsuqAsUzOvf1wP1dXVy48LQauqNTmRW\nudEk4OBdk+7YYkjaBLRRnOSb1YbMI3GGbSztVlZkkS65uHBfXX0zE8x3s4F1\nbuoRRNTcv4yNrge/abwRuTSeps1waKUrFAV/4YdoaPgDoeOhu8tBfwAPYpAV\nxC0/jz8OJ6JF047okDzCAfvDPqVdOp6GJ+fhO7o6e7jMceKyma7gXzxngtAe\nzh7T\r\n=xZFT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA6E9f2izRE955Jm9XVweKb/ABUACLBBJL54iCFMdvLbAiBxA2uBiaSTPdlqPVhqlrg5FWamqPzw6V3e4bfX7oVwBg=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.30-canary.73.981_1586110385388_0.980164905131035"},"_hasShrinkwrap":false},"1.2.30-canary.70.990":{"name":"storybook-addon-react-docgen","version":"1.2.30-canary.70.990","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.10.1","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"b7fcfb59a353ac5db05fb2afb251b84b64ebb59b","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.30-canary.70.990","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-iIJcUDEM4WumCN0fhZ8/RaOgFfHAk/1vLN0ZQdC1nUPNN1/K4VIDN/gHYR539MspDHTgJrdikgi3zPmFvSi6Mw==","shasum":"a6a6993a7d9051fe1164687338fcab5d60e73683","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.30-canary.70.990.tgz","fileCount":24,"unpackedSize":73479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeiiAOCRA9TVsSAnZWagAAj0IQAJWjo39k9Kb5DaJmvyhA\ncDohwrzWbxYFK5ol/NNpoabDL9Dhs/cskvLXBfaSozno7GlpoaKwZD6LWn6+\n6zHDGqNdiNSpVxW9ogqSG+otC1VTijg7DD1eeK4thkZUs6O4q8oYVMK4qvF7\nkzKiiLpK+LHBcTd+RTtbUGMd8MOvG4VqYzmVlU9VkPRuK9/Zse0LFYKrKOr9\n6St2BGzqacEPmRENW/AgT3GzgxWfPCKVH4kzGMOEvYgEQJYOjnQUZ3iTLTgK\nuWEyLmcANtNK3WKkzTI44K70SqncIE5q8QS/uFir2fNf9Qu93GDz3M/OOcHv\nO0fNdjPDC/FsVE23kYE2J4+26zU7cy3P7A30+YWOdLQjWcE42/XKw4TAfZ8j\n/O5U/oaDIpxDYeG5sV58M5cNCX+0As45dCVVFEtMf4z3vFvRu/i0Uigk+J4H\nI3Kim2U2GQaUovUAsAnbGq6tUQWDLhLJfreVQierFuLhHmkYyvk8saUpEIO4\nZ3nS75kxCvYFRORk/ZjsPkUkk3Ad/h1QZwsFLP2uzfiBhSpliyL/KiA9GIuE\n1huAeouAgCTfVYBuht76Azja0MumOPXRzsAD48/q8d+tvPWYcK7JZ5lp63nr\n98bn3Ir6Nc8qG8FpFzhPYm2rfpPExYElvTW7dnt9zI56BO5dYwLUR1knAp/w\nrTyd\r\n=vSW8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3nSHefK4BklIuEvy8gwK0LCVvEARTxCou76RKGLLRAQIhAO7LHoRxWE9VqR74eeAOX9D+y/uv1J3P5gIy//P90Jnn"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.30-canary.70.990_1586110477609_0.863817631560049"},"_hasShrinkwrap":false},"1.2.30-canary.62.989":{"name":"storybook-addon-react-docgen","version":"1.2.30-canary.62.989","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"c9a3c43963edae27edf0f735cfe05f2011d6d000","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.30-canary.62.989","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-bEy6PGpEungFtPQEIccKIIXTWPp/rSrQ928DAH38OarWVHOId+TJwpI3zq4GOV60GdtfarSPazav49n0SnyGYg==","shasum":"c7a99ae70e0de1d12c50d32d3d55e2f757d1d2b4","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.30-canary.62.989.tgz","fileCount":24,"unpackedSize":73477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeiiBBCRA9TVsSAnZWagAAapAQAJpUN8C9iStAdF4mcKX1\nCBtDnEVBQs82mQSQ5PlefkZnmIvjTTjy76wbOcUu9fO/uoXZLi/l9uESns3d\n4UTz/EGPS7gsucHhdmpP6MurGN+5qom1GDwvSNU/XS7YQI2nHByZLBsHLztF\nB0NEbGXM93bvJPXret/BLP029Gxb+K3CEFcBS28aSYblpIotcAU3TSpDeTHV\nYRaSKwM04Tx5Dg5hDg/WFy8VPI/89MTahdJVuUc/x6Awhxi+3wEOmFdQmAP4\nOhTGBuXSYM/IisBsaPT6jHnLyQKanMWA24TLDImje4TvkaAv7NGatGWBOCWo\n22Q3HbcRwbk16qKBGXri+8v55V0LX2CmbJYYIWmPIxKeF/SYeuFxFXxrXJzZ\ngziXvdtCegcXZ3nx+mS7YSWNv0nrozmY0TDJxFoNunL/ym4kogFHHvftl8J3\n4T+A4lZ9luuKaSKW55iwMKDOcvcnnnzlYS0eSphcxkCzP3geD83Bd3bmufZn\n16nlwn6Wn5+p3xX6kcuWuwjvwWmUW79/jyUhGHx5/+KDqMTWNzYEwxRF6TKH\nAKy6cqMz5qj3jH+XXrPWWdUMmL5G8v2Ug8gTYYJpRT6aYlc7vgRrPzgC1sjb\nxDZqzYZ3y1//Wm1n4AXAO6hicoAkBnIDeRQY6LshmpAydq4+B9l5a7FtVXXq\nTixA\r\n=9P/9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFu98/ER1HKY4zC6romEKIQa/Ea8qo8A8u3eKrmhSQQKAiBZhnIG7F+Ktqfx75gh/WRYvhb+at+NQba2YqwLOzMVvw=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.30-canary.62.989_1586110529537_0.1545646939363372"},"_hasShrinkwrap":false},"1.2.30-canary.68.997":{"name":"storybook-addon-react-docgen","version":"1.2.30-canary.68.997","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.5.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.13.1","react-dom":"16.13.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"e26c78ceec310cb797fa38ff3cf90624abd96c98","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.30-canary.68.997","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-yONOKmXsCyJc5JHrCUxFC5l1FK6eC0tnuV7Ch4SJG8VgyE7ENdUUkaU0jZnmshyFy7v2dSHiBEVPuNp7jFA87Q==","shasum":"8c3efbf2cae4ed85ae993e54dab9b0167dfb9ed8","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.30-canary.68.997.tgz","fileCount":24,"unpackedSize":73478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeiiBdCRA9TVsSAnZWagAAudoP/iC+JPu06eUNjNp1T02s\nhZMa5gvLEsAxgPbcJPY2TIfKK8qnCjAnW9o679Wy2f5QccXMuks9g9e7C50U\naVCNcI05/EoAZ72yWQ5Qa1BGI2NA/Qa5ZhkrRgUT3po537P2w28eHz7ps06n\njh5nxRkiEa/nYjI8PhZrn64PxnYC+8XnyS92PPIOxVue0su5RoKR8SDx9TCj\n0Tiyb2xWIV1L3Kp34PjJfKZV73WrWsPXKb7TxvKPyX4RRiF1yZ3nSYVoojbo\nppBhYY2dzQ87JVfBKLwAWYIKwnn2AynY38I0+iWXmjzofX02dDH5k1DOj7H2\nACpWY/KyxjGvZrJxWIFX1tr3HTvAxyI9s7HfKRCob0Xt6pP83VqcDQrk/hvs\nvMx/utseJqwpwcOlUWrl3dcT/AD7LUxd5nD1Xh1ucgP2i2v6kOMbI9a8DHCT\niMTKtEx1+DRk0gkJ2pAMdFaZX14v9G5SFWWInL6FudLgOyN9GyvlQbzI19Qu\n5pJ8RQw0OQBcpDIomWXK45Co4T8G0sHU52dLw10d/aterhCXpQF+ZIQXb/5B\ntAxADKTasyBuwVsH1//ObBTmFc26QaI3dDDngv69yIH1PUxYVFnOr5+srvWt\nxEr+yu8HKZe89DADFZ/opMeuvkqS/JvRgmcpOWGNDShBE7/y5oGHF0aRwM4p\nhUfe\r\n=XoWG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBSO7ZHyLmsfLO6gIFVyx+9TDj7IkznmlpRal/gb0CiaAiBLJtoS7tv9PrIn2+Hmbamj2turnz3QQgyh4lpBOFGv+w=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.30-canary.68.997_1586110557143_0.5863210015527456"},"_hasShrinkwrap":false},"1.2.30-canary.92.1002":{"name":"storybook-addon-react-docgen","version":"1.2.30-canary.92.1002","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"3.0.0","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"6b74418bd424fc8336630d37390b1dfb82e1340e","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.30-canary.92.1002","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-y+OMLHVGqENBKi8ow3fxZaXNCOhga79+yHqlwAgpYRPt9QijT+31Jy2oELeU80+KtIp4fTSjS9IYfwinjZwQAg==","shasum":"2b64ff099c8b7ef0cdcd4c2230fd5b6888f5f744","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.30-canary.92.1002.tgz","fileCount":24,"unpackedSize":73479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeiiB4CRA9TVsSAnZWagAAo9QP+wRVxtJjhclOGN6bZR8Q\nlRL8ZoibvOnbBl9RtDs6oyF87GT44kUWmVSrh2yuGqiBomhjrNBckhWNSHCD\nRjiLRuALPUAlw7D9IDPXcy7zkhWF12Xkz5U1aJ4qRhZfrgOgE6ZqYYdo6pK4\ntsUBWqaj7GngVQvQei6X5ZCHGVQIH2b3AG3i3E8fimwmQ2rc5Tqth9qeEimm\nWECiZti7+lOHJx7l63vHhXeJ75qto833UEbfju8/DsdWSPksQv4NVUr9IXrz\nSgqiAar/TuiClMkIMPQpqYuKHJzKyxP7J905QdboQ0aU79ca/FWYh+xsTE5/\nT1SXhVb5EnoCIdnbXlTyExTvwNy1FKuLisibAVihWiE/2UFkCbpYAIAgfIWM\nzjx+x0x7WL35xzjmP3aep5BPEebzpUkFu2ugYub4aUeJnl7KSIvgyWvPGGxd\nozwedez3pOMuSf+50jRsKyjcl9IEThTt4Cz7E+COTqTHZHsvUIhK0T+08PXe\nw0MUi4M0yz0zhuioRaLpVyVKDFHQPtj1hiG6xoshcOdnRNA7nQW/o9G65voS\nAWWAGxR2dBbdWizmJu+IWHGhoe6WUaGH3hTCD3X7zzRluY2VKktmqmzcm/If\njKj0Zm1iIaLV1rgjPwPtYRyFtUXzG7lhtJ37l6TmlgdTLo5fB3WNhuJ4BxRp\n2A6T\r\n=VFzf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHZGSRd1442Z/nPt6qRyWS0uIiROz9sl5cWqHppLy9zsAiBhis5XBx/ktHzwDJ/NWHRxWKRVN554gdQv7ruMswV4+w=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.30-canary.92.1002_1586110584193_0.8157239003120493"},"_hasShrinkwrap":false},"1.2.30-canary.88.1001":{"name":"storybook-addon-react-docgen","version":"1.2.30-canary.88.1001","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"10.1.2","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"e8b36dc729d0429377547e1eee935ae8ee54290c","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.30-canary.88.1001","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-WaxCkyLZySatodgpDXoPhMaNcmWXbBvLgI2CrHd6XPQ4pgaM0xR9ly/IzSjiDYtRM143kaCLZGiryYqhaO4reA==","shasum":"3c639aa823e5dce1ae434fd46de08b3af3c671ad","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.30-canary.88.1001.tgz","fileCount":24,"unpackedSize":73480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeiiCBCRA9TVsSAnZWagAAbqQP/Riw/NkdkJLDwA9oCxe4\njJriP/Y7eKY1AeNNCKsBnARVVmgyISE2ccH1tIp1lIUOl3yNEjEi3w3Cghey\nEHxCty35eFQIiOtXc3naF0CRZZRabIIpU7TLTCm5kzN7uJtvryr8h0dCAfAf\nlgcC6hcAf79rJG6JytiISMpv4SGPc5+Qk+Q7Q9wt3x242sIUPWX+fge39ngI\ntbKRE7TO7OOkc0c80rRTASUEoYSnVWO30+k4jpx66cBSkeJMXo+juOHcUHk7\nn03IfDliSGopKAHhH1FxDafRH2+mDfH4qOmZTrYhSIx2d6CiafscNLhaUEsI\nsvCmaqsM1GHKMG1pgHvV4krZAJx7TUgRWJHaOkIwDhFNK+3eDwNzkJibFR6t\n0Gi3SEuhSQStcthlahC4xVTKjdI8lU8JqYe2lUm0DUdB8ccoUzd0ss0twxbE\n/7QgM+haEsxSN1IYVMfVvOXt9IfIVdnfHZP8WZPE1KpltXRq4Gj0u9Y17Fl2\nejqbRRXn17SuGpLDNPF49ysqG2IuzMJHCTc/QFpBQl/E1vFuLI5meb1CiMcd\nKdLs4rpJP6gt+fv55R9KUb02QOSyzDl2h1jOoILJmt0YdzHLNZaY4t42VYSN\ndK3J6xEV+33IjlPEnz8mCe28WgRtMQ4Ir3ANLYE1r+6EqRWWXZjsxIUNwA+7\nwxB8\r\n=+ifP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0IgOepQ1/cfJsdgOT8F0TcUt3eUCw2tV6de5kuT+RZAIhAIej09GQUlAkgoiLRFTkUwYg/NaMBzi1cBH+qWLl9OHR"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.30-canary.88.1001_1586110593413_0.5489338823240428"},"_hasShrinkwrap":false},"1.2.30-canary.71.999":{"name":"storybook-addon-react-docgen","version":"1.2.30-canary.71.999","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.3.18","@storybook/components":"5.3.18","@storybook/core-events":"5.3.18","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"d66d0b12adf65b771b7aa39028a03fc868bd7d96","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.30-canary.71.999","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-3bissatES5ZBivwh8kdkaWyMnRPFuPTkkzx1ECZa0W5CFpO6+1u07eRBrxV6TnRe/Wvf8H2tVuBj2HFNbkSb+Q==","shasum":"00a92bada8bd8f33990b2c97f6b4b1ded568c51b","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.30-canary.71.999.tgz","fileCount":24,"unpackedSize":73481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeiiCKCRA9TVsSAnZWagAAz7EQAJGqCmr1fk7+p4S8oIUi\nx5c4DtEvhIEOXf+a/u1WJeJJnVDDNsfQ9117VXHytnOepkRrvos3RthMiso6\n6IXzEKpbCPqs1MCR9tWuwrFeXSWOtkYsQAKsSeaJb6YiY7uHvhIAdGuMnxHL\nkD9dYlEtc6ZWXaK1rDgegGvO0zwDIcX5mLCPjgaCaW3k8mqMhpvBqxUa/gVH\nb845El8F7WmaKM9gEn7nyOL6YLj2+TtUVMepRNG49WZgLecA/+1G/CHivxNc\nMoMAaVVq1CFKNbsl/ISh//pn1Z5UhKxtC4eJhG+9l7E2J7mAvDOteubCsgMi\nAGZwry7rUVtHvEw2Rouu74GMDlbGEa1lLtcJum8qEiTSr+wcky0B470LbUnN\nfNOVmIPSJL0PRfxBZGKOtovYjbSxop/ifyLazYmttEPyU3gdW25B6p9Lngr5\nsXsKINxXCoqGPtZpoem+PjyYekfJZ9Lgqt1EoGxQ9Ap/wOHwB7A9IYLVhkNh\nnzzCuzRSn3VKk9He/OGf/9bJAzsGTU/QIZzhosfGdZ7BUwe3/w/J11dKpjW7\nwCF/ByIooDbxXM29FP3akR6SlKoWyXbtsMtC3a4PVcGz9CS+9QhLm/BoRPPq\n8eD4lI6yktGW9+ObsUMiFO9Zmqph28OrOWZo5oq4YJR0epDGGkFokEgCkbsP\nrpGG\r\n=M3A1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/CbioS0wotTGk7Kbg0qSey40CPPjS/KC7lGMgYyD7cwIgURXvrL4nRzeWKGE8UOAe3UW/VyjkBNbc5uoVPvyPGvk="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.30-canary.71.999_1586110601688_0.7039526923541708"},"_hasShrinkwrap":false},"1.2.30":{"name":"storybook-addon-react-docgen","version":"1.2.30","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"a601628634c83423b9478632c9501afdb22abf55","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.30","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-+GPwW6PQjGWEYarIQuuCXUG/XO6qtpA60GLmQjZndxU3ymS1iDS5ncszzhh6FQ7RELU+LajZVwl/YHzhrBEbnQ==","shasum":"d02b43abb69dae746ace898e42e21272f27a64b2","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.30.tgz","fileCount":24,"unpackedSize":73895,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeiiC5CRA9TVsSAnZWagAAq2cP/3909KiIo53ZLIvTpkSa\nvDsQS3ZI9FiK1RvEC+Vkh9B8m9Ltqjo2RhdCsGnuXg/PK10wZ1XqZkocvBrV\nWVxt09ie93a8LorHZhJ+MSHN7uzENtvN3x1Fbske6w8LcfmBhvyi71Da25oj\nfZXT4khQNFctBduh4GbaBjnZwq5WWvlwdovqQt/UjmYizGWMTd9uWz8WMN/G\nOhm0b3BT80xZxVVG2NxPbfEptHQnyUU7lF1s+qMl3iPpeyPSRXAoFTcSE7zz\nuQElOczcQjF7VsgfkjtLVWguvz2pr4C3XdiOZeK9JemrGBn0kKafexvAYuLE\n0VFEvf7sEtueN/xkkgfCMiB0059aTn8/Rk5tmjQqNmxqPzebt5uze6IxacID\nmkf2OxSOYHcT4UYfpCYYGMNxYLnHeGaUOOJPt2czEKMnCjJQO/9UqCDtVirl\ngM3e00J1YI0DyPvKzo6WO4DM8+qzurx2f3Dzl4ars/bzsM4zTO4jbHyREyaN\nNz2mcKmDOYbdPI6EkNayUkLTsT/nOsR6551GDIEVE25n9YAr7JB/crtcWRjB\nJH1ab3J1N5kAcRPFe4NCvIt3UPFRTHuI/TR5br7P3j/mYfdWVfFSmOUCe4Xs\nrr3Xc/+5WOm7kuu1wrVZ6OPQIFoYpLWT9W5zZ0/W7i7aWUE80OO7nTo+33Fm\nwtLn\r\n=7bor\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2XVYjaDleyTtNEUTOOQa0IOv8XW9ROCyX5jPB+ztUBQIhAIYpl7Is6jDR41pnTmLOIwrZfUEPr3kqQ5PsjeDxWsWy"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.30_1586110649052_0.9368827665830906"},"_hasShrinkwrap":false},"1.2.31-canary.93.1007":{"name":"storybook-addon-react-docgen","version":"1.2.31-canary.93.1007","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"2.0.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"829c9b85bc2dd836fb1b0f7c27d5ba69420936e3","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.31-canary.93.1007","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-ldjnqwHQEaYUtAKLxKcYiVajHCanMcl829q235me68W//t7hb//y8LPHDFS6lFghD1YEjcYTYwch+crvricZEA==","shasum":"6166c2a4a647f154e2fd8a34f63dff2d6b085230","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.31-canary.93.1007.tgz","fileCount":24,"unpackedSize":73478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeiiD0CRA9TVsSAnZWagAA/XAQAJOYniBXFEAN27ZpOnPz\nrXysYGmNUuVWRWbHiWfJbAh1sHyGMEn/fR7O3residz8HRghFPmJjVDBZNAF\n/0f5Q6vuXPVDCpXZOmn94s5pvSBIxXyMvl71pnCn+j0fjmTtknWjhMl7oYfz\nRRnXu3pMHmj6c87O5GVcT51XCbHuuc7BYkJcPIZIKtKrZ7jntqO3V11Fc6Ga\n34lO8gg4gcVfG0TnAqk0Rc6ruEdsfPziHuedC4AvTm2ox8Xdj8sOYYdTO8ES\n/V2v3WeJ+xXfRI8AifQxeWGNcsmrJ/lv0zH5g16HNprig21tVcypJg7ycR2P\ne2EwTJGMcqxBEPvVvNQuULA3heDTXIUpY5i4rbD7uZudJ8EnMAXfvkOejATV\nncg4m3/F/Bh7A8ITVlpEHaf5TqSk0QbgwTRhnHnj6iO0XhxPSMVHAVCPquMj\norss2H3z33VrD2UWMKodiQTL05CbdqezX1w7qwVQZbqAhMTGIxiJnZ2ms637\nNndQ7Mwc6TmZ5HCKtpX0Y3wFPD146sXwkqPKjkRMujA81TxxtohLiumpDrco\ng4Mza7GC6LWeb+JewQ7SVl0QzuK/ZhQIwyLRldhMM0GVxf7AQtWId7U9gpNf\n7H6kZWfj5NTk+L7kigK1E7pJGv132b3dHNdw6/ZeyukuDbGVrCjvTcxdArJX\natI9\r\n=Bpwc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEbl6Xv0E6TROuk+7h35+Wd4p3NhX/foJz3/KI7yYSm0AiBGnl1shOa6LoPb6u7vbS4bLEfc946lMDoLkFkoHqFhhQ=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.31-canary.93.1007_1586110707826_0.25979282378702884"},"_hasShrinkwrap":false},"1.2.31-canary.62.1010":{"name":"storybook-addon-react-docgen","version":"1.2.31-canary.62.1010","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"8ff71b5ecaf3a2966bd172becea7ed6ace3dd928","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.31-canary.62.1010","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-wid/mTLYZeK4JtbqE8Obldp7XGkCHZwEVYBCXdOlVooCR/eu2zuKju0W6hny/k7Gq7nlM/BlCdnZ7brJiohaCg==","shasum":"4668f3fa6cefb257d46cea5e41bac2c080e07e8a","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.31-canary.62.1010.tgz","fileCount":24,"unpackedSize":73909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeiiExCRA9TVsSAnZWagAAKwgP/1WzgCI4bOK54lCZLI/9\nDDHBVX6NwLIQ+NhFSU53LfDnt04YYDefB0WT7PPU6fd4NQTstXeDdSXDELM/\nPi4M2g+vzfr+3x2G8Z200C21+ilnbmmN5TYhwcwDXUqzoGw2XA3dA+P1s/Tg\n/OM6z2oRyfzZLQfUosLw74+Bza7qCVkuKADtaBun/ba9OykqAD2RGMrflKWZ\nXeJ6CUvznTjlNRSXGmx/gKeZ7isxw0XFIRB2uzwRNGX6toY7mAeMXLBx9zjA\ncxSsOh84k8z4SnilVJNWlqSdgqCOiI3jmwE5xXh3kX/mmNy7uB/zjq8Xd7mP\nEnfEvJsHl02ER9Ji/dKMLYQCIFjhWWY7RHUCIq3ooOFi6c6o+W4+wax0DEop\nOcQSFbLpOTV2TCcJp0v3YGrkvB4nvEj+PdHf8uI0v9SHHe1U1FJwbOgfVFhl\n+dQImA8l4dbPaL+S4zZDF35oOdumGkOj6NLfxmbTUhQJL6EH/ku6iWDdy2QM\nn/g0xggWnpwxzIlu5A45ccUMeQz212rjvBgXY7Oc5CoyhPpbmcl0ySuInZ+C\n7/aYZliIEuMysA7la1lKKrZHwEpKlppIqW+xgLdvKL4XVNY5eZ9QapuEu/GZ\nrkiS3FnubWHmOh0u2fzFl/htfbYyeZiPQ6KnmEqcuFu506OFPnjb95t7wMZO\njbJp\r\n=FURC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID/4TCw6kVWHxe94yD4iOLENxvpTqdaX9b+Dwi5Cji37AiEAukZnh1sRXe0xGelIYEjJD+70ugZFOPzVBu6SI4NcxbI="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.31-canary.62.1010_1586110769187_0.05989272982755467"},"_hasShrinkwrap":false},"1.2.31-canary.94.1016":{"name":"storybook-addon-react-docgen","version":"1.2.31-canary.94.1016","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"6e183d53228450c8383e6d985e653cbd67ef4e02","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.31-canary.94.1016","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-LNEoS/ZBVix2pxG85UWUhxzAj9/MGDdWeAuz4R+7bF7YuvnDbhYgvSJys0heaCa39K5622F+n1+z3BmQHhYm9w==","shasum":"5a1118cf53c4d378cc2807f79e07a3c47a8c7b73","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.31-canary.94.1016.tgz","fileCount":24,"unpackedSize":74821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeij2xCRA9TVsSAnZWagAAtoYQAI7VzSgySxjfXvHHayyG\n2Q6qiQ0zNbI2G1MSRPBQ48YArKCLwKfmBppHiamAilD4mNTlH3W8lhXj3Z/E\nM2M3AQRDoiPoQ8B29/ZRUxfcWQdASzMGwp4x033pTKU+ig8tIKZYDTshgI+k\nBdeunQzsnwpriedR00i6ZNYggB9LVrj5hd9ZI2FqhQUKWatUpiERC9UeNbyW\nswPBzBWHdmWPBxbXLdIRqcALzjqHKTZi56ye9MYMogX+4Y59mt76/RWrDSVf\nt5wrKJG+MEIKyqOu1iOvWfm9MvPOJtE2MKARF+tswgivwgOmCVYf0Hl/Zi77\nHC8TBPP9CzKzP1HDQ4UXukyHn+UROMZqm/EWHtLYkD+UmiJqgSAuQGDcJpP5\nGEQLEysV0X1p2X/UQsTO9U7fze88EhJdutDzA1h57ddoEvJo0h58FfUn9Ovq\nXQxPW6boqBp5lGmM6QVyHMWKq6ywpU0A5+jKJf21IoMjXW9X9ywJusfpb1AA\n0AoFdOKmFjsBtloa9bs36hRs//yy48w78NmVBhl9UMV0Xqz+ESKKehpYIgkT\nxzVoPWs6Una0wJOtxJlHoaOi0AVYoKI23BhWC++6e/aJQd5ZqLfqjb/f8S6x\nNP+8Wxrxx76ixj+Y+EerKoCop8vuD9+Grvwz/GQrfeCRFytCrCBgXMaNvHOk\nwGZ+\r\n=kXV1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCd7KoEIpAThPk5vKa3SO949VGIF4zNE7tLpEpzzIqMkAIhANlb6PwQ20l2uyggHJJUvWfOvac7rmmO7kzb6GVh0JbB"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.31-canary.94.1016_1586118064600_0.16458174022623107"},"_hasShrinkwrap":false},"1.2.31-canary.93.1019":{"name":"storybook-addon-react-docgen","version":"1.2.31-canary.93.1019","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"2.0.3","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"5803a265f2f71f846629f0e527929b5c549037ca","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.31-canary.93.1019","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-k7AOQI/33vbnWTpgGZfjRWFIBO9DF4kxVHCJktilzWoVpXDVd0omRbn03tR7E0VRVpFhWv0YKzBwCnw78ieLGQ==","shasum":"63da978f1282eaa858a464b2f8d01a7b3896f15e","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.31-canary.93.1019.tgz","fileCount":24,"unpackedSize":73909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeik2mCRA9TVsSAnZWagAA6m8P/2twkK4wP8jGyDDU3jP5\nGWFeZiCSGRYRkXk1qh5S6jc3BoJ1cfIiRueMVFas2f+jv6SujTKiMehHqPXh\nGr0zsrF9f401Z7mQbDrw9BV2wJAZFJF4LhBtkb16sFlG4npB9QxTACHtD76W\nsXTGQGbxB4aL6M7SLEtbmzX6tnKDLxk1VivgzYGIUCPQ+zoNhHigjy0hmrJW\n72B2TUMct2368dfIcLnlGeN7+1uG43+4JHxk4aipyNhJmJdyDL9mJF3hdNjc\nGkt83/ADpUTNhqWCQNUeEeVlAa9sM5JE7IEpiu7LCZ/9I4DWIhVa9MWG8prv\ndTgoe+jrpXkWgNufBF+aMFS/tLGygaZz2BFhoL/d7zE58YBIcIPKLJOXVBV1\nt4ENNOfDDonOLPV0dQ96u31pEUuSEUmQxldULVQe2aWCvB1G/ZSHhx5jf+P7\n2yUnWvs6HVcZ3k5S55uoUliFMm/9I+Ggn3PVxfbPPo1EXPg9E9gZ+66XvG5k\nWZyd+kfhEYhaOTHDGUqyCbuO/V/lWejCFn/Ie23INA2zhujFMlxHhtFMHTPU\nutIkQLt0DZts8nRt5S9HOpUmmewiufZy/an3p8dXpE3ibvBdi+QjQ0zfwfMH\n3YYJzZ3UDoS6eo0P2ncR6oWrGBE+HWbea3TpNbb2qJhSCAVejCOWK1N5s448\njFJM\r\n=0Yyq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2VWdYrFTioCy0DbftVBgPClduHTlj3wBY5QYeN1mU0AIgdHdVeItAy9OJZ9gLLnPnh5J9/BlVCRRjpndfN6Jd3bQ="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.31-canary.93.1019_1586122150199_0.8518204770339854"},"_hasShrinkwrap":false},"1.2.31":{"name":"storybook-addon-react-docgen","version":"1.2.31","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"47c5faa28b6be131498148f53629807643434196","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.31","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-7CTngP5P2qZGirb54uxLws1KcC8q4l//nsmiTyHn6a6OZ1H1TCJx8TcCJQgsr1rjB+YFYPlb/OHN4siE2zSfIA==","shasum":"a40e6ab27507d92dc626abff087f692eaded49c4","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.31.tgz","fileCount":24,"unpackedSize":75349,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeiqw3CRA9TVsSAnZWagAA3swQAJ+CfcowZsie2zL0uiRD\nU+pGKtsfojbJmEoS9GoObdA7zMp8g1BfHsCx15VmKjq5pJrTm69IcNF/YwRh\nxkyqT7MlQp4j9sUcIk+Pb2lde+AZD9+4PNcLZjVrJmqriv8QU+jv0o/YL2Wu\nk5nYDqfYX3PMhocNb1mi7qMYNDh6OswSEnoebSooa5FcW+yZqaEiK6c9soZu\nAREQw0TiBDLVlBpfFOejfHp6KkddKyAjhJKMDu0TJDr+y6GvEFjJjhKz3CbR\nGiNEkomP8OI9mxxs0Pqm8luX6gS3GZzrGBKbrDBQHkSuBwKw8Cs7E+TzDqJu\nEycHSWXzUkeLvAPwmvskt48U04knXjpZBbpkM1waKtiGKFZLW3cszcUvM1ty\nTsG/0tQSLsSkiyUcbfksCcLd0xjl0TZpOjraGWD5KfWNj+AP1vFEuDVEKI07\nocLmi0rU7Wk9G8V28W75kIOl9NXyey/3EXXEtT73mSoNQjHJYWFW//rgSPG9\nKM0iWReXUo4fHFHimQsN/QoGVTj1YsBCizJ4F7OB0YFWWfml4ctiemffALd/\nxJwtp0vSZt/g7ua98W5vAs3vpNEjuhtW6cBNlnUZcIMzg52CPVw8mKHTp1oO\nDa4SIy4J2c/wCBMeQdTk5zvjY4hXLJ2Cv+wBx4EUrK8ZvfhEnn7fm7cYpT8U\n/mFd\r\n=fURy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWSp4MhOaw2xH+t52LCNEHe8gg9aPNX+whqQx4kboltQIgKZ24+s2c0Ekus07t6HDCJZT46wFCBUNK1DbxCtHQuLU="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.31_1586146358682_0.8106604811146425"},"_hasShrinkwrap":false},"1.2.32-canary.62.1026":{"name":"storybook-addon-react-docgen","version":"1.2.32-canary.62.1026","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"5e8c099cede37347eddb651a729393099ce2bfb4","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.32-canary.62.1026","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-iR+Kz90xfkiSY0B+ZyKa5d8FHOZqpLly9sy32r/+u16MaRJy8jek7OnNvxXfb+7DWM6Pkn2bnCgBA9Q+Me1B+w==","shasum":"0b1b4924d6af950987d58df47bad93bd1f1715d9","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.32-canary.62.1026.tgz","fileCount":24,"unpackedSize":75363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeiqzGCRA9TVsSAnZWagAA334P/1yufy6htBAETTQpwWa2\nWPYHkOy995Qp1CSugPkSHEh5GhuW30SX+d63X5UoF5I5btIp32Fngd74Pm9Y\nw2imGw2qmSqwvKbT3pfgyzw/dYPRRCxEG/WA1ZF3CJ+zQrgNVVkN5E+QVFK8\nI0C185VHNUd6lWKZPoXtBMsUJrYHbMZEWBxoUuyXl4rvtVYvF+CTcYCO7Gqh\nNvCq4DBHKHsxYk77+fc/ZDG2vAWVquANLTXfN4MGpJvHm+AJfamDaUn5HghG\nwGCt64AQM44JSvDSlCH0jjd1Rfakdc9cP4hrtreI8K9J0PZir+/H7uB40Lhi\nkQDN0E7UjRKIsVwWPQ9lGd6Ux51jQs7KgGOhfG+axs+BTMb3q6ZksYaiMxir\necqt4YFeo1Npqnw2WwVXbKCaaiGrEiorkGQ5tHv0bU+hTFqv+6no3v7HiOuX\ne3F/D53pJ3/BpMrgzxwOT9tfZ30OXwLbFRRDq13KZdAthgqvMFi4PlSmCLgR\nEyXgIjfj5Cp4LDmiO/nf5c3d8a7eoaqZKWa08KJfef9vK8J0jr8ypTX//xey\n48OdisUq9fMwVD+fOtUhFp7cwK+6zz0XT1uYclijIo0yJnznnwIkeu6Vo+YJ\nBz3FdObaIEsg/66ebSGgj3X5PHoIlsZ/9D73msk2qBOL4fh+eHxKug7UIvQY\n40qj\r\n=u1cX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEH/atPC+nrlCitlx4LRrMelCVRNfNOjdsp11AZ+1MAyAiEAs1OcuaQtfIDkXkW3bX2kfZZx2UUuivSNr1HucnfJmWk="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.32-canary.62.1026_1586146502283_0.564893767301268"},"_hasShrinkwrap":false},"1.2.32-canary.93.1032":{"name":"storybook-addon-react-docgen","version":"1.2.32-canary.93.1032","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"2.0.4","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"f505cf487c0e7a912982414b3be4475c383fabca","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.32-canary.93.1032","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-BLlSs1tcUyIugjJa6/Q+NVdWytq0cjo9mVRwU5fo1ko7ncXG3gG7GNFO01x+4fPcJlN+8emrO8d4pC/PWUAhbA==","shasum":"a2faa81a03da7ac4aff4e93eca604c962f572017","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.32-canary.93.1032.tgz","fileCount":24,"unpackedSize":75363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeiyDSCRA9TVsSAnZWagAAr8UP/1jChgNa+DU4HU64RdKv\nw1rKe2a/5O00wKK76CYJ6kt76YFvuNMIYxLHHltBYF7jJpwbf10QEBao9w4h\nAeLO4ovSioOFRnWn3lA8pG7xLQHWjOn19FqV4xQzFu/qYx7Tt2eIKvvge3Bc\nLMu6ilits8Ad8sQIHijj5UIUPhWb1qqIpQ0NJ5bG7BuvlDgPBGWbQfkax8aQ\nGTNkk/N6Tg0jpI/zNEZlnIFTENONR9LJaweSWKFUTyTkjnXMB7dkuHsz0pCZ\nMVIU8FYvZeZ7hFsINGwy0+mmmCunz2Ecdjp5hIhMQI2mCFjdT9sCaBEgZqJ3\nyUcNxMBBGYmOhl72aO0RKJybyqXWS61gWmxzR3/iapUTXj/Ogps+u5NVp9Cq\nGICj4keLU9RF6j+89X1cyEVTiF1Z4uwLTxE+a9AeMfZop3aBFjK+Nq4wE1S7\n5IBdJ/CYX4xJla4yBq/GPcxJlBOdOAeqNYTzVtrV8RksDKsQwytISYWarwuP\nH4Q6nN6F9aAcqT/aHMXtEngtNl/2PLz/Qe7+kG5fzLG/i1xHA2++uXH9Grbz\nghBCBJDbvLU8JqYQfxgJDwsiieSmEJpUsAOnaXC1fslhSbx318WeEh0lf910\nkgJZy3uofu06K7EaURmXCWtiMvCV1NJRgji911tkKu/2r4HfQrxkxt2JPKLR\ni9rf\r\n=HBli\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUjCIC31/J6K/cFrWUpYmm/7VcIZKjncAPPP26+Zp5jAIgE+0q+L8G1WFUOyF8ZKzHo4b9HAoDJ2NhURSdCUAGR3E="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.32-canary.93.1032_1586176209937_0.6126440432045193"},"_hasShrinkwrap":false},"1.2.32-canary.73.1047":{"name":"storybook-addon-react-docgen","version":"1.2.32-canary.73.1047","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.0","@babel/plugin-proposal-class-properties":"7.8.3","@babel/preset-env":"7.9.5","@babel/preset-react":"7.9.4","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"4b1def74f12ba4a2540d3c3605cad396756a4bcc","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.32-canary.73.1047","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-iWxTMu96RluOTHiM9eijQfvMKJ0OFWV51GCsDnPNjqEOu016gXgvo64e46yWyLTsm8cfJP7Z1ZHTbsnpO07M6Q==","shasum":"38ae42be71d38484dea217e5e4f94d462706b4f8","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.32-canary.73.1047.tgz","fileCount":24,"unpackedSize":79983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejNStCRA9TVsSAnZWagAAYKAP/1MrCrKhHfESQt/2rtLf\nnlCLeD+VPhbNQEBwMs87dzwWA/NhQS+J/8k/R/5SmCMjrdGYA684Hx5kBlLK\nQ6e0OAtnSSt+umrS8Tawa6CKwBJpa8CyNTekFZKbhf/wm6f3vLOG8vGUpLOQ\nMOQLE+IHnOx87KQIkiBWF5kNSKBUksWBlmUBLEjKKE1GZhmTfCWzuN9SWHOu\nrRr8u+JBQ2xqWITaxGnqzcOhEw/I4b4kLnGiKJe7cqVQZ64au9ID/MBWnnJV\nApH1dKoKfTMmPOHAzZICQfBkCKyKkNQOvwkvj8szgkTxVkUcghXjPJmJZzvo\nKwalGcGtWq6hTdXl0zY6oaQ6p+4uxloGVM8K6IiM4gEXBb1DroB7k9kfyfg4\nTEBJj7Mu8rxuqRIseG3Naw4yYVOtMPHfLmPRucKpIdpPQ7fnNOruOLS87d8a\nHyZyMcHjPaiN3rxmYnyyCjXG1dklJcHaSDvk7m5M3Q6SmJ/PtIUOjNrjlpJb\nFwkwlfXe2xZQyH2NzeCKU7W+7Ob1iuKNfC6whQ/+GMFnajHshEtIirpaOosj\nT0AEu1p7ls8JrBo3l/5zZqwO6dLNZhtURZWKGDO0INLatzeJ6P8Hv7lR7xIL\ncjn44WGv0PktDBRHzJHxvFeHVe8IvRF0eFqmtLhXTe1qW2zrTb+rXda8lNoV\nWGyo\r\n=dOXl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCk8gWRUqMjFymUlOAeGFEDO3qVvVmyeBmRkWqPX5+RbwIhAJIiXLWDbsOylUzDanctIUWoQZTXv+K7J9tVjiF71NgO"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.32-canary.73.1047_1586287788272_0.16435788705089527"},"_hasShrinkwrap":false},"1.2.32-canary.88.1061":{"name":"storybook-addon-react-docgen","version":"1.2.32-canary.88.1061","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"10.1.3","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"8d62235a178f04e8e5c0cc6499ae30bf26496607","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.32-canary.88.1061","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-aA430ngH8DjSmvqkVErL9Wi8u2obak1Ubd6FKdWhOnoLarfnQfKCDEdNY0N/iSoT+OGWFsVyEeFGueFChHNoKg==","shasum":"e994982c069e33a3db61b487b89b20be360d208e","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.32-canary.88.1061.tgz","fileCount":24,"unpackedSize":75365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejzCJCRA9TVsSAnZWagAA4tUP/0c0SSXM/eut5CmFT+/W\nfc4NIeVb5pBFQW+Fh92kZWhgkDQ9vmR9TYZ8DUjrjyMF2qevtF5WSHepT9Mb\n4louiOiGsJUDimXjwNNFJL/O4FeJZP4nuIULvzR5HmQjV63YkL3aWczZohcm\n9j6ioOufOwETserrxTzz3XLJVTHrqwYYzdUQeK6lcnF4OqnR7hD2ncHCAnJP\n67PIr+smuzOd8va3bUS2AseBBre4Zvk5UcCtjqSZsij9vcWLqUjQqsmG1AHj\nJe2/J1OoSOTFhsTj8v9+sZ2nWz9ygAzXsTGxy2cMtpe45YmKwhs71O8kg6rs\n2UZ+oJw/yThDcXHHry9cTSOrk6qJQDbltUt2ciFfKGCTT6rrIv8diz0oeiGK\nMOVi/eGEcbtkvdJamjDwp6gI+jUAOT6MpJeuGkMV8tsCcDn/rTCTARzyC27b\nCEWLUZzV5kTHzrM8hgH1lv45WtLcZnqYp4uQqO+u16BgkUeoIxozC9DIl/FH\n1CjIHTgnV0jsvkzdW+9sgjXRoglEAG8yXUqfU9DxBuvcCS/NVnnenUTaKYo0\nVhzU/c82G9Q5xRkAF8/dow33She5YodlNV4mv1c6Fc235iXBFXgjKElMhrP1\n7zxW1M98qR5pn+zaOtGNAoISLmEQ7XVbJAZ9dn0SNgZ9yfAmYtplG/PiH0tN\nzMr5\r\n=fAlW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGGnJhrabPvMrqfbyR2JKLi6m1xdQIA8jrCu4VeRf2XuAiEA9CgWdC/dlRrOTMdxMTbHRajr0j2CHhGaaecTNdDjUvA="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.32-canary.88.1061_1586442376859_0.900546715557953"},"_hasShrinkwrap":false},"1.2.32-canary.96.1064":{"name":"storybook-addon-react-docgen","version":"1.2.32-canary.96.1064","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"d43a4387e25a044c0e345b4082638c50d6f07b40","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.32-canary.96.1064","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-OuYOHd40OVikzQVFDP3lOg8hsO6DcZ9dTcaKTAELBcllVE0wPxqe0oq838e6Y8aX/AjJH4ESsgjv/JroSmKjKw==","shasum":"f4034fc20b3b8582b0ad0844fbed6ee0daa21225","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.32-canary.96.1064.tgz","fileCount":24,"unpackedSize":75376,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej0WzCRA9TVsSAnZWagAAxusP/1AuS8OeDHO33nRY6NTL\noWcNF3qw8OsI7sca03oNyBf2pHaPfDp4/1pSP9+P6ga/hdWc64qbnljmbcn0\ncoFHnvIxEzbDf4iBLpzvwr7hpqw+fWepqwtTyvd17eP+4acXiHR3rzjt9fzz\nX6N+T16C4xKLDwNjYUHPy1G439lpue2KIuU1RazBjLMlmFarGr+Zf6GwWQFr\nWCPHDGIKCed9lq4Q5DEcDGX82x0hLPFuRnGNGzlcYp0fmAcRFoqGb10AxqLr\nSzC9NITQoMW0MK4rSzdal/zvZ77zrVFxQ6f8pjoOowA8Sd5KWVkllgQ2M06e\nUrUgdM1Cr+6WKpZJXJMSQgJon2T++upHvP76pDPLcQRcKY/Iqig/JmoHhiAg\nDUrEgfVvAIyUN+VqcDX/gXl5u7hw61+0D69gh6/ffWtmvJ9t1A6DZ22fcOgM\nHgm7OTRYLSwBXSUfgV4/K15dRxhKHdPVYiPeIN1yRWW5JYfuR8D/AA3ryCcL\nQFyIOzZfIxvYSFpDksrizzLj2qCM28+LgtSV5LZUW2hb0VTMd2G2J88yI8hw\nH5N33EMzIukLG/TlpbG3YCa05v3omdYSAT2DefsSAeU1nnQqGAxnNXrZGf6x\nci+mWiS/AmZtiodtDOI47WG5wUeFufya0mtzcBAq1Se6TelumMTfvQ/nv4ho\nFuSE\r\n=T7if\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDLyvD/fGYHS1+k0+5gunFpJXskkBecKGfgXDE8udyj4AiEAiiDWhBBKuMa3fy4f2puu3uFjVOhu8i76oh0JM8uMyXw="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.32-canary.96.1064_1586447795017_0.44709549538459714"},"_hasShrinkwrap":false},"1.2.32":{"name":"storybook-addon-react-docgen","version":"1.2.32","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"e48dafe0bcba24082cf46e388a3a711ae5d2cb9a","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.32","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-qCn/8bNLptJvok79AbhyRcUquzSl3WH3Sck1Bi60MpU00GHyYCqE8JeAfuQPPUh7ocMpqitw0Z+Prz4gzhuFOg==","shasum":"3226fca12a0b5a971f6bdac1830281f83c96d0f2","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.32.tgz","fileCount":24,"unpackedSize":75699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej1J1CRA9TVsSAnZWagAA9e4QAIcFsJakigewgt2oys1P\nP+I3mF/66eSvaHLl5ZBbrrjaPv9UNd6sO0l0YXLIzWUO157kMHV5hmkV2GEf\n8pAybnVCyy1MuhmqVjbF/gLn18RegoowmTCPFcbk3MgXRYeR+ubLj0iweIbI\nhyjqesEDBJ8LA2cEeMA9pRiLGYQxF0BvlkKOtzFshd+XB4+sHM29WFxUtc8K\npPkX3scvUu+OTO0i70YPFo+U86px0Okqb4lDnkuxtmMSmsf4q4sNaXIwBQGs\nUlCcJ5iwm/9iz9fccCzS1qxd+VKcbZgmEzqhoz64ezkhEhsv0Y4wR7QHP0y1\n5AcOUtjvsCjmPV8yzTJSArkzbb57681m47CBBElNVlapnb38z+vlg7QPvCTf\n7nYhPukUJa+a2cUBwkYQ0a1+vl5wTOcUUgqeC8WGMXN0lkyHH1XDU2pnUR09\nHEdFHYL1q0c7KkBWDNts31q6cVWAqA3B9OOlw6io6f8ncZetGWyui85HdA+M\n77u5C+4pCzWBOXqPxF7D/uv+d1scvgRZ09gs8XifkH4ojitv0wZdVhnlDF9o\nMHcrEUOYVKoJxI/AzlnVKj9uFi6UZVujRlkcz7MUxqoiuQwAJO7G60EGTcnk\ne8eeEF4SWPrmyqih5J/GkuQnf0GBQ9lsgQCfqlTBN0Qq8KwaXf+B4EX4WIGa\nwC87\r\n=rIjt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICE+HHjDC0Q3gbaj107ul/1K9uipLerOCAK6TNgQH1bMAiAzbkkVm4+vq3YT3vpKbtdgbKB+MJKfNyiVJ4oyuMheaA=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.32_1586451060477_0.6408187842483828"},"_hasShrinkwrap":false},"1.2.33-canary.62.1072":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.62.1072","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"c52ffcc23016ecfd4effddc451770293ef8049b3","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.62.1072","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-t1fe42sKwwxlA6W+aXC7M0jewqVZ8gM6WyQAUdSOQOolyUnU/F9Rz6Sk3inGAU7If4ypbG632N64SKO6MAnWkA==","shasum":"1c50de3808dbefdc1c1de6619da050049781ca2a","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.62.1072.tgz","fileCount":24,"unpackedSize":75713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej1LmCRA9TVsSAnZWagAAV8sP/A3lpmqn7gmfLzMbtsW0\n20r2DkA9U+Fr9Sr7U9ctuxFskmiBnE96P1qvFTEH5oIUoHqtwkWcgKVJUDeb\ndEgW126cfP1Lkv2yR/BbQ6Ar6jwg8oeH1aJ7Jxn0bTsP4YYY2qCqYacIyygK\nxGXUtUy2ACEnVmReV2aolk/Bx3vd+jcBf5OsDWyiAveRTPqZmWZAJhfWgYdD\noVEXIPqCF3VHY39sPmghWSKxo6a3FJRT8OLmtZ3PSASGfdJkiLW3c4J7yNjo\nBK44WICM6oPEvqW/5hX4TU5cSmMpWqBn9PaHfyWkaE0rr6SRQuI/1lOl9Nai\nKl2xc9GpWWOEORjCV08oJwrtKxk4GOki0C5/wYSGcpvxEx5TfdNu3ckr70cC\nui0RuYSieBM0CifeXfGNIkgbWINFHHhNogSd0qbx4n5GvcMu/RItUj3PoMau\n/RSxczR4poIo6JTdOWCnLguNEwfrUvxcgNtTnlwIGzrian3a6nwkF5dj+dau\nArEUVMKmDklEqmO6TcfXVEz24zQ46v3m5IuYJDs/JFifcrH6d4lxVgMb/eGc\nHJT7+awV9KWiLDSZBw3gL9U2QwGWCj4EYAgrJ3PNZtrN6sHz03s28xtLG13B\n4e5Q2JVtBE+IXouSDq9cyqi06HHkmRoDUHS5YYmmqQLJ8nNmMdNAAR1qJEK9\nu0Kp\r\n=vPn8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIArWoOqe3z1hnB2tEArfpYjPJkJdZLejkdbRAVVwXPY9AiEAuSRpclfnpjKd4DnpwsG8ZnJ/BsPUfr3Po0L4cs24yd4="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.62.1072_1586451173730_0.5102880848961207"},"_hasShrinkwrap":false},"1.2.33-canary.83.1074":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.83.1074","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"4.2.4","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"9480434891e47e92550b0a133ab7e2498e3f4bde","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.83.1074","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-URkL8vU6/BhQPTuU7vuApm8Ni7pReqy4qZaBa2SZSpggwIJigdIV7pY2hIyAfhxV2Dc4bLTBHgVYxoRq7YyIeQ==","shasum":"0af2c468ce524a9bceafc70e0870818eb1ab17dc","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.83.1074.tgz","fileCount":24,"unpackedSize":75714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej1N4CRA9TVsSAnZWagAAzSkP/04rM63yeVTW0eV+2LI7\nCu04ZcOuioQZdB2oqtG38zeyYW8E5sxVivVmurbveoT9joWjYumPr04bPuix\nhM3AtLNNpt4QzoZdnBt4yOn46LcmfgMq3HJWdhN4uH1x7zGUEFkVTyheYL6e\nWuiQc1MuW7I7Cshxfonm9WxwGMDhQpONStxsoJcj5olDqRPf3lz9lfN4piR2\nUPqobZkUWXJ1QcZ5UfryitImiQ0O/QSAc54+6Dr/Iaoz4xzkl4T6Z2t/0r0g\nb+d1KDOpUtJJc9EDcc4hOT9GpMwAQYBbD6hPtqmBlpoO1Pz42ftsP8CoAgH9\nEoS4p0zbdpX0+v42JHNcwG0+WSVNfqRtH3tttAxWn9ByXx+GsiM+VAkNVKey\nD7mKQYACfEwXF92e2WD4HtILZnqXbxzCX+yUwe7460iH8yY1TOWS2sbEmwkb\nlXh/WVc4QUk0m4BbQQJYBazlXUxWso1E0tbk3CU8GEubhNXozkAAE/6YhGQQ\n6bHEWi3pu1qP+/Z6dF29E0NY+ZSwItKxPIcz72KrmnZ1ENPlBwgPLbhkj2e8\nAOI/0D1QrdBvNh7yq28LI4/aaiXBk+/34eH+5RBhusHd7ZdUG62FmPn7djlx\n/i16pzZINzCZZlz0FrUYwh7i8yDWtiuYx9/m7AkUgdLIVp6VGV37mVx2djPr\nVk/o\r\n=H9rx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDP5+xNF+jrUu3sElkqIPeVek8d6aqbWs3tTVyg4JaINAiBJRFdm4hF/Xk4oanAVc/5xiZOMTLnLH1N+84WSPed3zw=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.83.1074_1586451319631_0.6794901348178692"},"_hasShrinkwrap":false},"1.2.33-canary.83.1077":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.83.1077","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"4.2.5","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"9db47cc7295bb572e460d24b01010e5cbe156a77","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.83.1077","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-A0z+bKBRpW2u+6ZkDyTGeXYqNOVL3OwNu6uUWLyJ9amtorHRpqpgFq66dgQegJ02LmO0Y512nz+1Cfqm5qZP+A==","shasum":"00e2e85c818cde8926bc779c77f69411202bceaa","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.83.1077.tgz","fileCount":24,"unpackedSize":75714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej5UdCRA9TVsSAnZWagAAyTEP/AnX3TLu1KKvo8n7YqML\nCrS0p1G3JoXpP0tMVXGlzbzEwRqcPIKEmIsJIgWPxgI7kz212mozQPV6CuZU\nJPfnJmzUwvDMVkUQ+rm3jtGb4TdeApdZ5/4IFXaKPtxcz+0HIq+XHG00ATD7\nM268bql7cMnqMVCucnQ0Fh2oUzBivZWvG0Cl3dlUMOZxhgkD+C7StFRabIC/\nD72pqN6BJNfSjXr89mYsLmiAymvT0Rhlb4oYXvSxIk8W21F8Eai+SU2Hnk8Y\nQo83mszl5221e3k2NDkCI6bSyxYKECB7ay3Lx9pEL3gVkG+UAUyNM0ktnDAj\nhTtpW/8nZ9KSOpkwmgZKnLYVRACPKysGHDAVgJt0x30lvqFdtW6WSJUaeMCL\nOe2UhAMC07r9O13SOstHZlEMqWKPzHWtDyMVF53iaQILIiXlxrqmlCil0Dxa\nYxepiwR8STIyDembVuywa1ckuhAeTnbPTDl2djuKZZiCbt7HaYHQ8kk/jcnJ\n62dSh7OObEbLa++oiWyycglU+toT9KZlBaOM26EieJ7ONdPJdf1HMcKjnKjH\nHVM9iNDcCKJM64FwtCJMTtDDzuTNbRXi/7bLAYvtNUz3lOfGAKF2NWsYv6k1\nWvB1oZBV/TJlPC7PJKmE/PkqSlMOh8nbfA15RU7BQ954qxBystSlY3wVHORO\na++A\r\n=2TcE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGdQZRbvssFMilyRNWfMst4faBhiIbJih1my88kufxp4AiEA+6t+FJEq+DU0L8/VUg2BYDo4Hw1bIfBnbsAnmMSolWY="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.83.1077_1586468124511_0.5770297931242179"},"_hasShrinkwrap":false},"1.2.33-canary.88.1094":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.88.1094","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"10.1.4","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"4591f46702784019807049344beba27eadf94d99","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.88.1094","_nodeVersion":"13.13.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-2CmtZGvdei1EpXehnKZvQLYqHq3p6uncP5S1wd8xQXszWDx2cKbIE0nwSd1AQoBWrZnVIaly5DlGjriSRM8JMg==","shasum":"18d2e7899e86f11e357304dde363fa1b7c511d7c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.88.1094.tgz","fileCount":24,"unpackedSize":75715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJembVTCRA9TVsSAnZWagAAcUUP/27R9XWbvT3Jlqom6Min\ndZRePt0QeAnV4mdA6456TDdYIqVU7Zq6RD1zDoDx1uNd5GaJxVYlD1VkvZ8H\nKthJ5dvcOQ8E5Jiz5LPwZZsEi2xvg2gJEHmA3kdV5zKOLLyAQQU124FM+WVp\n/TnpmOcPMpOCt/C+OSyQdPkEvvcGn6iWNObkt6NlYaCquzdVcScg9WlCW8Ai\n+HNIGdLF2eo7wnL7sds3nr69USA9quccBAm8yB51CCp/JlueV3qHjDqxSCwj\naSAXObeti5WWTrK9t1EpkRQ+B1mpAbazBgXhAcBV6b3IpcvYlsdVMb0Ht/dC\nlSYya6W9Wp+VZMQ3vfqxsiXYxNPr4ngNiJg8oJEQffFBuJrT3j1ooc6yajfX\nLpwgCm3/k3NKy6ndcIXOEGVl6jTl4RkpDEwA/UpfX2ZS5r72Xtr1nN/G3Fom\nGSY8hiEyLywZp4bAqWIC+5wPimAdikVqV2AE6Dfcg9zwU4/vlkLOzrV0DWCQ\nzSvS9dxMlYTeRCJvX/gMD8ZyxDxAtmkofP2kgUaLVYBnD07xwaBo1WOxQIPQ\nWruhc+/ky+M00H+mtS4ol4BzC7c2yMibXOuAfJp5Omc/pWyeXDSsMXE4Ys9G\nXeNv7KDR31CZRAQaLQj6TveVKj37b4aBwRwNrCvq6E6A+sZUaHepLpzLx2+A\nHXeX\r\n=VRXB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5kaWLiU/c+u68nMLLCaiW0ejilT2748KH5BaE+hlrAQIhAIkUGvWihi8dr2R0EEzyLvCLAcVlufdgGLPE4/dLecSs"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.88.1094_1587131730959_0.7962913378479233"},"_hasShrinkwrap":false},"1.2.33-canary.88.1100":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.88.1100","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"10.1.5","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"8904a44950177aaae802acf2fc733bdca5eb74a5","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.88.1100","_nodeVersion":"13.13.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-ZoL3Eg7J3C/88bCwc/jZ+cUagSEZNoHE+ZSqS4HJ4zBdp3mw4cZOcmDlgikxVlK/IuNMlWgm/OP5QFj6IueUKQ==","shasum":"1b3a16a14e39393fc4b0cc469ae933b4fee90d98","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.88.1100.tgz","fileCount":24,"unpackedSize":75715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemroMCRA9TVsSAnZWagAAdPwP/34mErZIcgb7dw8ofXM9\n9EkdirQLBTRR4Jh81Ujnl3tZZXfKu1SNLAQbqO+stK1lU2VylLNus+V+8Qyb\nOueoPNfiN7ZSIKPoE5fMbnIWj/bgR8HZeVqeetxjJbmzi95Q2Ax1/OG/sOsU\nNNtlnVZdLZjiECv62yVJ4PcspVkUZbSuWKwcD9cGcXkJYp0R8jg3/7qZsRWg\nhGkIO65DG2sqYhKnDhYa8OEXmDE9Z7aT+YbjZv2kLxnIlN1icsTemphfZ3Yk\nVjIOIoLmfwRam+MNMC+/upJSt61ifplj2+VbTGg94EQ2/vn3pbJAsDC5oJhN\nJsgJXtzwm67QdFaXaD/xJNvGEBNiUyAgJdOLIEySIRNoRIxondgyYY4THuYl\n3ZSWlX/EFfvBeQQi4S+VwpgRB1efj0NbAqwAyYalaQUPbxDKai8X58z1TMJw\nuhqDdlusfxIWzeghbG/Hxl5t+DtazwJsjKcUBWg5h8QZrf92jkMLZfqjkvss\nilj4vgdB557SYpKALKVjYCj1oO3DJ68vF/9RlVVLLI3ZiTFtLHvX/QQkGDLa\nRESg8wuRnGd3n7upJYtgud1jlmdj+E4ZJx6CwtToxHu1Rxqdr38wI8BUgkPL\n+GUOX4lUePmUhCgHTYFMrNSsgqjZjPVHYFnlf3J01BHx4P/FBmuXBLLk0iiM\npsv/\r\n=bBZH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClyQN7rT9lsONvcN05uKXnHQaVWm/pdg3Ng8SqZPnpGgIhAK4W4LH2tL3PNKHuS1YA658gE8o/YYjzK/6/tvKHHX27"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.88.1100_1587198475452_0.7572359652159937"},"_hasShrinkwrap":false},"1.2.33-canary.88.1103":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.88.1103","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"10.1.6","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"b090a96142873d28ed912b8bd07566915e1032cd","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.88.1103","_nodeVersion":"13.13.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-zoz2VU9W61hOY3GoZjaHPtpmDrrZxAw82kXmLzonRop71ZdJwVHSM5Q2fxleU8RPEk+1sEABjqqPXy9n1ViFrQ==","shasum":"3d1a787a7588a60982bb2a3ce1fbd0a47dda0ca9","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.88.1103.tgz","fileCount":24,"unpackedSize":75715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenAsKCRA9TVsSAnZWagAAC2oQAJ6YK+qZQHtXtDundj/y\no0OfR7egIew3HIkizcqyFJBiuz4rkx3poSrma7Lf3rp5/fR/5WsBpbvnmx2y\nVJxfitzL9vmJ9LQcEXinJpD9SAIp6DyJLG5wxqdd/2QMl1doG5A7HAnUqL5w\n6AneOv72Jk4g6BDnzBKNPODvn6EifG701ntXfSTjWiU13mfCGi9u9ultfRnV\nBKqC6E3zXCRO+AreevyYWJwuBprjfwLGh5fm6zhgMXp+3cw+Ls+sxcNyYV0m\ncqPZtnpxmHo3OeXH2VXw8Qfo+XUoaEza3gsM6YdbvumkXbjdEcpl45mtKK+4\nqT4XZmVm/ta50R51ZVRaeEboBzKJjeap9BTkoEMElbSlB0K3RrePP4h/+Iom\n/+sheOlUAdY7dvK1tZiIhi8Vj4t9gYitDDKq/1q+cutTPzuGY8YPGhzI5/c+\ngjz2n1x+Y53k1nmt7W4V2qbbpfsKu4Oxh+qD9DgpomzxXopjzZBOgECwdbJP\nuBDHfRXkkv/pUgcy7XO+sWuOw50+ZaLHju4eaN+JrlHCy5bqxdkYUGVe7inl\nXYhwO86xrlvhMOd2omXl+R0Fzpssqc4XCj5UtKcK9Ir25LKBfxo1BZMei97Y\nDSQC5R4GzSBqGXPUb1RKpVX71CGTiLD4fvghPpKLZ3O+yL28vgEL/s7kc1us\ni934\r\n=/CZG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbxzcJP68hfGJqEhb+Y7ufC+6AYUF50LxaAJEjRaybXQIhAIr9MLCKaHUqR9Ep9vRkqkjY6HOc4YgODapa6PTnH7i1"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.88.1103_1587284745634_0.16463292867084567"},"_hasShrinkwrap":false},"1.2.33-canary.88.1115":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.88.1115","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"10.1.7","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"892bf26cf136cd2d2d4ab07303eb2e2b13a91a19","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.88.1115","_nodeVersion":"13.13.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-byWRub20nFd7rVXLBEm0KpM3e9BUt2raJpk4hJaJD8+dK7VVbr/ruv2CZQDIYGPlg60+/A7cbLoP4DLFIFFpeg==","shasum":"d9e0d59d425e4e0b42edc5c092811757b9f83069","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.88.1115.tgz","fileCount":24,"unpackedSize":75715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenwP5CRA9TVsSAnZWagAAnOwP/As4fa9jRPGFknCB5n01\nFU0+KX0ZAwANjPf/fPMdLyS9W0Oi9YDYiJ1GdO3sglKzGdLaMhxi4T3eU3XL\nBhOPvi2GjslG0SXUzmKNLUQvUWSTFUglJPYylqhBsiuwvTvR5EJghGst6gJx\nNW4hbqEn69l3WaLvVD/NJ/c0GfcJa6//6Wr1hAPmwxOmEKaNBBMOLt0K81vP\nYW1pfwh5n6QVjBejoU1jt0ic7/xZrAzL5BQw1CliIPh1zLCkYgVZ8HcBUVzl\nT6dbODKwTrkpS0zo9jyMc3JgDu812/Z8x5Q6wMrZM9lchZrzfxvyolO/GRke\nkbJSJrEVxRB/Yv5ad3i2NYji5P1NnVF49vqq+sVyMpMH+MFfEPfjZwfEM9qM\nEUlJK8pASjIIJhYmtUtrcgM6rIVtnw4fhp22LvmhZcEvq+JUmJnmSAZckFB8\nfsXqltT7AFeYN1bq16Q6aVJqXU4NKcE318rH4lb7agGb4ezLHT/rrT0WQzzI\nKd2JWPgczf9vJ9zoaQiNGjm9F8pH6YqFBrCOEGVjPzS6v88O0OPSuxIDJnEx\nXT5hdMm4tkdJYj/dTkOc2t0auT8E8EagUS5rtEIEEO8Wj5cIyK66JGi9+Ap0\nzUczbojlwRqpI6UXaP7yi1amL7RQ+sOOMA0W5g8Uz/QriQItQcgf0NIFg8/8\ndQ+y\r\n=/J+7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXk8Jg5gdvOr/BaxA7/SEsLUtA5wSfvs3YRh/gHSUspgIhAJ3jUzpcpKa8Vi8lRBR3xfiFlhElvITl+AXojiJbQoyK"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.88.1115_1587479544999_0.2272086347112332"},"_hasShrinkwrap":false},"1.2.33-canary.93.1118":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.93.1118","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"2.0.5","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"234117d737665d74f65afb24a984d4822e2cb89b","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.93.1118","_nodeVersion":"13.13.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-Jj9+YsXV4IlSv98/5i/+YVXD+Bsc9TGikI7LEDUy3zczHBWAOH/aN8XWSMtfLTTopWPrn8CEv0iCU0Mfb0/YZg==","shasum":"1faee43ac24122975a1633389d4b92ee5391e187","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.93.1118.tgz","fileCount":24,"unpackedSize":75713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenytKCRA9TVsSAnZWagAAeMEP+wVIgEnPjcnAFXkp4wZu\naSxKdjlCw5ufm2z7/TPDUY4Qap2MXPlK3y717G7wAkcQj59sYakZJiyPyXSI\n+4mpnO1VXZNRVw0n4tMHDt+SbQYLQ3hikl/SUcR9S0nG2ySlFEGCo3PzuzFS\nyQ3PjArbVNRAxdAl5EfUasj4iGQNIAZ5LPKPJaCuHxo+Is59GUraMVNErCSR\nfnJVvHmOPwwO5zCRoQE8tnLJOtjzK67WwKcS8bT8KVPSY4/OhOm+Np7DzL8/\nyBfdtVgb3GGO8yWmhfeQFhDBddRZM65mioThg50XgSeIMaH+DjIJ3kODUuJX\nJzxKGsZqG1ARHSr7YOrIiZdwSmqpGDNyaRC2idReg4UZAq2M2qPi+IfGEjUV\nMHTUSI4rz+7shklqlE/85DMVORx07Jjx1Pg8bthi0OEczp7WbrwkVJEBI4Z/\nX4US+k/wNdsep2MGwi7NSsFrxFuC0k3PF2Ya2s/0NaJKvE6utzq54qhrv1st\nRXMQeEY0A88pl0+OnDNBCNFyibJeqx2nhWGOLdq8miQkpfkD6Fo6uA18y+d4\nz9zil9t7vOJPsRUVV71rqFC8ZF4NEK2skiSLE3nhC8Z0tf9mVyPj6W/bFgWD\nKug86ulf5FlahrnmuR6swsfptkur5bKu0/1kdyzafC3pUS6vavyNZV0WrU59\nPTzA\r\n=1zWV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC3818ayI5c3S46+tuU8Kzk9z38ZxLOtGm08VXNZ+Zg3AiB5VuFGpfNf4jhuZxfETDYHJFFPH//mV/NK0kcKjtn1Cg=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.93.1118_1587489609717_0.6865313600630913"},"_hasShrinkwrap":false},"1.2.33-canary.70.1121":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.70.1121","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.11.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"8ef85749b8ebf2cd5bdcdccdaf9b7bd452ff96ec","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.70.1121","_nodeVersion":"13.13.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-U1AsQeNZDU5M7dhCsZ3SfMBf+eoArekmb9fn1XpmS3TNAd8EXeMIbL0OkExXz/m2wgV8QrooAvFaqQW9942klw==","shasum":"b5898de9553ae157925a67449af1f20487e29853","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.70.1121.tgz","fileCount":24,"unpackedSize":75715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen0kACRA9TVsSAnZWagAAeagP+QCj4yRRbjgk2y32UQIg\nGt07K9bySJapm0Q3iCck920O7odDgh3wiuFNY9E5DaFT9yebv0EYP97eT48p\n8uJxcVQdOvwX+KcIZpuJoU6BwvjDDVpWBRtm7Z+jBeVrzdKZabzbdNNr8Kvw\nbzqD8kn5oIq6aoYpIgv4XV9W1Qupyg7qLxLroecDpPspNIQ9RHw76gzylD7/\nmQ4azdHL7UcA851OWx/Hb6X8/xiKtjiNFDk8Fpxq82GB5OuDtoApJU2wTrFH\nve0yCHe9QSzWaYz5HEwWiC1bf8yzQpKgyILWva4ilt2ufaPk9tMq7sNe05OQ\nADv+oaJHITcUqyMEND0PBtquU+b/Nf/Gd4nwGsFyO/vRFa975pzbx1idDctv\nU8jDJvdfCdmLbvkBpf/ktkz1vQkhN54l9zOi9AwBBilo+QneHEMwDq3fGmyi\nuPG8JRJYEmNHKxbCsw0TAgQOMaKuM0eqREL414v6x5061GEfQqXN/D6dmycF\nSEfgi8pKzo67l4HWElvUs96oN8ASvw7Up9IurMr2jrgRBE9OqJCwCLJxNJXM\nYE213quWh4LztU0e1e30sU0uwWsHck9LsPr31I1f9S9Zb+haIihdBrO1YrcS\nwdaDShmcqjHGCnKCqTw6+UYN9JARVkVI7q/L7W1/TfRd2G/mScR5Jbr7vFHo\nGt6z\r\n=TNpg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFc2r1uEsBZ64CxP+ODxZOW3BKhMtW/dmpZ5n9FT2vxgIhAKOM/joaWji076LDLWy4C/uTP8RrMC+robfuDYTmpzSJ"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.70.1121_1587497215821_0.2117526557310747"},"_hasShrinkwrap":false},"1.2.33-canary.88.1141":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.88.1141","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"10.2.0","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"68f57a4c3a69043a1d48193eafe9cb047c1437d8","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.88.1141","_nodeVersion":"14.0.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-J/19lK4RXmKW+UuCvKOFQYf8X9mE4ers98ekQj0RSNzgYGmRV4nKE5ZVTaf4iXvaSqvfpAQB5okBxNb4W3SUPg==","shasum":"c4b51b882044c03e4f177c8b53fff3187976b34a","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.88.1141.tgz","fileCount":24,"unpackedSize":75715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqFHbCRA9TVsSAnZWagAAXrMQAIvtYQyIsb1Z/v1HQ+F7\neer9H5a7ozucW6Q2QsiupcHJuikPQ8senj5+3xbnurLOhZWKn9CLDgp2cj9c\nE3vwN952VfyTULhrbtVyZNMOhjHjM0eqTYOyLe3ghL2hkHFVTpySm2p1WI6v\nYhcJLBJ+XAjxvN2zaeQtuZcIt2fGUE+QX3RPsLbY+cdc1ictva1HNt5pOvWM\ndG/+PJWYq69BLNBSMrh575XqrJGqEeqHh4BKmUpHl9/2ffcbGOK/iZrwmZaG\nu2pyJ4CLiwuwLULtX9CEdCwLnNiqa+K19/U99UMKqLNk25+6LSVp05M4RGMH\nrEIqh5xp/zuqD3pVm4naDqV6BKWhltpAnRoE8A8XsPg5PzyuMTJm9bfCwZch\nBL+Z/mziRDUuJq5Qy0H4V3rDqspScqL18UIjDSzd4qx3KgqH8fBkmqSITd9x\n9CERrFSeLAKmg7scJnIS1/3EsyWJHFmg46c0lZpxxoHZFmZ1Z82Lfb3PW5WB\nb/BZceTRqJuBCh6PmbtPzzBOO9QytBes8JQqNjTsMifk/jv54qXzas8/Dt19\nozOwsLnk0iQeFdP3g/qjwcsM02ABMeOhmCQDB3Inl1nyRHj5AlkGIK3s+W/8\n08s/B+6A2ozwUmn+Z/b2LbwYCMtkU0Z8PtuaO3kvOCf/zkxV2g6L2TUyH+HP\nQVfy\r\n=xRGI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDd7+0NzUMRf8BSjOdxHSQ1e3BzVcrYmt5/nsUDHP3EJwIgJMa6+Tt9nSJ4OToYeHtTiGpUsZsH72P01q71Nvjysr8="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.88.1141_1588089306556_0.9319573649898927"},"_hasShrinkwrap":false},"1.2.33-canary.73.1144":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.73.1144","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.8.4","@babel/core":"7.9.6","@babel/plugin-proposal-class-properties":"7.8.3","@babel/preset-env":"7.9.6","@babel/preset-react":"7.9.4","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"eb5dd1368f570a0552d04a97bf82d7d01f0be450","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.73.1144","_nodeVersion":"14.0.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-mCLOTPCLTpWDJAwgu5YD7oDVvfsAjKb5w56K2WsyzF339KyyZnNaxkIUiOSl6UWfNqvyVkW8jsTn9Qx56jSD4w==","shasum":"f9b6646987e5827536f43554cdb6bb78f6d5a07c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.73.1144.tgz","fileCount":24,"unpackedSize":80570,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqcqNCRA9TVsSAnZWagAATJQP/iktH+RMtKDHb0x1aZVJ\nsUBrXdGH8n+1bTC9wAzY1RvTYe4vXpLmrdOrf2G72wVprQMdsfog8qT+/blj\nvrChfK/OqOnjk6fUynxqMLlU/NRk5lbF9mFwSm49lYlP4VxVilRok6zoVz/k\nc5kemlYkvSHQY00/FAw7gn4hCnHfq8Put9wIpr/7WZAQUZjY/A1QnBUZ643+\nSv5ovJePRdu6CYdCdT+p4wPJQWj1iV/uuqioPaQBK7w4f16HgbYQCSKngPQS\nMhwFvP5mEnXFEMeNmvI94lHx/GNmxYFg53XXGrI/4kJV5jQnGKLzB4xPod6V\nR90Sv4PKcQBANlmyzEQXwNVlZdILHvhGfF1OL3StXG6mWY8yLeYJX524pDgM\nHW/dP2spADQXFWK94aB2dG1wTGsCvNABrwozO9NDP43NExjIciQvTSGGFc0e\nXuhlnfWxUg5vXfndZmMveqJRjHc5bpvRI0OaaT0tGuh0CqHWbZLI5947gKpZ\niq8IEbxBbVDOIz4V1/uuU8erXY+3i04L1ei3N+l2AZaKwDhWssx0u3YyBz5w\nKSKhourC0d3+ypcwKw7l8XjTh2/3OJBnR/Ar5ZLUW0hNqI4BQiY+t4gt2x/Y\nKtIP2i9GA9WiaVXnkR+USJeYcn3mBVju36MeIPvfQpPwsa8f+gOe5JZ/16KS\nK3C2\r\n=avyo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuAHEabtVpuoPPgUwcDF1pqwFRM1UPejvsF9wxOlv21QIgPorM34zv1BIsVqgmmgYE5cTDcHoDmqCo0rz0+EV/sck="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.73.1144_1588185740499_0.8637862428407685"},"_hasShrinkwrap":false},"1.2.33-canary.88.1147":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.88.1147","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"10.2.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"ff6a407390c7f59660cc7329e40c10e645ab5ed0","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.88.1147","_nodeVersion":"14.0.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-d7vTDYFWJHyrOsL72Sgpt47fCXGGbaJEjgvxua/UPGpfW1n5lgitUpSUvvHB94d1P8y/uVT8k635CS2M2HUL7Q==","shasum":"11bd80dc9eca5396609923ea75fbc54ee82ad709","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.88.1147.tgz","fileCount":24,"unpackedSize":75715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqrtsCRA9TVsSAnZWagAAW6kP/38AKlinrkG0/we8NgDy\neB0MHEwHGvE2I0i8H93mNWPt/iWGLIf1cdy5t9MrhGiiIRSOtM6sETRAr/Nz\n+lbi3IYBuH20EtUNRaC94xLoYPYFa7h78ne8IiHYGsBtLT4tZv0gXb5Z1LRI\n618Dw20N+rrRVZ4AqADCAYeR89PzvoIKxrp1Mk9Ylh7429aWA8HgNRoLW/TF\nf1rC4H385OwM0jTR3OCNyFwSXv7iQhY8vfOK63i+5euhJOM2Y2nSx5e5vO2/\nx/G8QFvjxDPqF8rpjj4zBDqLscxM1HmwL1z3uTKZiwmJxo9zuHYOHsxiY+e8\nRa6lvQ0dGBYPp6OmfVEzzxwyUY6HY9h4L35bxu+c5fr42TUEayQs7s7MWzzO\nLe6JldhWj/dJ/s8ENpW+/PYuQ7DMOZh5iD6f8ZNcyP6EhSLbNywnbYMcSob/\nI+lB+MU6m4aw549nZIAVui5+Pa7U73OSs5AnN1iVKAP5CG1hozEVrWXUEkNV\neZr+S+58HvnsaZGf5uyrwlIdvrtIx3VU117TnjNGQVyzLBNLesz/qX6uJD7g\nqOMSCsMrrYC/+Xo2Yvm0vFEOGw4BxzqPtvGCLLAxI952Nqy5vvzQ8369A6eB\nrEQq/l3GGJAuv9Ax/0eXnfiJB1NLlHviXpKkWDxgrojwdR1piu1BNFg3kQqN\nxE55\r\n=vbbb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFsJFiW1tOyrgvu4EQWob1vq+yE0v65DSm6mAMnNtNFkAiA4x9Fr0kMtCpXpxGDtEsJ8SCxKLzRDieL5Z+jE5w53MA=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.88.1147_1588247404143_0.8587826036694928"},"_hasShrinkwrap":false},"1.2.33-canary.88.1150":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.88.1150","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"10.2.2","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"efb9a16fcfced5a1a79193b184497037951a296d","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.88.1150","_nodeVersion":"14.1.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-5CkcJnINrcqD2gzdNv48cdixvLTCScGjGdAiz2husK9vJouA5T5ODzXMTTZxF2SWUehzYz5Zygs11Q+KQkKiWg==","shasum":"201d5fb736c10535882a5075b0ac9140c6a5f482","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.88.1150.tgz","fileCount":24,"unpackedSize":75715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq6KICRA9TVsSAnZWagAA6w8P/jWcLOgLANotBG5WsXVf\n9qpZ4m0x+WgiZTxzp30GaanScoGs5n/w9MwdfHyC7tueciHfhqjoqIQiI66w\n+lBM1tiOM50N1yDQ9qy0BQJT2GnhzRb29gBcq/zUvwSrvni1QgjgtLCAIyVL\nndjYR/ADKnJyVviKwJXL/pv50QzH2A1/07VXnvZJYhVO2zOlrvvNc+X0VvMz\ndvvBN9Q3Ir07EHXQFpmRGs4LXYiF263j8ZirCqRV0qmImJf7FAP53XWjXvCS\nK4Hlnexd1LhnQ+XiLw26uWTh7QN1e2SXWZKUk4Jdvr6LHfWpCCJFWgoQ3WB3\nq4+yx3dO6ctcGrfPHBbDzl3l13xRPZBSaTVHhyEmZHqCO/ovNZDcDYuSVzLD\njAAACKnDRIu7oHL7q/mol/zBcGrdG5BuJ/5BN3K5zgo21tsVoIk3wbl7kl0/\nnOJ3Q47LQtJju7ffUJqxujIsYOJfXvl9/Q4D/DFR7H9M5ppaZQg+evzYJk4V\nQI43fulqDy91rTr+1A8BInQ/S2SB3KmcqsyVwPEhsM7gjFSWSR2/sjkR5MEI\nBOSSijquusFJqa4gAg4cqQy2uhfaMX1l450wBxuPRAQcqsg+2StZYsItBIaa\nv7tD8ZZr1mYpmTYfv+TXQ2w4hh4MustBjrV8BlE2KLWj72Y61yXLDECAs6Bv\nBKT1\r\n=eX6B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEsDx63D2BNeRPGgAVejdBeZc4WZaqGoNcAvfucPWovKAiEArV49pngwxaCnNd3hG9YbT5mGOTVp/PavgsQTYDVn8qA="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.88.1150_1588306567987_0.10582940654634077"},"_hasShrinkwrap":false},"1.2.33-canary.92.1153":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.92.1153","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"4.0.0","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"2e999c5b78db1038367c03340552263638d72d26","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.92.1153","_nodeVersion":"14.1.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-SjOrxfs2145zO1rh9XOIBD2g6au2/2ZQhsCx7TbDxAyfIga6f72QqQMlHhXe2OIu/cmSZ8vKx/xCH8e98hZgiQ==","shasum":"75f7ab637e11e62e132bff5f9b6a89bf0e2788e5","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.92.1153.tgz","fileCount":24,"unpackedSize":75714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerE3FCRA9TVsSAnZWagAASZ4P/jZR7P+b05BXg3HiFyZT\nfkpgyGKaQ8VOpNGVz2EYVwZfS7j4JuvL8dmOf3wptaRMH4ALpjKZZ85v2OOS\nsNcf2hYT23jzgQ1nG0UnxSSDtHJR0RmePpHr8KZrkEs7uwe2XnMMR74d6qHe\nt4JiaE0C3p2I6D32yLd013KIRyfu4ZEjo2CfAMXRX+JMkNufTl3WQ9WT+Yut\ndYI7rnDjpy3bhvizPBukeHGzHEBYAnfGoFEdZrQvV2Qc1NoTUxw+83oHwQH3\nYKnuiML0VWqwcGw+lWjSn5Jsv818rN+CWpxmveRixwMcKyt6NsviLQKFNMck\nBC3llLoRmlRSJYPNi+omBywnDP/hxpEIs+ALz0sfXRLzAILuRwdNcW2wF34w\nzT0SsEW2uCM+jbfLU5wDplPDNb+3ie5yiSp1+Yp/tw79BsaejVeLo4HtN4Ut\n/klv8eYmtUkpoNsH5CITr9hBbkFN2OgyD0PINVlau/deHGi81CZSEzbqmrO+\npkqMSx7gU6jCYSi9PGS8JkY4WKwYsjB0RcE1x1craAlzZJ+5i/B9qgWVl3vd\nMTH3AGZvlAD7HU0xadABnk4gbKjiuPkCMaU+6Tvkx9mmWT/d+XtD9BIuvIgG\n3aRX5botVvXKS+DvoyhTInynB/EOOrPjxJKsdZHCuBO5+xIhSKQRs/osFTfC\nPhvG\r\n=ZLgA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiLyuOImaQ4iCM5CT3HDfXGuaA94D4N1zXe+VM77v3JQIhAKTq3HhNN7AAIYSWmX1InQ0OybMyigOa1sCUXUzFBvb/"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.92.1153_1588350405127_0.7178727073457063"},"_hasShrinkwrap":false},"1.2.33-canary.92.1176":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.92.1176","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"4.0.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"57170aa63623b06b4f85bb461bb7f2a53b6c9d78","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.92.1176","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-kNcYBhqQdH6YhC4G+RGWOwWvQ/68Xym0EM2VlbAZ+mE6GV1+MaHHIcEaTzuiykPBCDeCk4yxLHyZWXk+GEgZ8w==","shasum":"500ac0206726b386588c9f287676558a1058610d","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.92.1176.tgz","fileCount":24,"unpackedSize":75714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuttgCRA9TVsSAnZWagAAxhcP/169OkRjIvv1F0eU8knQ\nHfZibf/ZjY2KKekNW+jSMd9EQugmzbYlJsVOdeQONTsWFRISKd5STP2NY1EM\nvKXhsX5lcBIB8K2p6e0xKAnyciWucp0VOKIbg1vHpspuFnb050oAGka8kv2U\nuUpzc4wPWQfLcUFDWoJbsGpx6dqjKgHXshF9lnnAs8w/ylTKIsaWVg2isQE9\ndNKyAAwhAXwlsUlrSzdGVvAO8BzsXtw6rGLMmssftkBhO07acmt1hL23DR7a\nof/3HSTAoqVc4NyaQ7NlUmVLzTBfMfXCeRn8xq3ZGIS+hTZj6ZPpe/yusKG6\no7cqxsqNpoyMDhnqqQbqDd/EbUlvDXMBPh8U7D1matBs+h3xwa+vgI57Khzc\n+I6ymmIRXA7ocY7lDKqIhJFzvV28fvVarYVfz9KhhPZdpOyIJUj00sI+jp2c\n4xKFwFwGfyWiVksUwFL+4Eo48ISQt4AdvM6c3JU03zL416iKeTXkrtC8PI1U\n/hKERWn3tWwvT8l6Fg/CQTuUzNvETcgfcfTa/zIQ28O9mdwXk1WIg9oVhkjq\nlHHrjmaO+K2GlBoWjsViSQncW/XsiE6pAJfJidnTQ43QQy8UtRxNsy74/Sqg\nr/+y/11g0j34ZFP60UvHTsk7Fg1cFGk6G77zaKRhJ6c1obOtEmpijCB0nFzu\nZIWz\r\n=6N+j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAGGQ3lF++YHMM1QOky/L4UtmatAQuyxEfe4vnaYMmTOAiEA1A06YktUZU+Ekq//orRLPPNaYicyke9RUvqM4CF7gEY="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.92.1176_1589304159759_0.7220477469452875"},"_hasShrinkwrap":false},"1.2.33-canary.64.1179":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.64.1179","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.20.0","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"cd3881f7793d167b86cda1d526c77c14b00b7792","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.64.1179","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-dp0xt5kz0RpBjQcUghQK9GG+0iTC07nfpxbPGsBzuUQWxgNqVumevEV86uX9dx5fUI34NqrXMr35CwC8TvGxvg==","shasum":"a7741327527f7a00706a20e59b8d1473f8d9495f","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.64.1179.tgz","fileCount":24,"unpackedSize":75714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu20iCRA9TVsSAnZWagAAUrEP+wWYyHFTrHOKf+J//d+u\nzqF/AgceDUxkpJVGMqQ9rL94BGExfqcpry5oR1WXdT6PQktuh6WnNKmrmWya\ne4sKbyTRF8+xswnSM8B1cAKamoLICA1DjxuO7YvBGjCqhqcrVTSK/WOiTq1p\ncHerwqtHeiD0DVXXlAEMsxQMeM2dQkLwOdqy6Nvtj+2/XCtil1mgSBSqZ7Oe\nZ+rX64WHBRLzMjnqrP3ED9XCBmAUFFHoP5JjYBBZCLebAV1hN0oJDApuSbIT\nYDhKN4U0xV/Y4hClINmuhtPAq+vjIqZg/KuAdXC1vtpyigqhE3PVzYs5zVXu\nCRwX8b3XnZshK2HbSuB57O/M4q5VczcIIpfPtePEmLg8bj4Nk8zQOVjrVODk\nEjIlNepCFWfgucf2IFROETSC3fig6821D372anFkqUqQFw0jg0vRuHy5BCNk\nV0ZeXYLsy4L1emCaLFLFOJPfqXVtdcWjcK2e0xL84Ov8ZcCtXGdUjO/GqJAQ\nmByGxkNUNXGPwZTJskh7JOUqF51o8A/33GmD5FseATNAjES/gvWA8m6WL+Zs\nO+bHAy6bQTqHWI603y4eJxI/VZSXz3r7cVLg+Ut3KwqLg24LdolUGosZGPHz\nvVn7LTlCwwo1B+qoOOgsuBLF6h+oLZg3jf59akxOsX6DdSPC3dOzznR8TDbK\nxs+l\r\n=I8gC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTH590TK6WgHLbjlFroUoOEs0OdiNMvM4BjBf9agm6UgIgOC8Tf7sW2J2XSxpVVqS58iH91Yr+7mUji47PU4j4zU8="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.64.1179_1589341474126_0.539951204234699"},"_hasShrinkwrap":false},"1.2.33-canary.92.1182":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.92.1182","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"4.0.2","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"a45ce4157e6672185304821df25a5442b3df4ac7","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.92.1182","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-y4HPZMILto/NBEvX9Rne6EH8fGhWBUHI6fO2O2YROWKutIq8lifBPwrTZech0uv04Um/1vVEPQzoUiw1JFmScQ==","shasum":"9a94b3b53302dfaa543e4413821c4a4a32a54a56","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.92.1182.tgz","fileCount":24,"unpackedSize":75714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevB8tCRA9TVsSAnZWagAAR/AP/2kMlKIFPQYFV7Cl2epU\nC3hOr/axJtYLTb7psBk3H1/lzNxxGnzSpKN7vmLPiV1LwQ9Mp0yzgTt+jhf/\nHgnCKQ3pJ6ZYPWMvEnBT74TP/XvkJwZ52pJGe71gFPhb8we6zA4MxXJq7QkD\ntY1neAkxjQzomDpov2dRhO2Izgkpt0C6zrYATosefC/dkAJx6WZqZqaPN5B8\nnGpbAYVjd4S3zC+Egn+TFNJnejSPpk0jfOgyS4FtfDlKIceLY0o++EsgwF3b\nDHk4f4SQ+uAnbm2LnEdHW51MHdC/r/bs6XxejxZTjvDLY2HGLRjnPYBdCRKI\ndXH5FRFPhFDTL0gJHYEGT1LXTcILKC0WPPukx6IHX+rUjvS0vdH9VRHevXOh\nmjFMQfKiNI++Iyjjzw45VQ8Bd0mZbb7df12FEYZfOSCtoWb5j8kahe3n62uw\nv3yli28DwZhdcXwZBVht9nB4Zg1uo9/08Jb+wPsAZSbjnXes3ub6pe28X8Am\nTDs+5XieagTOTSLziu/AeohVFwl7nYHykwUz+Ltml2gD1kPrJ9TbjMZgHKuV\nUD+Tuz02hxghL3jXkTHD7FljO2VuipGUmqM2uwL2wcmYFBT4RKMsBl1e/lG5\nYb+9bmDnNHL0RhDz4PpU5p8KQB7k10Cp904lnUQaABwz7i7Kz315LPVEwJXm\nyFSR\r\n=zX4S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4sApUTdsAmjZ1b/9E8Mbeg7jJthOQCbu+P6mh8Xb9OQIgOeik+h4TAgDbiAO8w40Bj4DYkCE1p/+qLjwwDIOE+yQ="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.92.1182_1589387053436_0.849132064152631"},"_hasShrinkwrap":false},"1.2.33-canary.88.1194":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.88.1194","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"10.2.3","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"5b58d064bb2d8757372523ac958e7b0c6ada7c71","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.88.1194","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-MPc4Jf1c1vErm3n9Ga8vsI7tNNumNV/Qq3FxuYITzaSDhR6MxQJAjACu+JR3Uq5fO/vnEsxVpTa/dij/T8Rl/Q==","shasum":"a96aa632fd5e8793c26c26822d64b00875cad907","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.88.1194.tgz","fileCount":24,"unpackedSize":75715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewo7RCRA9TVsSAnZWagAAmYkP/j7eCSSRTCYsd0yx3Q86\nWEi7VUHhlFWIaSHuV05pGGBh4agEhBm2oZlbBNYxxfYAMamuA7PtkmMylNg4\nMbSG6bVeCAJ4ct9tieOZJmkxoClwEm6u/H/1uDAQ65Xx2i5nzYoS26j929KP\nIHhS/CJLIdGGw76j0IcVaJtwZdngByaseEJzNTXPuBbBQUIgxUDpBSNmMeqS\ngtBVVU/COUHzXhv5JJS+rPXhglam2B5XEhUU/Vl4VE4tq9U51EAFkI6++Gq8\nVqRdBYKIgfAy3G2ucS+B2/3LSvgOAWDgIGpUlMY79hwnxDqbWV06v/A8WpTV\nHB7xhbn26Ej4C1OuUm2oZ5/CMFeyM5+4aVJAIML+04X5UBw5MNBqcXqcmdBs\ni8mGoJRvYCEEQtJ6bCgzNADWooXqz3Ldobr1u2AjvozkBPIl5TQ1I6XywMKY\nEnTEM8LTdzq3oSkL7uNqWPr8iBc/ZWTSRpFmZ23S+aaauwFaSO0CBAARgyJi\nK8m7EJF4L9MG4gp5tUNhG2d3rNrHv+zFq+zy2X6YjAFoVEG+Qnhs5p9mKJ8X\ntigNZXT7WY1pjsvb6eTUhoAlKHmmY6ksZDlg7Tia/bT5Q9KCJbcWewP5kt1i\nG2oePpTHvqihTFrPdSPoU/mhvYJu8qt3akh6x9BoCCijjrgtOPZ15mFVm91U\n2naE\r\n=/yj7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuibuvxRxzpA8/EZOaL4G4617U2VLrM95PveTGShqFOwIgbbYdCa7kXQIgKFXzYDiF9w3ek75OftYDU3K9EgS/VC0="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.88.1194_1589808848536_0.4605603423540241"},"_hasShrinkwrap":false},"1.2.33-canary.88.1200":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.88.1200","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"10.2.4","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"4fb85a712489e4352a1d98cff220e046b0a47a94","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.88.1200","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-ocpXhsSAQJdvr9TEFFlXM6zzIqO3kZry2jbeLPXZBc3uFdfqUFYCv8keZSsT6E88Pxm9GsaHrPaL2Bc0umXyCA==","shasum":"04937a179ef9b9ed67591066708c13796903a9ef","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.88.1200.tgz","fileCount":24,"unpackedSize":75715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewsysCRA9TVsSAnZWagAA8v4P/2LZFwgO7A/+3kwdGAoX\nbr2ol+onp/CQcI7u7Mce5R1P6dpDqyjq4Y2Sj11wgqR6wjES9u1XGFSRHcfN\nKxCRy/t50rZ+SkatEdqrK1SYK4M23vT2CUHnpXhfzYJHwVs4hR0r0o4J731t\nt+r5tTj/LDhT8zj2/g00ZT9LZfdpgfu14HVMN0SmjI6urVa7DqUobw/RLvsu\nJidLB2oiN/TAslhoM2fBZtbqmYhIxJD0yNY88v2QcMYXSiaN/C3EglRrEdVw\n75alngr0U7JqvM053/UPvKowzwb8JY1wXMieFVGGQShLntJEkI191dyJ38Or\nurZKX9M8k2URhdkUjqN/2N+hhvkMUM+XXybp1oLZULp7+y2hpTZMKAvV3SkA\nUF2Ssckod91XUd8BTrta91065A7c7xdxAla2nda8rVUcwzzdMtLmJSkccbhG\nDLr0sblM5nko5kXLgoPmHmujz8l11tpDZouYKkt7ssyhvfMhWg1JyGfHgDtQ\nwQ3w+XN/6YUPAHVbJSZO+KZnev+MykirsnMOkDeD4LLy3YflL6vAkADvyKNQ\nLYoZbuqRRCN2n2JU8j9mQiNW0Tjb7jA4bhgjS0BCAWUy8gPtfz0RVzVtA1+t\nkIi5jEMiXXQNrqp01WEok/wvhRyX10B8YpysjzL+sg9KD+dJloQHyW2o2Nei\n0oyh\r\n=jjbL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCScqlQRuYL8EV9bIEhOUseMRsEztYPXlsPYL+7J/rMqgIhAN1qgabEG8g6n/tinUrHFftO+aHOCjwGWD8aYbr5hCX7"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.88.1200_1589824684121_0.005538198002745132"},"_hasShrinkwrap":false},"1.2.33-canary.88.1221":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.88.1221","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"10.2.5","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"47b598c1ee773aec6314b37e40822a40e707b3e7","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.88.1221","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-UiSr99YnJ7lxWHTysAvXcly0sWGQtSA9OFQ/is7CrRYzNOQs2oCxDkyQjC5K3iZASofkNI6dR5rQkL7/2s+OYQ==","shasum":"ff963f36ec60f327e03a565e9cc08b45f89d769b","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.88.1221.tgz","fileCount":24,"unpackedSize":75715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJex2nJCRA9TVsSAnZWagAAhMoP/0OrpSR1WucoXiRDW0I9\nFelXrY0UPk1sMCmmlzlatBASRdhx1VtvGVm1e142MKZPMZxxRA6YpXjGgAFy\nKt5+62fhD4H2hO8cX8eBFFIA9ls9GVVSLVk2iuSjRT/3b7/ecz2xSiiVgf3L\nOMv6pyNz24G4cXChi+4p8uivuz6XjkraQGobkD1WWa4HCyU8UXPJyOKhwD3t\nfsGshxHeqccjd2zOmtuJ4wOQNiOCv5/D8H6Wcan/kGay6jYymtli+JiPLUZc\nA6TqA2TXUNhC65BBN6g2hK5OM6uhd2kWrM472XV7cwdih+ww9+SnFeflZiQG\n7ZkUdw4znzUenh1oQERWTuU5XQk06bVywolvwazRh6M2TTt3c43jtpzFDTQU\nqNkVzxzd8ghTRXxnvNfV3zILCd+Yz0i+La6vZHcToDpFQJYxDVwPWD4d1fWM\ncvXHTf5WZ8eWzE0OcX372FEW/zOAMYEOd3mtyitY60klUh9geBqb59pyLLVp\n3jRFoQEbyszBoK08eCr/OIGq25Yrstee3BAhZmndrz3Vmx9Ku1ytzlqwd4Tx\n36LG8re06MugRW68aTJz+BgJkeO5JBAT6IpXuxPXy6Km6vpDeVTskkIcMIV7\nNpAXsvhYaVd3QqLmVR1rBKjQcQ0fveq5NF6/4xz4fdd+XEGUBTtKxE8JtUce\n3ZFf\r\n=kMKn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtINNohidLOnCE/XA0VAiSrj6XnmrU6Uyv/3LYO1iFmwIgSwkowMu/OJax2NQd1pLw4HBdSLNm87fhIvuFdnlVcQw="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.88.1221_1590127049350_0.8089457266202498"},"_hasShrinkwrap":false},"1.2.33-canary.88.1224":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.88.1224","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"10.2.6","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"a5c08eb056359a11f91cd37641ac65bec5f193c2","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.88.1224","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-MtuZTR3OulYYR8/B7LBGyl62v4rHiGkAJQFdjfaWeKLKkwayaXXgGCcVdN4p656msLke2KgNvYrgpToz2yM4KA==","shasum":"e82a310def5807bdbd498b00f534cf482f9bd46e","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.88.1224.tgz","fileCount":24,"unpackedSize":75715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJex4wECRA9TVsSAnZWagAAjVoP/RHFH0H/kq5w0aw+3Stf\nnwFNbkNPjmsQDsd5Lu22jwt5CNFvVo8wD6oKsi4qlB9xicytXcOFy+8mpjtP\nGrZzDVN0itCzEzelY7gGu0MTzVcuoKKshHgbOdW++/TrTGxgJynaDCZJVh8A\novFGzRLDzVWNw/LWjMX+svCUA4HpQoY3GKHpbBFgr2LozsdU2rvcsGm6W/7C\nqS3FhkyBnA9LRXJ+WGrL+scIVzkGa5Ue/6YAz1ICRQcyfa0YEHulHCub0S9Q\n79UJ2bAteWvewjG+Hp2cY8pyrBy19d8BRHuIleNpnbTf/nNVKl55adQgxDIM\nEwJFkA9oFsCflLXANEeUpeweVaXghsNanpSF+v38e4IjUStZkqlaNEz+wIVl\nrcfldIimKax3P4pXz0ohTNZnQJhuYMsd3Mm2dhOHZr1ZxtQZDYiWexBWeQ42\n651z3Q0lJW+V4naqZcTQsTXFbldhZZOGO33bY37iPHPRrcbN5//jbKr1R8UK\nxSHi9vfDkE5MeepKaHAtW4w/IXLH0Z0sUL3yTvMG1BtRBdpxFRfEFgLh53fO\npF/9F1d9tf7bqoM1SDpgXmDilYGvUDp18O1qPw9hqhwN92JsJBWwk18fOjCC\nv+fV1QCy6eEOWZ3jOFClblzCE0J0elmk2r0CayGac+xo1qvjKS7nzUBK0rna\nT05+\r\n=6PTQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIlbxw+RblfhxZxn44QQoTWs6NFKgw+fTwE07Z9Xf7wwIhAK8vPj8qaY0nntrp8fY5A75Y7oOISWJbHRG6dFgi0xoc"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.88.1224_1590135811709_0.2676147870597827"},"_hasShrinkwrap":false},"1.2.33-canary.71.1236":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.71.1236","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.3.19","@storybook/components":"5.3.19","@storybook/core-events":"5.3.19","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"0e5047193091af2b74ec93f6e81369d25a66a701","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.71.1236","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-JumFo4ROpFTaJ4flsgVnzFhJt9vqhTf2eg2NAFYHTZDOUzfWnqXX7/rCDO24i7tNFeT+LQr+Inf07OeY65gBUA==","shasum":"15290355a99df86e854e2725ad693a66b6062dd1","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.71.1236.tgz","fileCount":24,"unpackedSize":75717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeygaoCRA9TVsSAnZWagAALg8P/jLd4lboPqQW7wTbj8hl\nTWSORh1zntkn8yGmTV09CaD5Yv4cjbdI34k0dFjZS0SZRhXhjoDTlhFK/WWC\nRV7+XryVJA+m2haRYXy8psiE81LoySBulfmyHIUmzYzfZ+gZGYeeNrKtXq1U\n3nW5se1a471BajkL9BQUR+P88v4EzywpMt8MH5BAcIbnUQES/npaWkjZssDa\nBqtrevRpwDWzju9kk2mAKOTjOeQvc6fpS+hrkOC53RWwlp10F9aNArfyVMPj\nBbCEQpVRTQo7B0vZzHnxcJ6HQ6cUPMArlw3tqIkXgnS1VKag7YrRBMiil49K\n4FqVub2bh6al6witF52IoNj6Ae91AmabHn02A0DQX5ky3S97sBGnXWdh1Gdf\n7cdMW4Bna7Pnre4z3UGbi03mFOxvs/Zm/aCrTW1ktFmOvBeu8mOdkTiWZ0UQ\nbe4Iiuccd3emxS0BLuLT10kVQEANidJS6o+9zu72OysUPaiSWF7uusSjs0bn\nkwzhi31WASPFGfHIJ6DigwIk1hpP+Xo9ou4bmIfCM+5LpwPye3hkb+crHjlX\n9tAq9Dy1QU4DBhbqVM/7Yy8RDBcFfQGWQsdUSg/PEk+2Gfbvc9qqKSV+vSbH\n3boMPMvWZZ5mQnikFHbdCLPapnHEr0bvVHyLKQjBSroohmIvKJrRi8ckxWpc\nWCdj\r\n=qpOk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIA59fRHJxUvBXaAPZYv8jEwu12IA2gSO/J3YrmvmvWwIhAMv2eCXaUzw4NGMhMBvjWFydmIAddDG/X+NzOrWbielc"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.71.1236_1590298279507_0.5844621526404405"},"_hasShrinkwrap":false},"1.2.33-canary.92.1239":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.92.1239","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"4.0.3","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"b28573bb79c42dba3590efdd86544ab41d543975","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.92.1239","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-gvdzblrStwdtW2IPmEOchIyHxMb80tF46ep+N4n0O/cV+dnLym+CtSoLvWINfsDGR9NK/gQ98idJ31uBjJkOEA==","shasum":"a2e2027462886a24dad3e826d3e47d9864f59bef","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.92.1239.tgz","fileCount":24,"unpackedSize":75714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezUwdCRA9TVsSAnZWagAA1dcP/3+/3HVq8VAqBEvU11uM\nURcWgpD0IfxA+CrmoUVJjmS3IGFwfzRA8yEAMPKw1kgcEsj10odxDu0tJ8iu\nBbDYQyw7yYWd0K6q2VyNPeifvOIvT66QXZiHiEspQptVQu8TJ+PMDPBlR6q0\n8+88DXEXmpC4nL6ylZcxwi4VLR0Q9q0DO9YgZWuwkPdSLtDGaNqo8TQkCagR\nJv8sDmyq7Z2O77DjzqD0gccCv1prnOg/jmQ8qPFlVwHY2dSlMTKRZNiWpnXI\nODslDPj/Y2+Y/FNNWkSjZ4RNl1vLs/ne/A1gMhuNYGT9FQdN+evxMnkdMsw4\naftNpKs5gg4dIy8ZyxTx9XfDo3SSkO1yAxtVak7iSbwtNLtZur17NFoL1NiW\nJVxdovoaMcX2mjW9jDzIc0Chg4kRF6h53lW8Ny5rWJoaICA4v8Tg4kHeKK8s\nsXQ4woPsOofJgQNbxYuZklfti31Ks+cRSz3oVNFG9H+BnDc7K6hN9zOr2DKd\nGuppUE23Lo9fIrJy+XhZk28gQXOicPCom8bpemmOQeGk3NQpAN/vHXCNYD5y\nVp0kXsdhmH7D6yNiwVNhPkedNJR4qpG5YoynQNX1nsNuafMBwwlmT1lRr9uH\nltN9gnULVAaaHykMnPLpjnyPfi5BW3HX96ILx5GuNc8Bo14wcU90BAYWR2C7\n8yfJ\r\n=D/Fn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGpDEushUWOejqhZMoXB5BufI3r6gOGVl2frUlujqJcOAiEA6a0IFyooWSGOid2hgsZPW1m00P8Zcv5y0LhEPeljd6Y="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.92.1239_1590512669182_0.2852631166913313"},"_hasShrinkwrap":false},"1.2.33-canary.73.1242":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.73.1242","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.10.0","@babel/core":"7.10.0","@babel/plugin-proposal-class-properties":"7.8.3","@babel/preset-env":"7.10.0","@babel/preset-react":"7.10.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"80c314723f358183ccfccb089951c61aa126772b","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.73.1242","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-+hdKHWTv+dVTXj341KGAznHJx1NRl+4FBUINWAHhze0AN0XlVyMlWn0Ag+tAMD0oIY8lRHhfXutKfPyEeG/eGQ==","shasum":"682899bbf6fd73449aafca703ac27a28c4ed5e6e","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.73.1242.tgz","fileCount":24,"unpackedSize":80648,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezZqfCRA9TVsSAnZWagAAr8IP/j8y6jqvteQk4WnC6KIY\nW+3W6FjTeImlWYRBvj2k9n2is2efHoqoBaMZGYHwq+g6dvF3FB5sXixXTN8c\ndlqj8LijSMt0A9yfg7I0nQ/fbBqp/0+yXjwRRY3zx8noFVueIV+96qKMOH+W\nMoBA8/9nC6enrS+Un8ztNHCY7frD3XAfl/nMP8ACrmR9T4Po3vj0zYgmHSBt\nR4bKhLqTNnw0rhKtlcTBIQ6hIuSuCBWHYLsPUQeXHHA1o4RyWaLPwP9G+sQO\nQXTQsvh5PR9Y9XGC4/kAEg+BX/wbP57bjO7NSK4r30jpO6m9wX+g++bU/Ez4\nkYPGpYtc9YZ/7VGQ2O1MHzp8uZPjOF80JWD2QBZwYUCNR3Pa9SjgXOlgxPMH\nZf8RtZSdZ1V4Dwr5rsX0QaKzM4C/InZiwrhvCoKJHPIHxXLgYzwEDvkqLqlL\nBwtLip69im1uqld6+OCVOEehofZVlNL81ONZUHyX38Ux030XvI/c2+9QyE5h\n6tn7OBhLd+QBYgtADvSpc1Vw/4q8hn+4w/8algRUHHzdNfn7scCoQFlXbtVy\nWI0bRfXDZ4ZLOaDrCZX3wgKCWID87UtQLPbz+LL0NClSVb9zQgbzJJoSBSbc\nD91mQ3AwgF5NRKi7JAGKqciHyAXYtXEyQoZTZVZ2uOAJgwXsuVM210j+UEd9\nPM/D\r\n=8Dx7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDsG4C+Q6W16VE0xUnP1FMiGniUga6zW7inz870rmlaJgIhAKt2gdO77SoCIIROu6mrQTnVg0u/4yzsh6QbMybKb5q5"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.73.1242_1590532767303_0.03117504774161728"},"_hasShrinkwrap":false},"1.2.33-canary.92.1245":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.92.1245","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"c3d64eabf5cd1f4779fca5135215f9a2458a2d3e","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.92.1245","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-svXnmjHDgiy8RRd993PXG/Fd+VDp/CLsH1zpxdvhIAvp7mDgokU/g/qddPI7ZJPJ9tNnXo4mQIGO89XqUqX3IA==","shasum":"a20953940b6eb5d402b57e6759914f14e5ba4417","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.92.1245.tgz","fileCount":24,"unpackedSize":75714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezcMsCRA9TVsSAnZWagAAgmIP/imgk+blaakOQTN+gF2H\n90t/a847TZ/vKjeF/TNyYYByxo3hys6Upgk8M2bWlhriImb10wTvY7Ww4Mf3\n9+whh1PwnqD699cAZHaKGI2CI0qwIYtDIg3OCo73AkvfPY85sHjtQpofvH1n\nkLPR/NmUlMihyg4Lf38hFna08ds+HuQfZNEubnR09XeP551rQWx/onZ5T2Zu\npxYa8Hgckhzw7Qu7HTEeaCbAvtXvUXd8Lbzy+tUmsKoijSkJzBlwtSUrC0dX\nA7g4Qq9Y0kT0HaONyS3Ajnoj0Tm/LfxzSqNDTiZec68rJknh21l6WMu+3K+4\n5itOXtgWr4WPrGUIk4FwmQzs/cyJfQsBREzccBvBA7bbHgdxrZ3Rqvu29hzU\ntY20e0EBFi86X1O3oeFiwEG7U4jdPv5rYxf+ANYi0uMYQT5xHAI0MW1Fh61l\nvRezsFQo66NhLK4Q79jP2CU+YlMZNQ+S3G9j6Dlhm6uYeRhT8Sb6WqF3EBy6\ndAKwfBPFJsfqqx+g/y8TvdERjAt7k5BV4iEskGI5zCCU4qHYGUv3OOLbqp5Q\nhLYdjK45Zn3mIio4sDC96B/1+zSbvRWZOmSotQSNvx/hTPO++ICyFHhsaBnZ\nMJvBNr9KD+xcRKWB3P2FH3pWK44xbPLJ5gALMSdjd+eAoukoSLJpfG21uEv3\njD4i\r\n=j+Wc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICsLnrSi/ND2gvwdhoWFvwwNlmMFr/l1qAuZDAyf50trAiEAmEaFr8fjODMsBugepjDKAmNvXA1e4sW9fgMlN/8jaAM="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.92.1245_1590543147726_0.6556046874119283"},"_hasShrinkwrap":false},"1.2.33-canary.73.1248":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.73.1248","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.10.1","@babel/core":"7.10.1","@babel/plugin-proposal-class-properties":"7.10.1","@babel/preset-env":"7.10.1","@babel/preset-react":"7.10.1","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"5f9a54c67d388614c0184c4593a60888703c9253","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.73.1248","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-yKC1ov7V7HeyfP9dX/nsQKjk4xqpfwMkhJUBiXgbFvlOTKRfTF8TxIsIrv42XZFkpGYHGfdhOJ/4Q8x2SJpVAA==","shasum":"8df10d2dc3939a89a919610a22051427a7f4ab3b","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.73.1248.tgz","fileCount":24,"unpackedSize":80649,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwYkCRA9TVsSAnZWagAAVN8P/RjKvO4doVJto4GqcZnN\nJ4KH4kwIaFcFOSdoDMMVpmKH2gEqmnoMXcAK2zWefd5uk0O6DqkjFzHluCea\ntm0OCI0wJIa8ulkOYzWkEZo/M2bAqdJJ8kdhzbfFB/wkCW5Xmx4m0eL6ic0z\n/jvMjaYe5oh95+mHALio8/o8y0xEa3LFPKEgnzdAqL5WDneyD1S0weTbI/Mi\nGHC5kBXwRvO5/tGRd1H4CzQpEm8Vx8NAzqFhdL7TGcd8hccJVOU6Fjz6mQ77\nL/FpIcIQI5p/qzDw5cUc810VF5LARA/tZjFZMD5HI0yDtGA2xVdFKuezNYzJ\nVq0rSg3a7Vhn970shqf6HHG3v7/58LorldngbZamQ4HT1cdq7DrBZljxCYqV\nOkb5eJQ0tcV9Ev9fcvqgwnl7uuaTujw6uUKeXhB5PbNGb2qS0uCqHxemxgfU\nGpQLJDAo1YIsW/2/oDK8aQAcKCYwYPBqmhszyHqDylmOsSKdDbt7w5UyjoMt\nGZALJUecTacA/886EDWTerTOpiDoCmGlo0H0PwAjK08GEIKdUobCzhADzx6E\nq3W6hv+hjlsE9ihZqQkIXJ90c5xhdcYTKEFJHXO25ygXxZvyYCZHTtDR0Ysf\n9EvEyVYCa8tenoS7q3MQA5BMfio0ON37NOj8isvY/wlRvrNeBmX71RIhaB6B\nZWI1\r\n=+T5e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDhFYHK60puz99lvIgTI02cYPiO9kbVqdtlgxGuRSBP6AiBhnEjDVg7x2VtH8NkG/bmjbjn6zgJITui3FSESZ5OSLQ=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.73.1248_1590625827486_0.12643126753354417"},"_hasShrinkwrap":false},"1.2.33-canary.99.1251":{"name":"storybook-addon-react-docgen","version":"1.2.33-canary.99.1251","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"7a7fe374ffc075119f406ca59c889a41a43551e8","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33-canary.99.1251","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-E5NYy2D+7W3v5XUW+JSSLObjt6/QSpqWp+Vg5vGXRk94GmQ5BG4HfU5rLayhsRfpjBH6q7dQmPWG7Btj9XMJVw==","shasum":"8136721d76a9574f6d8ed8439bba311592e75e62","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33-canary.99.1251.tgz","fileCount":24,"unpackedSize":75714,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0BnfCRA9TVsSAnZWagAAJJAP/3xoy3GAq3Um/VrsqOMo\nx4IEZ+u4ZAKIXgjzUrlt3StwoCm1UOEkZegGW+6lxirGe5cBetxVbCLkcZwA\n59WAnfv5GMVc/eMq1NPyFpeCwhizTRxUggG5NvrOmehArdLgceoV2k3r4FeK\n4jnKEZokmr+vQiEYytyIS5XZajPSEzM9d5xqlC/TKmZLRZPFCW9/sKd3LMqh\nzqcLfjHsjOb6tnzpiULcsfzsO++bQAcB0LHmnq8XxaMDQTCfgbUq+cMjCiWT\nY/ENr4aTX1fwsiRT7TH0/MvIK3Va7uk7KuYqbf3p1rKiEa81TigCiGI6ZqPZ\n1yFPSHX024soLGEPTbfWbJVEkQhWvJYcRhqXGPzLFreMDQm2/9oTf/w82miI\nsSMYcBMBGgwxszsaUy27O1Rm1UpZkicJwt7nzH3Gh2utgX9yo2exJnhewFqP\nXEK5ndnvLd9s3UaoRT2j/u+ZbZIJOd+bu59ptpw3o67Y5shsdSUOD8C3KJWb\nghU2Yhmkp8JfZH3c1UjDcbKmsdlPykGOIUUBkg0E6mNalDAWJqCCbWshoQV+\nPASiVL5PMGAx0+WBLUF2tAR+JdcLSoLgjoLny6TcHweCRwsyZTLUr6Eh6MNT\nONFeQnrJL6MEP4oRFaJ65qh96+lKDaqeapYysM9rPc687tPvESTirMso50AW\nUsLy\r\n=qtB1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDR2JsutpJFSEmO+GY8EQzWcA8Jf6J5AdW8zM1XB2C4uwIhAJqrgobr9YscLgenU4dlEDmN/8DqZscM1vOJ3Bw/dNzz"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33-canary.99.1251_1590696414620_0.21757905980231196"},"_hasShrinkwrap":false},"1.2.33":{"name":"storybook-addon-react-docgen","version":"1.2.33","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"3757b83852caa7bfe8c29b387c38cdb812371e50","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.33","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-YIn5cj4WBuBH03awSm012+7/ku1lHBtl73i9u0Adt1AfPC2BBIcKL8mv6YCZujm1yt6pNbNVt38o6+ix/th3cg==","shasum":"f46aa4dd5ba6a9554b5faff7e146304bb5d12a7f","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.33.tgz","fileCount":24,"unpackedSize":75967,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0CIPCRA9TVsSAnZWagAAlDAP/0s092EcyGrUgYb9DsUq\n/ZckHeD+7kM0egSMpwcFH/ASZ1iTqqfG+CGQJw4X1Hz4M02JayrwtMkYDKbd\n9SAxLkFHfK9Oyi5qXoxW60NhXNFEWiui752toeLqmpt82Du5GVjIyTOiB6xf\nGRmk5M/NASZwe143HidViQkpQltfS9MeH/AEa8ornZu+T6VipHFdbr/KmUTV\nkOCUUgJTyzdd4RsczfkD7Ny6wW5RRPX8S/JporEGuzhoNyXvgLHgtDU1Ctju\n8/nHwMpA0ifawDsLwm7gX3ZZQCP81uwH6vixMpivhMj2Vm7NmmeogoHzG63r\n/3YbgimHpSOzb8lBK0kMGDvleNkAh56J9y67y0mb9FE2e2aAtAtZlaDwiJOT\nWgsZMncuLN4oVfF+6UcAipen/1tUB4c27Kj8Ff6xdxxZWTZkD9UVMRPAwRj1\nV7g5GiNLLtAJo4n0FSmRkkDaKIh3WQdsBkLb3j44JPLtmt6oq/LvcgwoCdWS\npkJWmEdZmiF5TyjDTjxPQ23PjO9lWWUPpx19oNTTxDDOX649qqDSX6afam97\nXe5dCyXZ411Iq0ZbsD80Rv/KiYU8JupDXsSLnZ4tYf+G3XJa0XZKWhWsa24X\n+M6zxadqo8FtEj0hfcL9IeZdPxUwXa5aE569onVlIEA44CHFOvMqijGOrV2y\nvo1Z\r\n=RbUI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE62iOETLptOmVrgFUYLGQqRgBk2BSAfLYXavJkbAF/6AiEA1gelbsP4Aw5yEv0iuas2jdMzhGESmNx4yuhQge4wLJE="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.33_1590698510794_0.4463747360248944"},"_hasShrinkwrap":false},"1.2.34-canary.62.1258":{"name":"storybook-addon-react-docgen","version":"1.2.34-canary.62.1258","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"2917c0aea91f61fa654eaa462c1bb0e04ba9cfb8","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.34-canary.62.1258","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-26Cu/5WPylbinwQPxhEquGKi16/0y3RfXsQ4VWaeRLbbmpsrpTqofC5FK/L9QOkhayPn6dF08keug67tG5SQcA==","shasum":"00606166377d1bf12646455f1cb0c816850d8213","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.34-canary.62.1258.tgz","fileCount":24,"unpackedSize":75981,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0COqCRA9TVsSAnZWagAApEsQAKDvf8ObibT0M2TOO7Sw\nDyolCDxzu2ieRSGnRBRMyXWgcNLqOjK5gIrRusUSL+51/WNRn+V6ozI6okRd\n1kRbpFq5rdFgGs7FQELGxtLuTcGkBdKw91ogyYAFei+MmEdpAr5NJ38tW91W\nYDVX1OxFFXrHq1QHy+Va7ad7rPxSdWQm+cCt604vSpYnP22wcCJYyuDofPPh\nSva2F+BgONzlUl/d7a1ee+P+P6gxQCZeSpuPCwrjGVLLK0Rll28tJzRnX2cn\nNL8wmWt0sHDrEOBvDHBmQQjqIKsl4kAwSNqDCv5okwjJTcpXW73uxy9ckX/i\nDgB6cqQYZkONtd+jcxPwi8Sn8aIgIa1BI/nsav7IbRlQvn7S6J+ThWPVTFGo\nsNCwKMmfOxsgqTuOW1CxVJTYDrfygjzWR8ZTkNbEf6+L1sVxrxmlKyRk6V1/\naItsfXWJwuUQLB3yWnqknNPpZwrGNuUUhFq+6Zxwmi51hvryeid6Vod/hdx9\ns78ou9Af61X/BNDQIPN2n6I+gYjaBK6j6OF2pHjGJ3DNhTy027YtjPtCZnNY\na6gOyZJVOtwx/idmvju/GZ05kZHezQU72dnwihs8iE4cUPmWHYcaJY/8BADq\nmsa2zAIjN/02QRP+Mr5/9m9pRCZHjGlP/R4+ZpO9vZpjfWZGwqmQJLAnjmfR\nTRHI\r\n=1PHu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFjM1vW2d3gSxkUqzUKMN/WboSJRAUBErUQWBNjVuxCoAiAMGiT/B5inxbT4jGzza9vnYMY9huSGeVoq3uCnq+WyhA=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.34-canary.62.1258_1590698921711_0.1732852978331565"},"_hasShrinkwrap":false},"1.2.34-canary.88.1267":{"name":"storybook-addon-react-docgen","version":"1.2.34-canary.88.1267","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"10.2.7","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"fa0792ee44071fc00b5353d5d43f3b9634abd7d7","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.34-canary.88.1267","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-kY1W1L7K21aO7Y9EnyWizBiSrJNQZ/B9pt0yfY+8J/yyI0uhbcD0ZnCgG51skoSo3tKIB+KOkoKBHAFF01xPaA==","shasum":"538b223808319e3e60636b59fd9714ddb46d2637","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.34-canary.88.1267.tgz","fileCount":24,"unpackedSize":75983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0JA0CRA9TVsSAnZWagAA3y8QAIoldVLDDI8bSn0W2iFb\n7rAujeSImzoeTOXQnSC+aTBrYIQJUKXLpV30+he2B1saMCKVBALP0TBRbjil\njO5oz8yC9qE7n2ZhCp4xCouUYwc5S62iGqQzXxUDEyCy8iDiichCIZ/nogq+\nfks53GNsB5xDWfM4SgR+6yJfhl/YKpn2ve3r9YsLA1oLKy9PRxQ8x7kG5+0+\nZGa8fmDGB1WHb/eqDKyFsJw0qTR9YgkH8pVfWeO3qw9cUTm7be3oMaS2U/UL\nK0NgR8ZZ+iPVQPvMiH6OAIMEjSQYvU32bNw7rKKb+RthnRq11gjDG0E1XRtI\nX32WUXGj/piYkRYuNr19kxTEkw309+K0amt7gv+R9RcBiX1YjWk+8iwg51sf\n93noWe3lfStLpy7t0BgpczUT27nMAeeicx6xNAoUqTTQ3sa981GSFrgFIOYa\nrkhosQ2gBo5o74kvt1WNSahTTQGL9i7ntKBoLxKcxFVKQLC5B1BhAk26PxGH\nBTHTU2I0Waer9JbKAZApYKYYmOtJaE655/KAgFf38ONhYKFIYjlNM955IeAn\nAgJF4k/cK4b2qZVlAj8Sy6AB8YPsDgKdPUcqVD8bxYF9zN4g49QhGWb7TKwn\nb6Qmft7NApIK/vzqSbQWIBtiNR6/xi8u7diBttV1D4ugb1IDhuf/FipCww24\nbBLg\r\n=y31W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFgx6q0muWjePQ6lD+WotZ0vCbEVZcATZNMDNH55RGrpAiA2mZEPac6nzq9OKYxQTB2UMJggpL5W3SA+0xAWTlUDZw=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.34-canary.88.1267_1590726707918_0.7065653547475068"},"_hasShrinkwrap":false},"1.2.34-canary.73.1273":{"name":"storybook-addon-react-docgen","version":"1.2.34-canary.73.1273","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.10.1","@babel/core":"7.10.2","@babel/plugin-proposal-class-properties":"7.10.1","@babel/preset-env":"7.10.2","@babel/preset-react":"7.10.1","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"a0e0139463cba01c3df1623b9e07cc801058deb9","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.34-canary.73.1273","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-PC80nem1fFqsKqO5JU44BKWojtEGqBmedvmxvsK8GQyQSNfek38bmEboUfFQx2iI8CEBdRl7hCO2j3HCztqPmQ==","shasum":"c94801c1e2357c2aaa91b704f4447af3be07f7dd","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.34-canary.73.1273.tgz","fileCount":24,"unpackedSize":80917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0sC1CRA9TVsSAnZWagAAyFUP/2Mo4vsUYyOgATr2k3Iu\nUTtKKLATtP0SHteI+hOWNAp7aL9ccWsSuNWjZyNWjggJBbKq3qfZwv8xd5E5\n25CPQ1i+g0u9Scz53I7riMTLAe9RuDByx4ZsnVD67m+MbppNrLoDzP7RMc3s\n+lBItvQYViQ67XLXoinYdQ5tax9Xp0sj2J0NNW/GniSRLtLAireikKA9dXKJ\n3UmBvq88Ge/lhByoCJNel73tU+XdcWmTVI4ix+a4D/LLTtPAZQ/QclvogbVa\n5P6lgq3rO+z6WJnTDK46V8GjO1lKqahWWJ6RsseSEoMYXyTodtbfGnZ8DpaL\nSc1Gx/jk96Hojane/EMLrafkCBFVjlYMf9PTTRtYLnAN/Pt+p35Pln5Q7d5o\n6m1Abfohf9StVUaPfyrFU/iudKaBLtEo6VkoyUS1JM21m45S5vSm0U8PtvHB\n+6EDzvEaFms8numIf4mQTgPV098f/IPTJjm8QcyHibUJUHF5QFs7esYkjjt/\nU+0Cue18wDMq3Mh6g5Bsu1lbIqoPefPlsRX+x9OHY3mgP3L6JEI9FJuHp5Vw\nf9zL3lckdeo5yGybxemwMXPVacxkaGJGSLfAMcRzNEDYnRW/ZY6V1GcaIFVI\nv1YidjyWk1D3vk1WYv3H7Kyj6QeVHJDPYdykfNAcZ8lySX8aw1OufX4sUe19\nyF1h\r\n=mohn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA3BUS/t6LeHkHnkXZ84xQseV+Tu2iFRfCI5B/lO7Bg1AiEAz57Ab771/ZzhoTEONzLBwaacK3XcqyeRmjdkYN5NMak="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.34-canary.73.1273_1590870196921_0.18749914709085846"},"_hasShrinkwrap":false},"1.2.34-canary.88.1283":{"name":"storybook-addon-react-docgen","version":"1.2.34-canary.88.1283","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"10.2.8","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"cc649aaa77349d036281a53577bf7486303ac5a0","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.34-canary.88.1283","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-6Ylktnnt7Ns3L1jtiYHlhldmzhvjetFJ1sFYHIR9MTftDOZmZQuHh/90HEF+KZK6+qmV92Jkt1QvF5Wr3JoJMw==","shasum":"5e01622be178a84fb84a637e6fb63aad0dfc77eb","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.34-canary.88.1283.tgz","fileCount":24,"unpackedSize":75983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe17qwCRA9TVsSAnZWagAAoOsQAKK5SLj2qujnjWjQ+rS3\nMH13uGk3Mu9ZHkhBJ755v01ZnSPhej9+r+mKGv/fqKFZWRpWOj+9tbXX8wEA\nnZ1RfIN4NVEu4NAmqI7vVsmlwUbe7N9CKv+AA5NRNkIHDgGhW298Ki+PALUz\ntiheinYURk6PAwARI7lvYKy0a7cN3AlHLhL97bIRkFFSGpb6H8NnTfxSo21S\noAq9tjnDOvnjR7YdVVRHwhtXHgBMV3f5FGlFwZhMqN3x88+0Ll6L9KHFjzpu\n16EwKtPfhXrzNZ6P0tQRkAIJ9hP7Yo1BkoqL2MhrydTZqDHFPUizIB/RMF3Y\n6gOEZyNG+SFSOXMwPl7N7MdNiBO0d00G5G5q6+zBU30hv1ggwcRaPtzIqhjE\nk+E18OjKWik/JgBZ9iS6blAlaoEufLwszxkhc12LWlFsmvmR1RQmp2p0jV8t\nHxGSl4pQW7s/njBvwRSaP5oYW4Nn00Of5AiBuA0P76cxtYWYwQ09hyZaaeT/\nCVhyaBDPEGE2cqPuT8gjp2rSzQkyIjcebSn4W0XLMqEATNKlKemt6JSJPCJ6\nycIS6bvcS1hTYdl3oW4wAAhY9AyL5linOZb5BGMEbU/axk+K6xHWpkk9cvNf\nFRWwIQXGeuuUXkmX7FFidgRVXAw/TE9EZ59AkEzq5yLIXKXi+cGMY6bEglW3\nddJ2\r\n=rEAL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0zkxIc4HuomBbznbaDUj1wvcIg7UDCsPioTM/4mX7/QIhAL3iCWDFn5hwi3ddxQqxKNVQeejtpSWTxG7cdNIWhHHr"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.34-canary.88.1283_1591196335547_0.719417583719651"},"_hasShrinkwrap":false},"1.2.34-canary.88.1292":{"name":"storybook-addon-react-docgen","version":"1.2.34-canary.88.1292","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"10.2.9","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n  \n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples: \n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   * \n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components. \n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from \"react\";\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from \"react\";\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n\n```tsx\nimport React from \"react\";\nimport { Button } from \"./Button\";\n\nexport default {\n  title: \"Button\"\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n  \n  return (\n    <Button \n      primary={boolean(\"primary\", false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  )\n}\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => (\n  <div>{size}</div>\n);\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => (\n  <div>{size}</div>\n);\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => (\n  <Card />\n)\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"8b63451bad01f222029c5b9e30aeaa7a07871b13","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.34-canary.88.1292","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-+UrvnqJ2gfJgp3qeZm9ApfYW2zlCdfaDTXkzC8qs3iPf2y8C5r28CFw7TNScmuM+PbkLtwWUUtiAxlUiHGnYtQ==","shasum":"de5de4f50caedc281e7a41f2165c0101043f51a7","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.34-canary.88.1292.tgz","fileCount":24,"unpackedSize":75983,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2OeACRA9TVsSAnZWagAALuoP/RaXxTANcDd4Kmj+tWD7\nGG6QJIL3b/zkBFgMHIDGm9Jcw3G80HM6v6kGGqNJslcpNqmMBKy+4BoxSg/q\nynebuWJukd4TxEqyaVJt6U/bWScLm9ir+nrc9iKyT+8yicfU8DcpXYG3vne8\nqwGhZ9CRSAJmSu/asXGt5glqJmKvNZNu+K+dKvCr/dC21vfwxDaY7Rn4VWkL\nx0d0p90aS1bnPXeqIq2QlqEVe7nzsRtHFaq/CpLlgUb5b372+YRvMEYp812d\n03ENEYH0m81vhe9QLXw7pw4TLKT6d3Vgp2C+Vu1jwGcvZB57cbcNEF9eeiAs\nD+3CobqR2qtAI7uSTyyebTuzAafgqPCsMMocMO9X2riszBMFXhVJ0yY2Mmwc\n83iihqLAkxyLu4P9w+Br508iN+OF2EnoomcyUwFcypXgWKDkP8pa560kE8Nx\nPak5fMG8GwOyH043zMdgFpSLCFsf3YWj/XHDexmRnR+6f6lQzC9HUaeuYRbq\nvxF6/8rNY0XLL+Fv2JD5bzNcBNYs/5xLA2KTTYWGW2aFA/uWYdqHCFNMROuL\nEXKH4tr1jalATWHlXT/V913BC7EGs/DR4NoqHw7Hcjzp+FW9Xec1s9BJatJp\nt5vq+hPKTUPvCdbHUeLgRO5Hq7cavv/C4mJIDjg4tlacPgjMVUYIyK7uz6JF\nM1Jj\r\n=aDMk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICCU11PMwFB/ND2giC1XJz1Ltt45I5DcMiItQF7z++IBAiBOdoeXoOrQ5BWgApMT+YwFEFz8ou4NuZUxD/AeJidzyQ=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.34-canary.88.1292_1591273343786_0.026820152943714648"},"_hasShrinkwrap":false},"1.2.34-canary.101.1298":{"name":"storybook-addon-react-docgen","version":"1.2.34-canary.101.1298","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"3377b1ae1769f170d0ff925c3fac2901945c54f7","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.34-canary.101.1298","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-4FUaUG2Shg8eUjeXV6StyeZ7G/r3nsmgJw6xKMpXjmnSZJWq2lsV9848xn0IHn07DiAO8lx7RNYSaKBN6AHqWQ==","shasum":"7bbfc330d82f3667dac527f9feaac820f27c99d8","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.34-canary.101.1298.tgz","fileCount":24,"unpackedSize":76406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2rMxCRA9TVsSAnZWagAAeu0QAKIZgaxmV6OJe/NT8fEM\ngHepig6qsIic955fxcqKvF/s2DAiKy8ROChmAxecEcudCwK7jKjrybKO7rc4\nj1CcsH+RV0mBLp+VWSORMFRxnYLS/H2jlQtAVoBEqvlRkqBradZ+9do0urAl\nyrCsAgaFfCF6QdXhaG8IHmQyg7q1H7g1mpjcvqqEd+hPkBZE6U9LfsjyGym8\n9xYViV0LCBv9lO6rSZE4z2URAPn7GCk3Zqt878Ccrs75p4QKI69Ziz/7Osof\ntsP9CPga3706Fm566SNPzdieTnhHJTDhblaqRv7uZS/vJvD9KVHtihInooxM\ndcaOlz3an0SVV40nTZOmfLVBXzPF3FJ03I47S0eNJl5exuyLGp/PxQ5J6NXb\n565DJsphXjl70tIOPN6ZDKBuCtH6A38wzcJofgdkum4qb1Wej7tFSiy40mqr\nCxEQFd9WMMUZ+YXmRSHpiBm2dDhQREQPrvyxnn87CNYLVYWeHwCO/Np55Gfc\nedDJXIV6NPEIhfwUcYSaGSeTqGRBJPMlGFGp0wSfy9UR46ndRVYccVg26+U1\nNEfSh/DuzjjJxL7sbaSbTXKhmVAmg1XkIWl6n+k7ZTyIZ1RZlZ3PkS+1mZHb\n849L1864HbPK5e9nV99N/cK1BzireKFZqg0FN4qludgRG9w4cciEgHCJXeNo\nDzxn\r\n=tcHT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIARcICZo/ZlNMYO9/3DJ33WGgiIoBUs+/fujg64rGHxlAiEArp0fFnxHzMXGZB0KM8Kx9oJSaBHhkQvY4ee+WRXQet8="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.34-canary.101.1298_1591391024684_0.5437141084552821"},"_hasShrinkwrap":false},"1.2.34":{"name":"storybook-addon-react-docgen","version":"1.2.34","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"28e72cffa9364ff3ea6f2d69d2ea068f11097364","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.34","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-ImI7zc0hrsvLyq0kYwcMmZNDjRa4UoPOEBGxOs8e0mJSQESEgt4lv/p2QeCPd4iRjj2QaoPhjpw6308vDAXMpA==","shasum":"a58dd9aa343099254ba1538b88eccbf72212ad0b","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.34.tgz","fileCount":24,"unpackedSize":76750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2rQNCRA9TVsSAnZWagAA5iUP/i3BRzM65JTHfRY4pkym\n2ihuxd/bY9xtBvz/kHVqClocxC/oALiSzvNiIuliPY4K1os+8rbwEzTCHNYA\n0QQL4wm3OHUu4PHKgvRXeKYbUjqB84AANRJVdd7zcpN12K6wgSuVNc+1LnjY\nQFBMkH4Ewv7J4ZJWIvAPLk2M4wr1L4DhGymg+MhBs70AXwqhOlgmzJ1+oRlJ\nemOX89UXiIeoVHIfBWCmjUrhx+b/79cdjZ1WMAQrzuMAhM2CBTCshMSwextD\nHiOv2o0j4TGdYT5142bn6nt2lzrNcr4nHDVphNt0Bn+f6EjiJwt/Z5pnN+kj\nw9guHYY4qauUi4xJG+iKN8Lj5qrbnBpwo9b51ueQ4vEJl1G5QxP2jLjoWQL6\n5ssZLuXzZaE3GOgWmB8VMJwV4SnrZtaraqLuoErQpbQ6/74iopze0i1Ld5dR\nbH1Q4bt5JgR22UJ17Iyt0Lp3gGtIKOWoOI7BKGqqrWQhX7N1YpyhFVGFygGe\nyrhfSLSIXuXAO4QVStPAACnyWs/vPemN6mW5rcwOn0efwhVzNVML8P/iGjXF\nCffNlfg8AA6AexnnXD/bbeUoR4+oHlHoQ/Mzi6rT2i9Fj2A/weFim5HDs4en\n7DRid0RlhjBXqiz1elcYnO3GgO2EjMw+Mk14+bCkBM3mSS3Ur4ChGyxEXT9h\nerEc\r\n=9ebU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChxN8JYFaHLXdzQzDcQx0XQAELASLjDaQn6FmLhHpTuAIhAOoCAOHnuyJPMGLT+PqNo21BB8K8WlnsUk++Falw7qpR"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.34_1591391244893_0.41600556506538267"},"_hasShrinkwrap":false},"1.2.35-canary.62.1305":{"name":"storybook-addon-react-docgen","version":"1.2.35-canary.62.1305","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"9d055609c7ad943c02c7afa63f4b6a804770135b","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.35-canary.62.1305","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-aICEOeDYWW4e9eZWBrUJwlibpj6UQX2dPD58zc5LLlULPdpE3a4K3pA/iREMGf5RfizhlPJXC90VphMpKl52cw==","shasum":"18c73bc1891694978e37d8837087d0a76fc101c3","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.35-canary.62.1305.tgz","fileCount":24,"unpackedSize":76764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2rTBCRA9TVsSAnZWagAAdxwP/1kJzID3XMtLuTyofWJP\n4JYRzSlkhUwA5myMYlfnvyowJj6ymFsj1cJTbTj3EmziRTGM2IYEr7ssia67\ndLpaxMI0M8lNE+qEnA/kOv4lkYRbrCgNeR5Sn8oDSKbIu6EOtYk0hZTsZn9a\nP7vKkt+JGXPvcGRqQBhBaHFctX5OKx/px2Way4eih+dJ6v2NdFTY/gt81EMo\njE9ql7SOh1uSPg7nkxAN853BJWM7A98pzS+CRvZYj5pYZU/41HCX2zKfcFLc\nmVo/lWaHdYvSzZxgPrqH1CdA2hsnMOAbRK/b/uJSou0G1pTpfX3s9RBJyzhq\nG700IYWYC9I2MeH0xt2A0YCtne1qFMZYSfiCpNJTnCIWWBcD3QXISnkizwWe\nW1aUn++VxaCQAvFxERXjyTCGFThsAGa+LhsVG6DiuMMnQMtXYnFc49c4YIa/\nSjvxyvialgV/mCRMlObIVSQ2bFehxy/C+helmBl+7tmgaZYM6NO+/UJSk+hB\nq7LcwM0pdI418wTY0vHKQG7FUh0UdYWYWggXhi2a5X/aG5XOvl5OSf8VIkPr\nw0AsCgVtQHoWicoW85sK6vZsI+HP2g0WmSP/5ivckxz+jcPzGGHh7QGopfTO\nSeczSDiATy3Noid8njNtsWsP954n9vjxdy7bWoOmJlJB/3EZjUcwdyGT5uT3\nV2Pn\r\n=5jJk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICky28YNscYiDphAgIAPzxO7/0d8bER3MZi0lxOizx7DAiBR8HCPzKf2SWfAWFeuKWs4EMRvenHR00N6AWj2XVWWoQ=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.35-canary.62.1305_1591391424840_0.29377311747080803"},"_hasShrinkwrap":false},"1.2.35-canary.1308":{"name":"storybook-addon-react-docgen","version":"1.2.35-canary.1308","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -w"},"devDependencies":{"@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addons":"5.2.1","@storybook/components":"5.2.1","@storybook/core-events":"5.2.1","auto":"7.6.2","auto-config-hipstersmoothie":"^1.0.4","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-plugin-add-module-exports":"1.0.2","eslint":"6.5.0","eslint-config-prettier":"6.3.0","eslint-config-xo-react":"0.20.0","eslint-plugin-react":"7.14.3","eslint-plugin-react-hooks":"2.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.25.3"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4"},"auto":{"extends":"hipstersmoothie"},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info. This addon is a drop in replacement for the \"info\" addon's prop table functionality. Rather than rendering with the component it renders in the addons panel. Works with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon. This resulted in complicated configuration changes. This plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the @storybook/react package through the use of babel-plugin-react-docgen during babel compile time. When rendering a story with a React component commented in this supported format, the Addon Info description will render the comments above the component declaration and the prop table will display the prop's comment in the description column.\n\n### Typescript\n\nTo use this plugin with a typescript project you need to install `react-docgen-typescript-loader`. You can either:\n\n1. Install and add `react-docgen-typescript-loader` manually to your storybook webpack config\n2. Use the official [storybook typescript preset](https://www.npmjs.com/package/@storybook/preset-typescript)\n\n## Usage\n\nCreate or add to a file called `addons.js` in your storybook config.\n\n```js\nimport 'storybook-addon-react-docgen/register';\n```\n\nThen add the `withPropsTable` decorator to your `config.js`. You can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module).add(\n  'with some emoji',\n  () => (\n    <Component>\n      <Other />\n    </Component>\n  ),\n  {\n    props: {\n      propTablesExclude: [\n        Other, // the actual component\n        'Other' // the name of the component as a string\n      ]\n    }\n  }\n);\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nstoriesOf('Component', module)\n  .addParameters({\n    props: {\n      propTablesExclude: [Other]\n    }\n  })\n  .add('with some emoji', () => (\n    <Component>\n      <Other />\n    </Component>\n  ));\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"c71e9e7844c1d957f22c7bb02599d4feebdf1193","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.35-canary.1308","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-BK0TOnixc9omkn9VSYmIa/vplYiwQzM800bAYHKc2DKFD2MKapwcHWYrI2b29wk7+xM2sa7qcBuPO101G+RbgQ==","shasum":"fe23633cc5b81118abfe6c19e637c12b90f690a8","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.35-canary.1308.tgz","fileCount":24,"unpackedSize":77091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2sEMCRA9TVsSAnZWagAA8WsP/1Ds84SDVsELewCXlMPM\n26c+hZytfX8xGfOHN4Tb8pfr7gcMci9tERIDalHkNEMgnYf+s+qG5Aj+vOgW\nCWSgADH76dC+b1dVU7YdnkTPFL4JifoZ0Rbx/hJkAx+vbaXLWwn+YrenkQ/h\nCMkoOQw2hIh8T7aTgwxfXh5eo8QLpqOSZJbO80nn47l5ByIIRORRh4tSmrKF\ngchFTSJR89A6ToARBDLVzd1p9He6tC3qcXMElMzrE3Yy/RQVzP1trHikIfNK\nUt4oTVOAjiCnN1THM2vccqSjMB0YZjWzAv4H6nbExFqfNKChEQ9KKv9UpA8W\nf6kTP8xLCbuNyPw8i2D6nfMSzYHSF3IIAQvgPrcm7L5e8vWHO7kW5X13ZCJh\n5ZexgAA8cLUDQ8b7HToZCGwisYEzLezTy+lbddHzKHMIqMTKV3TlshPWTgmw\nVM0L7EM/Okl3tqRKa6AbWhfzJn2H86F8kOFQESnR051CUSrNqaQriYwa/LDc\nOGloq+SnwZ/gIDV5cO7N5Brxmg3O2e9ZaZ/PgTX4auUQu2tNRFBHknkFBt/Z\nhXio/+5z4kdEypiQfD8sdWRHBTiobTaUMHF2ZJa7U/WqBXjB7OyGLskysyoW\n1bbIMOvzFPc0guRWmGl6k5ntU7WsU2fH3HoX9rBv82TSIqxKv8jCUlp2cGbs\nv/dM\r\n=D7Fs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3+Rk/n83wpLiSz+Q7qjE59BaHjy5Dbkwk5jVQ2KjXtAIhAJArk4ajktC1YW/U+VI2CrxUhTYjsWT8cZAmDHdlSw2A"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.35-canary.1308_1591394572462_0.7685332563015614"},"_hasShrinkwrap":false},"1.2.35-canary.102.1321.0":{"name":"storybook-addon-react-docgen","version":"1.2.35-canary.102.1321.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"37feb338267179c770e52314b7b12f6faae27760","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.35-canary.102.1321.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-a7BjbFLCAEPlV6im6DrxTEfSSBPL53egzFQ1vM8brtvi9VT0ggJ64uvMYApt66IX2iP8G7zXDjYKPV2bbXLh/g==","shasum":"f4038964ddb4f5c5037269209cdfa9e0d741931b","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.35-canary.102.1321.0.tgz","fileCount":11,"unpackedSize":63931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3objCRA9TVsSAnZWagAApAcP/2XP9wGasEbPPWJJbzJJ\nRi53OJoXTrgnd0i96ZMId6CZlGIza3CgoufFS2BwDfx+vAWokjGEgfTpSlUd\n1Z6/U2gvdbaNVXMAr/gi+x/xRBeQHg5PJqKFV+rrKFMEIQFMJyNmHpE2JMvD\ncGlh/EG8IyMbn9UxTzkZD37x/uZ2vxtrF7i4+jd0uzTg3jmxzO+txFN3KqgY\nUSdmPLEH5+0J6TDKILE9M9P9StNertSdc7pMDTAAQP49P+L16vSsOjbVDaRr\ncalFU73+sNcD/v3RA1ZpWhBka3Bfilda9QbjKGJbNYR5Ucp0xidnaYdfF7lP\nmyW3tbx/OLAAA2nPidymBPJID9hSI5BC1vA6GIqYodkNlEV9YCW3SY/JOlb2\npGS4o8KeUu0hDcZyzlG/jxDsqSl9loI5jzEMEfZ+uRvr0dcKprEpW61s24Hs\nUubpTLJWJHNGisfmQvMJ3vmscFemLMa0X2gL3bQtBkemFUMqB40IDBpVO4Kb\nMKs2X48JNpVvKiIttOM0b5Vslgqn0L7m1f9jkXS/rVh0XrTLhnR+mJrE6+Jc\nln3vpK+GukFByRZWO4Ln3+yXg2dtu18Q3YvUpHIevfGo9xrC9Tsn7x8DkvUo\nUk25v8mEiSnLys6/XuGhZ6JrWAQxKbLvW2xmvanbfgesF8Qn6fiCfr0x7YWs\nNwQ1\r\n=ymeL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBJfcDW96RSPh2j8oJ9p4HYGGJb52PrHYEC/NOommKtCAiEAi+1Cg7Jxm21cGMIG0XBkOkXillNdiVxPJgbf1YeMJLg="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.35-canary.102.1321.0_1591641826855_0.7526427786340695"},"_hasShrinkwrap":false},"1.2.35-canary.62.1327.0":{"name":"storybook-addon-react-docgen","version":"1.2.35-canary.62.1327.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"5.3.19","@storybook/addon-docs":"5.3.19","@storybook/addon-links":"5.3.19","@storybook/addons":"5.3.19","@storybook/components":"5.3.19","@storybook/core-events":"5.3.19","@storybook/react":"5.3.19","auto":"9.39.0","auto-config-hipstersmoothie":"3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"7.2.0","eslint-config-prettier":"6.11.0","eslint-config-xo-react":"0.23.0","eslint-plugin-react":"7.20.0","eslint-plugin-react-hooks":"4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"3a526cdf5c979563ae0d843cf4856e5f7527ecb3","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.35-canary.62.1327.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-TtDBa3zNIrYiyEEKwJHlm9pstHjAWXZZaKdq7FXgDGWHssDRAezsQXGzhU1xJxm3ryHmx/kL96nJm9tiPxfNbg==","shasum":"f5e72be10ce91c67dd37f280ce060c9caa2faea4","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.35-canary.62.1327.0.tgz","fileCount":11,"unpackedSize":63913,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3ogUCRA9TVsSAnZWagAAkX4QAITbLWvBBSRBA1TDswJv\ne+yA3oL0wKSq62LwYu91Ghowu3kRrkFqGCrFJP6WdWb4MZhk58RkOvhbvkfB\ng1yZzwO7h5qD9hfrAWCG+WTeQaZcKqaiD6ehZ1AHP991e2kkxeQOSQo0VDzg\nBTxZqiCUxWccSedzykKtR6mQGQx/oP4s3Bp7iSdN3PFqCSPZ+3uQE12GoPmY\nPtPMdsvFcx9G1c2nl6Xy9SBhbhuIgMP/kTgnMH79gRfXk/kN1yWRTlhOCVIw\nxonWWQpP+30QbYep9fUG6KmkKBntUbxOvPg80nSnbKe6CU2W0+4khpiSQG7P\nBnqRsOOrCKV+h6zQv0sSAsQLANLQdnQU6KF4vA5IMkMATKumTrG1sjL5mCqX\nA2VtgQiOCISEaCXbcRIyOhAPqkoKx0t4DTHHsdS7olicYo3RAIDQILoPbNXB\n9a33FE9gGvyMUz3vG2Q7hCIUr4QCQ6O7jkLTnTFBF1UR8pt3MGWpbjgKdk9r\nrH4Ipp7Q35jWEIP48vZTHyysQqincvs5iX7cXUXg2VRyERqc7v8ZwQm47lkb\nn8lIvEhq4TQTmgru9Q/SaEcSmFWtbTQRsdWnmNuS6etgPPYFpGBk/5CSc0Hh\nChE7Vq1OZQWkl7RZ7gijEUNdN10z0naEPfyC+6XRUM9DxxaNRhNkXx/K9DMU\ncOe4\r\n=k1KH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC+IY4kFowphrKfUTtaAIGG+E6BszMjUe14UImm1BmBwAiBWaXBvgW57fIyM4RO1b1MLahlPkfdPq9s374ExsGxL7g=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.35-canary.62.1327.0_1591642132431_0.03723766734968126"},"_hasShrinkwrap":false},"1.2.35":{"name":"storybook-addon-react-docgen","version":"1.2.35","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"0ed4acef661ac50ea7b2e2b28a90cb4ffe449ae6","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.35","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-tqWh1apJrczBaRNnxpKldI56EbZAtgKhDkRMqPoKq8b6bALfZwsjBiSbNtvL4G27S4Tag8YjWdLAKbxXBTpVoQ==","shasum":"cbece9df94004db95047933defb2fc7e9054b9b7","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.35.tgz","fileCount":11,"unpackedSize":64227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3ohJCRA9TVsSAnZWagAAteUP/3thkK0QEk4raALoksC8\nC+jQOXUg45vdRe3PfOA0gLNz92+/18442OT7ApNuSiqVl3vXJaZDUh9/yz4i\nwmg2Keai3RN/Z3jvmIECHTucWnti7hmwhmn8fMJKS2yOQi+iOlCYf11pkmAr\nK+ziAkP2Vt8drJ6cGbnarlVuXsiroEe6976t9vgeRkg0IcxHVXm5daTUvDAp\nhLUrvQzTLd22U3iS+hCYOkVimO78M0TAiJPaPSiky8+A3aeGk1+bBJAab6G2\nWRHL72kY49Kji8TdCG2RQv4p2JuwAJvNaD/yKJJ4SfbRJlMPzZO+zx+JCL7U\nu8Zbzalsm+VeNpvgrfk2q5N40iAKzCh85n1VdX3xL0sWSKFkXh4WdUXj2gHd\nxE1actlakqRUXzJGQnY+P56l2gZzGp6KXvmgEBrKDeU1IxZWTHpj7jqa4X2m\ngnrwcNkB+5qhDgCIOqFnCPrtGoe2ZPsXbwjxhXJaLe48vbVrXwsgA6chGe6H\ntaVcMGSkejrp/b0oOCVGX8jfaRz3Fq59FvQ35DQ86iIfZKF6X+bZCnZ4gaYh\nBzHSrDHPfPD+Fac06ggub4jwnnhnZ4WEx7izsIQKPRqs2M032OFiX6xrk0d/\n8GFDHdlRj4ZZVlVXs47IcGzYnhkaOaOqW+SH82pFJAj02DqeeezaIPLaVulF\n/FQ3\r\n=R2cV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEvxmoQ0gSXHrLKntALCOmPpVbJXSXJP7aj6gIGiY+iKAiBffdr64X297dvhGLkECZIj/wglwXgwesTtBVZb8wrKVA=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.35_1591642184673_0.953954450933665"},"_hasShrinkwrap":false},"1.2.36-canary.62.1331.0":{"name":"storybook-addon-react-docgen","version":"1.2.36-canary.62.1331.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"5.3.19","@storybook/addon-docs":"5.3.19","@storybook/addon-links":"5.3.19","@storybook/addons":"5.3.19","@storybook/components":"5.3.19","@storybook/core-events":"5.3.19","@storybook/react":"5.3.19","auto":"9.39.0","auto-config-hipstersmoothie":"3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"7.2.0","eslint-config-prettier":"6.11.0","eslint-config-xo-react":"0.23.0","eslint-plugin-react":"7.20.0","eslint-plugin-react-hooks":"4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"f30ac9801caa6082f5a30440bf0da26977f5b38f","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.36-canary.62.1331.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-u63VLu5+qsQnG+IHuq7txeSprlWtRP6SMK7xrVySPvZwcIupM/LuDxd6+wIvhdAS9EyZsdAvQZjohQaCYkyhXw==","shasum":"68674498173d33f059e5072c63b5f1f9a192342f","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.36-canary.62.1331.0.tgz","fileCount":11,"unpackedSize":64227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3ojlCRA9TVsSAnZWagAAjjcP/3nhPkuoX17FJmd2kwzq\n5cezz+bkQocXRxzLi3R73kKXyJcxyZwnbP4JfRlskhJclBLiOmQ3wQ4zbnGZ\nFKmMyZFcQ9JO2HbZteLPiKXodeo7cjaKGe0q5DJx+tfnHGlfT+lNCVaFtXUV\nA7CV4ejC4tyuooQzzQZ2/LRX6aVBAvIs/TOO0u/5F/vnNNqN18pa//xIJLET\nPuMcwyPaeGVIKoZQAWxd8RDA0xHvtOO/qlPLXXy3uX7Ff4KJ5I6osj1lLUEP\njucz/XswZ1eE80eO0EczuvGYv7QpYMmr56YvUKxfE/CKAlG3R3+MDs1xGgE3\neE7K34T+JpWyLfFEveoRK356rXpVXqryLGfH46K+zR2DurIBEa5CEoSF79ud\n3Mo908tWdiS8r03h8T8qZNM0lA6AgX2OTUlToXardg2VhcndCucEPywGsgz1\nd4xTHldfmDVOdrY0Oui1IKDPux0Z41zJIAbXTsc/yPI4jFpUMp/1z5GT9IuN\nmKfYrdAtIxWai6Oe0HwsIa1whAZw7k/0/1/RHl2XtSepBgAqXhVNo/EOQ8yH\nNIzyHznN3iQRIb2UNlnqZ+mXgC3G/PFJ0mmWnX/JKQTR0zbMTzD3B7q3+ARX\nhX89TnCWrUJuaNOU8t3CEuXWlXvin/7S2NsybGBD17OCNXzu6cTfny/JJKxf\nE9kU\r\n=GKmU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaN8kA6IVRv0t7BggUr6kBMgWyCJrBVlPK8XY7zTrxoAIhANyq/RNhQdwVimNmIULGaW+HsBl4ELc0g++n5/u/Q24n"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.36-canary.62.1331.0_1591642340940_0.8162943505236626"},"_hasShrinkwrap":false},"1.2.36-canary.68.1344.0":{"name":"storybook-addon-react-docgen","version":"1.2.36-canary.68.1344.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.13.1","react-dom":"16.13.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"7032d1720890a00737479befa037ea1e423cccd2","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.36-canary.68.1344.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-beQc/rJnZ9JuC8XNQ8sqrgIyu+caQFq14EBBCGY2Q9LbzVbmqSJw3fpzUvt3Jgd+EuKK7hf6xZpj7210MrlajQ==","shasum":"a748c4ee087ac3a68b8759587d801d4036f97fa1","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.36-canary.68.1344.0.tgz","fileCount":11,"unpackedSize":64244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qdsCRA9TVsSAnZWagAA9MMP/0fD7tb9Yc4jrzgqWLQK\naKm0WEyyBCftviDYVsEnBggsI1ogOfZK34iBcK53uQvgXegYfGZwYwy7y+xx\nr3eyvyx9y/mZRNfpOvhykr1hH1EQF2nOd9ZisSjQcvQtZiLux6AzK+AgcmFr\nyO+rs3LIBrpuUGrgg6U+y0EfdS97WHqH0e+/nZQAi7+Q8hS8Uxh7fYe52dF1\nedWuXNOmLEqK7nDudu7GvBOipTlcUVtGqvF1YNYTk/VH54vuBkPk5Fn/S4oD\n4Az4s56pxkmA+ui2NJA9s61RZv8SxMNxPXprp8/7mC+qWNyY8qSNOHmF+tKD\nyU2BBxbeihabJJ4dn0OYF96oP1foMflOSua8a9PGNzOZ+epLKekzk8jVMMnN\nxY6aDg2hVwca+/p/+C09lcx8kjUTrgsTQ/REp9hZRxS0goUUS8zh6CunENgk\nHrLsAOz+aCCUyh/RydnrU7sumGpA8meKiijIETtu9e52mUvsh6gz8Xa6I0lH\n9ewklT9A6T1f9koNm9MMZ0utHoC4cENAXFWOzd8YGtc0S48QoWGPvIYROKjh\nDGgNXk29O4Xr+YQ7ijAETx3OHE7q8M0GlJ7eG3xP8hQRs0m9xVtYUT36lS6f\njYHfCU32tuwxEyDCnDe8cNdQ3uRmiUaXpZCDEmxPMoDtaNYreSzc9DHNMT9T\nrHKa\r\n=wFRV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID5wZl81B+QHbYsisGOaTKm+srvjoBqCOAxby4bYyDeRAiA87NuB6QFGGEkuA5MZaFKPAQGbYcm6utOUZcN6BqIiYA=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.36-canary.68.1344.0_1591650156455_0.7056288216297335"},"_hasShrinkwrap":false},"1.2.36-canary.73.1343.0":{"name":"storybook-addon-react-docgen","version":"1.2.36-canary.73.1343.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.10.1","@babel/core":"7.10.2","@babel/plugin-proposal-class-properties":"7.10.1","@babel/preset-env":"7.10.2","@babel/preset-react":"7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.1.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"4ae2cd8ad902bf554563c5b9f8706c8ff5190b91","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.36-canary.73.1343.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-go9tHQ6Yh2VueLHT0CQXPU3O/mDwtIehZ2rSyuEJcnCDgq/RXkcmXsc3Y4KBAt2LZZ1ZVjMbfe+nZeqRLU2QLA==","shasum":"1f6ab2bc7139811c68aafa6a2f6d724caf32024f","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.36-canary.73.1343.0.tgz","fileCount":11,"unpackedSize":64263,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qd8CRA9TVsSAnZWagAA7yMP/i88+5/UNqqMnCJTDwBe\nEgopA1KEq+j2s1qD0u4mdzWWzoxjyujZ8ROeq61h/pWqxlzYn+usd+Kqfk/r\nmK26xLPuFEMAt2BzNDy6q1F/Icr+G4ns7fpYI8uUqXyyh5775Yq5l3U7gsV4\n6cbu42vDmk+trEHpEFEA+mFZ97xymDFFskAWRLg1zTbKxOUgd/fNJ8ewe9SN\nV/4okcbJ3WDpZ1zFGAorsWaJE0lop36Vzx5PY4zeSunaGaijLToJ8/u9nMBC\n2jkGoaEMRI2bged1DSKOIdOBazmvReET4k2mkwbQT3ssLXchoaC/+poTNlkt\nR6mPn1NPjHWF7azb/Fw8t2yDHB6ZoKnyGG640QMPx5hTkreplGtIDQT7ZST0\nAOVa7TAV3p5FmQVI6XoGa1BjpBQSFY0jkV1zkVv4qQ29mByDWFscG+nhYWxQ\npgfcDUUY5zEA3e0MqygMr6TvfWCZDJz9562kuAo5Fx2rVPsjrIM9hXrS2Yn5\nqFWhmub5d/ymZ7MgacLtVzrAPz++EUvENx0M0ZDOKtrOWN/H1N5bIG05MyqI\nV7w0POTLCKsrb5ce+Srek77DjXpTnVK7L4dyMHlnl8rhk6BGiGze3MKJkYQm\naxpamW2Bal8EOGpr8rnCfkkM62d00hKos75JbO+j5loEpUvpDZHM/B7mPyHX\nthkk\r\n=Ln7l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWUS6LB5yX9PcIu2m3w0VJh6E8D92Tx09kCqoOmqVzJQIhAOl30ySV4oY61U5vahuIv/w9oEr3UAZXrDw/0SYrreYs"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.36-canary.73.1343.0_1591650172405_0.26949957905474764"},"_hasShrinkwrap":false},"1.2.36-canary.74.1345.0":{"name":"storybook-addon-react-docgen","version":"1.2.36-canary.74.1345.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.19.1","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"b79be651b921d7bbc084e1cc4d45430454df34f5","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.36-canary.74.1345.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-9Pb6J2ijAFFFz8YXChWjhDslgYDqzfTvgIXq+kCycezf/6pN4uOfpiFOiogO67m4om52LLJ/vrsub6rxxAiddw==","shasum":"60dcaf2891a8ac67d80af72689121b921b5abb93","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.36-canary.74.1345.0.tgz","fileCount":11,"unpackedSize":64244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qeMCRA9TVsSAnZWagAAOGEP/j7akFxFYWhHonydVOtU\nEHbh9mJo1Pgz8J5XxVBZGXddUowChrYUHQwBI1JI+dX2j2QgMKnstlAC29XP\n1I4YkJIWkyOzhgvTG2sswT3nl/hLqR7U+r9xMsOl5xDsPU4o/XwSh6DBz447\nVkqpYdnJBX1RnUnnSK4fWy7l2/qxKYtKYnRpr+vNn7JvjmWCSuc8gWFKSybm\nrrYRRQfcEd3CAYBtT9zD5y+197T4QBUe8s2EQvOI/OUsU536Z6xnN3tlmNtf\nAk9Nd08+rnzroFKUl4DWlEb22hIL2FrVtxydJEyf/8zn3zTFX0zHPimmR39T\nIAQGEqEcisClg5NB/7jR7CEguTfDqvm9VmYY8kfqPQFUGd8tN2Lskt9P4xSh\nrux3nVZT/ECnvcn19ZRH9nIBpO0+tUiURP33NnqRBNVsATI1PH7D8PQ0y8WE\nhG2yB4L0o/wgVP0zleoOqevlYw3nEf1fPnzVPuk7u5QoFqUaKIHrYGFLfKI1\nhn4XzFqO8MnaBM3hndJd7psBrhxqEPcUwIIfT/8mPcS01VhuGtfkk+Q3Gmq5\nASUDyO06v/X33/KMjAezSY+se0rF9UjIxQ2CrPtHXIMV/SyBUHmOEq3/EJdn\nrg524q2U7itiRozM9Xrx7jHlabxAfXcSm9n+1d6Qmb0kZuUgNitB3irxZdnO\npSY8\r\n=WJju\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+d/T8QU20J0UOiTMORxTEyH3sn+mn76MVYKJqMSzZoAIgQiXfl94L1rXWdePx1B4ReN3IL8uEWaLm2vK1uMZuwDw="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.36-canary.74.1345.0_1591650188042_0.1103657909597835"},"_hasShrinkwrap":false},"1.2.36-canary.66.1348.0":{"name":"storybook-addon-react-docgen","version":"1.2.36-canary.66.1348.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.1.0","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"7f00732773fce906e0c38c88349604eecfa461d7","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.36-canary.66.1348.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-O4kTNevnLaFe3JEMu9LJFJHtzK84xPXTCUKttJlw+SGAOiD4isHBwazAK1GmpGlox2by875nvLQZ5+CskvztQA==","shasum":"e46ebc0a33fab201e52343406d4bfde7e16861ad","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.36-canary.66.1348.0.tgz","fileCount":11,"unpackedSize":64244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qe2CRA9TVsSAnZWagAAzVgP/jR9z2Q17CyUSSIuaXqu\nnSWoNEiL/zebXtx7hVPiL2oVMpfyXeZnMZAfWDi3WsitB8JOvUwiBt6hBukQ\nnsQdHr5PprQSOawocubnVsO+Zy8yrKLe0ApIfos/h9syBMcyzjPpRI0YDCM5\ncHGorBwOkP2IK/UvuQ6XbXfJO+zRG4YeFfhbMQvpigBl7w0EmPuQ/bvswX04\nNSRK+9/UFL8D1Kms2Tzk8G3OcMGsHLx0YIDPcXJuVLAp005RgvsHsx0/aDCp\nnfKmWXHOfsadQ7yXcoQ8KlKZOcxvMPzbZduzZWYvNCh//VFiioh9jRRCLl+R\nfAqXVYpKTQ1DblQqQTxuP6erOb+fBnXNq2GArFdB36yLlxEYt/YkL7QlfUz8\n0PUfSgpsnsFa7IoPtKypTspn/1Y5Ge51Juyxd9MStadW6WQ0Ns0AlghrAPwq\n0XCbUbEIXUjsqDEeE/oCNldaQTYBvwQ3heaacZDQQQfBb7hQ0+m0gfTBVGx6\nTFoHDsdKdJK3AaoTAxqw3DpAwGLMyCV4xEXiaWBGBDNc3FphPDCl9C45uFZl\nMVuQO5X2s+5x0Lw59nc64NOuoR4VFAo6HDZR4166jMOJ8jM31VlwL/lv8a+O\nBs+LfPYc8Fy2wV3nRhjSK8sKJeOSlftY0wsTzxlGnnpwfjXoOSu/5cC0YL+B\nMSZB\r\n=1xkH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICwFFVTuwi9FvGh/y3E7fydOz4YuFSyroXK2qTCui5NDAiEA5RBkDmfSDTvlSqcthXW5nx2MbZzLFDPBSTXt4aU/hdI="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.36-canary.66.1348.0_1591650229731_0.062257454075999474"},"_hasShrinkwrap":false},"1.2.36-canary.88.1350.0":{"name":"storybook-addon-react-docgen","version":"1.2.36-canary.88.1350.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"10.2.9","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"0b8cf1559a121cfbc8f2255153b4d9a5d67ec59c","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.36-canary.88.1350.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-by/EcWYCb/jbCt+X9of6AllbnS7jvD2N0OLwpiAFClf90Ud8JGBUoGUwE/hVP+/2XQIUfuQeD56RfRc58y0XRA==","shasum":"016408a0401c072dd4e19fa98b3d47103b3b00b1","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.36-canary.88.1350.0.tgz","fileCount":11,"unpackedSize":64245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qfVCRA9TVsSAnZWagAAiCcQAJ0sR2CzZMbhp6ik89uq\n0gas9/FB54gUFEAnmk66gg1iMdplk34f5mxyY17O9LwNriNCwTjkk4PIUdm1\nvKb5567FIwUvr1Iy6gyiqi7yUG8MrXjpITwkEjSWuDPRFJ9VH08T28PnKp1a\nUOrvU4/XvUIh+Gk1Ym5r8meMkBjiw5goC1oVix706MBJRWQAnFSBiXbhJ2lb\n2cPKJwoVo2tnHOoDukVjc3OhrJzX54NsYKNyLepqSB6M3ASKvOgovMFG4NC7\nitGolvSGD6OOWxR3NR2oiwLGcN3kmrbHv5sWkhmPlRIOM2H2zlu+vHKyQ11q\n5J/dcy31l25wt7eMwqHeqzSgewh2TX7bSiT5L+JSx5U/tMpsdV2eVKPfz22u\n/6FRYC3plFPX7ihH5mohZvGXG6gW/eZMwxrEl11CoBlWSKxQxiDVO4pQpQVR\nzKROYT0QeTn1URPOEVBtJSPBqYkqA/dBYxJyHldcue25bYhOiUipoM/QWRVB\n+DeiayBj0QWtlyjYmFT9YN3eRjlAgD6yhsx8dvYSs8ssC7+JvDxAcQE7lJD4\n/mhniq6NCq1LT+HnqYfSjr1PML+nL5HyBtq7AIG5rgXkntNsSPqUlRrxh3zT\n651QS1f/KAgZuJ4awPxZ72NECUgvVPrh4FVoqe3P160aQRnvFZaw1zibJaST\nHG/6\r\n=nCpd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWPmdYksrk5NQ+4AQYZDP4I4xFRHUrI78x5ufUWORlUgIhAI3aVrDObwoSKj7gnAgtoooIlDDbwpw/niMCtmsYo3q4"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.36-canary.88.1350.0_1591650260641_0.21177014747670664"},"_hasShrinkwrap":false},"1.2.36-canary.93.1351.0":{"name":"storybook-addon-react-docgen","version":"1.2.36-canary.93.1351.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"2.0.5","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"2bf58f60b1107112dc840070fa9da7b5a4d25b13","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.36-canary.93.1351.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-pbpKEOrxjSSGUUg8dSF6e3wre1PJ/5XoTm/F3zdcEG/2aZZ0gYKhiHgjbLXChoum8jz2u83UljrecovJi33WiA==","shasum":"a4735aefc1d5432513fc8d27561bbd2dd23c6357","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.36-canary.93.1351.0.tgz","fileCount":11,"unpackedSize":64243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qfmCRA9TVsSAnZWagAAyfYQAJ1GCKxxS8ybJ39zmnXT\npNBBatHZFY0bF1TyTEvhHlwxEDVMpbouPRYtveRH2pVrojLDe6ASReuqKSsR\n8odSfVydWf2STYVifd8DVdTaM5cuU301EtL1TCB9vpvY670oOBVIiA2W6zow\nInSOWrzDfhSkxCOBVnU2w7NbvWBXJAKUfNrl5LAIRaD5eQSGpE8BhkHuZIrE\nnLesMwOqLZflMCryUVFdulTt6mJxpNjKAzaBOGZ+gT6OzvoN3ZuV0N9xUkOP\npF3FyPfegSH9ms7508ft1+ESr21zuJeDNdgX/sHC6rzhsrl3nEo5Gt2nOJJe\n+suvRnaH21iVX4BhHHOvu27N/cQKwomvDHVbFWrAj97CZ1EFwDMm8k0iB7b5\nfdph9x+kVI2vHsI9195OWDmayOX1PnZ7qeDL+F1GMNR0apUEObVdSDgGsY5N\n/2RDOA2o4J3Cg7s9xBEI8bKyTEupkpEI1RL2MsAzgvv+bekmn6KbgYQQ3FgV\nfQBmFBvGMYou1Tbt0wx5HtZDXjqUzeaTygWy3AComSVY6Ae87TNUaqw/NVE+\nvBXJ1aDLOgQsUvGuilEKzKWB4GKGmXANq6jYQzj1bMqPR5gcyhbQL0is7Qdm\nFrck89zR0kCL0UfpxBlFuk/0LJfx2qdrf3aGDdCz39RKk9IX7K9kVZU+wlcd\nYQRK\r\n=UFPh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAMMUEkl54vTsjOITfOVAyqmAKMcY7c4+uHQ/+JpRMJgAiAEF8iXi5YtHNgFTtDnyYtKa3qCVgsCuTdV7x2ZG5WsGg=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.36-canary.93.1351.0_1591650278109_0.9080014494633522"},"_hasShrinkwrap":false},"1.2.36-canary.83.1352.0":{"name":"storybook-addon-react-docgen","version":"1.2.36-canary.83.1352.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"4.2.5","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"08015ce4e32d895da80a5e23d590743d3c9fed04","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.36-canary.83.1352.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-DlXnUEEZNAIkKjw/Wk1qJyRbpGJkYNj59avMVEYG/34Qcxt+W7H0T89lLi3q1bgBueZAn7JQApXL/suZXat8IQ==","shasum":"a38879e4feb6f4a6ad62abbd04146ce8c0cec762","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.36-canary.83.1352.0.tgz","fileCount":11,"unpackedSize":64244,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qfwCRA9TVsSAnZWagAAiw8P/1YJld4bfhapmvLQ83Y4\nMJ5p9/cJ7aZC4IBD+LxVO7+97CwV7GcJ+vtby2aVstEliOB36b8SOjxdkMHY\nGWnuT4p3P0N79eoU1mGhi8H9TSZcxcgI6bKlLBvmfvHM5IX21IwcWChijzP1\n5z+B9YCTjlScscSNdXOz9nlX7bzxiuQPQGJQZLpRUc8fBcBvYA6697jWfy8I\nWIQpGlgRYcctljdsonBqgIIp1mESvksKq941YYHZKn13dF0D4mFhiEQt+8Sb\n9OztqRuVSrrhl4/qqeTRuRWuVxxG2Dju9OkDEoSHg0M2MqwgSP2g+X58Bz06\n+LqmvMnfhJt9DzsHWH8mJiJED7YXQ6KbkEQpyN6PRxyLbPhC/06JRZ/G/ztr\nOul/6T7hjTSQs7XBllhAcNL7sRD2n/9Vs9Jb9Z86mRbDCmml3M4lWzOaKpIX\nojl7nre3b75BXlphnw/rAiH6UAsSIaqSUS1DBJQFYtDRJt6vQ0z8QlyVzVkF\nZY2YI1fRyhKkBo3V6l5YJGISCaF6Rgjy0Xq1yxeeLiIAQ2PsyVJiTqoYB+E0\nk0zw4QC6uUGZI4XLUGUqF4Y45jNvoGQu6k9WM1LZiVXaDkQZNY4Y7JkYMOis\nQnZGcjcP+HTe5p6Kotaz336/Htdh0GrMG9opCerJTHkjqLtzWzoZ+LRQr1+9\nZ8c0\r\n=HLuM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxHYwHDOLvbXv19fs+1sRkFsZB09IXismgy1m+WvMEQAIhAM4bNPheVxDqd8AyYKjqVdyoPbYM33CTODEBF0mroMu4"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.36-canary.83.1352.0_1591650287946_0.6218664912845033"},"_hasShrinkwrap":false},"1.2.36-canary.104.1359.0":{"name":"storybook-addon-react-docgen","version":"1.2.36-canary.104.1359.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"112b9acd3322d92de46af99a26ece354aa462dc8","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.36-canary.104.1359.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-JATy3O0oGjkhQA4buKy9shqYExQ4diUVfbaLbXQvyAneh8ROUpZmYXUNzhYo6yjvFNvaG1uTFWtgg8B7UY4ggQ==","shasum":"7d18849a4c6014786a6a140e6504bf59c5ae1ace","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.36-canary.104.1359.0.tgz","fileCount":11,"unpackedSize":64810,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3yo+CRA9TVsSAnZWagAAZVIP/iUz2rkREc5KVGkdf3+S\nAhP572nFpU0TtuFkv4r8N+shBWlNO6B/zN36QEcfju2yKqZwNcsMD4QwEHS2\nK3J+feIrB/lyC0SkdLScFP6zf6+6xiEbTJaVILWftlP0bCPJL5ZP4DpHYssT\nC+G1F9cftGpeaGqkDmJtxlGOJVbxRFkS4UdC710EYcDQ+5y2rhNa9MLM1Oct\nycefY60DwoxjIl7wOW4jOcbENJ44eKfOMoSdjRMEykppt6ICRH3FCbHBgjFx\nbMCvU7eRFndl4b25Gq+HWrCvUyCJyPi3dAjdKxUcnoHQ3UG6nnr4T51nhSVn\nw1MNN1t6GCTG8KYRodKeFIlDjSrYnHVOoYcGNK3Q7Sr1k+DDtD45r2yMPdZs\n0RvMnHLhtZI1FC1vOiuZYSOeQ0oWXhL9LcxbxV03xRklUb5IdlHgla5jo2Cf\noIY3hXwklniexwdyFvYn9YSsh/wLVkfQIKzlORqUEy3qHYxZXiBWm3qvCvpU\nERkxmULO61i8bj8+8f6NhRoFouKwR7gpCHFmIzBRGbFYix4w++2u8z6RBGaV\n224SuQBuZey+TfM3BVjS1/ILohBcXko3BUHTX917HgcN+AUXzN+2GTssX/bM\n4BaOncY94+BIfWKipwtt/0dXHiGusOeLzZt7dbYQkLEvU//sdCUCCYcUGlJo\ns7VK\r\n=tUJW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLdqsK/uuK66rii24wtTAdrllyzrg9ZbzjQMdDt1fEOAIhAOFoGyJpid9cNrsNAT0HaLqjxAXzlbQHRTxFPiozI3S4"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.36-canary.104.1359.0_1591683645725_0.4734836850644044"},"_hasShrinkwrap":false},"1.2.36-canary.104.1362.0":{"name":"storybook-addon-react-docgen","version":"1.2.36-canary.104.1362.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"32878b486f6185989c59cb6a1fc20ea055700d9e","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.36-canary.104.1362.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-UV9QU89S24evbfYfqT3WVKxzc1+IpsenjgQ30mdjlHSKDajyFRTybscn6iIpkMvfxQu2Uaw4nWoQopJFMlFxmQ==","shasum":"30686854aa1af3ab1f4e54c2bf2e54b4e8d21165","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.36-canary.104.1362.0.tgz","fileCount":11,"unpackedSize":64844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3zLvCRA9TVsSAnZWagAABUMP/2Qbrli4Xpb9fGqucFTI\n7Rke4X5+qk5LnNGw95NK8pqYJs1OYE6V/1R2ffKXWvwLWyIpaRVF3K8Hk/zz\n2jSPsxe/x+pcvaLF+LzFcwX+weYoFHveC+6jy3xDulhfrWqtrP41zxSLV3et\nKD0v6WdVIP6RWJPMISyfAOVyVeYV/Bb78xNlwafoGwX4/K9IL+XUOPq7av/i\njx8Gz5jq5SsEwjoGd9+9/tNuaI9tWoqtXlbIUfWzr9D47fw765YCNNNwgTXi\nvfZ+KUCcNjjfDiKwaUCz9KZDL3nOeZUiV3k90fjIz1l/ziT5Srz9YAc25ZOM\nT4wLph3B1BYgOVqDzLBbHK4V1+hOaouuN5L5qMQQKXi9TtAOr4wjruGXmXVp\nI38muEfQ8tzqBYSxKHr/WBjNSgVrANncMH0odBYPJTjPzuKJV9BjfWPCoNyB\nmFXFuHPyCH1k4PGE12RXjaQhoWSfZM2FQz1g2TAO4C8t1pYcuUH7Wa8KTSf8\nqnzsuWf75mgF6yDux1cU8CpsownM+lO0k7yjgg1gXR9TworfHru5SlNSs4yf\nWwjx90cRo1NiTd1I2MuUcj53LPKyATma21WDouQs05+LTWUNymQRlrRCpQQn\n8XTYW5LXH05ZsZbVYhE5y47D0+mm7ZBVaDWrA0ZLtYSyequfspsChMpPYwm1\n+TLs\r\n=iHVN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEemTUztkTpo8xLGYVEOnCkBpVPDz+JkDzDZLhEbyOoYAiEA6HCICG3W2U7O/DM/+3DlISVZv4KadVzjGdh4rWceqCY="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.36-canary.104.1362.0_1591685870624_0.8779995506451839"},"_hasShrinkwrap":false},"1.2.36":{"name":"storybook-addon-react-docgen","version":"1.2.36","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"9e09e08265abd05d08f8ba64cbff24cd8ae84c7e","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.36","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-Gu7WKGEMVugfUToJzL7BBX8O3PEwOR7bDD+k7TokgUU6LCFrPV3lIO5B910qVO5iCMLAbiy+BS4/+25vNh/2lQ==","shasum":"db6aecfd965ff5e12cd9d61bba46295c23d9c045","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.36.tgz","fileCount":11,"unpackedSize":65292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe367CCRA9TVsSAnZWagAAQioP/1holevvB0jUsSqgbvg3\nx0cEKVFLlJSv58tGpitv0o9UCdrxt/4qeRyFcLgj72RiUuqzz1TRVHKDGXzT\npsAt82p0+P4Exry3jOYGce96OnwzkGEJMOcODDrKMjQ3L5baihIYySVSCGMX\neu9J+1W2lKHic0M3IrE0NTITneGjMXMTi+TEtMI9eXUK5jOjvurh3MeqQmqI\nHyymorszjbDv5wusIRghDruIWhqXIgSNn+KeX9oCBj4jD5bM4UtswmtZjnKk\noACHvQR+AyCIn1zYA0J7riP8slgLJS1JHrlOLCYcbOBrefandBrHNw75Z6SG\n5WwK9eJ9OUnY1J2g8pzeb88K5jrImGvpNdieFIJbq4cjNrg/Nyy5SXlj2cST\nM1J1COmsIFjsL6RbVYTc36uTocw9HD10RqOCGypom3ChsGDPZpKi/X1exsIt\n491HxaUI5WVf9fUgrWHm50BMgbwJV4cRlvxCUGRUUy6OJMsC8adCJceCo8rY\nR/tKoDMSSUE2bThZgvngxw29XwcfUyFSYvFcYexWH02mqt0GG9XfZ7ITTZaE\nC3/ILcPNV1SjdiR177qR8T2MBH3qsOe++ltFVpWtIGaHCldBy8TKr7ymXQX7\nTbQ3z45V+wrfb8WtmWmkZVXlGpZlE3Zmj8xaspTRU2uJFsCiC1iFsijTz4N6\nr7O0\r\n=E88R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFdKb5xo9aVQYx2TpCAn58qLRjfjTJrsmSsDN00x/SNhAiAGF0sg6QcdPyatUdew8Bx4BpWv8foKpeYJx4drRYSAHQ=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.36_1591717569928_0.978486579800292"},"_hasShrinkwrap":false},"1.2.37-canary.62.1369.0":{"name":"storybook-addon-react-docgen","version":"1.2.37-canary.62.1369.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"5.3.19","@storybook/addon-docs":"5.3.19","@storybook/addon-links":"5.3.19","@storybook/addons":"5.3.19","@storybook/components":"5.3.19","@storybook/core-events":"5.3.19","@storybook/react":"5.3.19","auto":"9.39.0","auto-config-hipstersmoothie":"3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"7.2.0","eslint-config-prettier":"6.11.0","eslint-config-xo-react":"0.23.0","eslint-plugin-react":"7.20.0","eslint-plugin-react-hooks":"4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"607e9b7acd1ed8749bb1ea79b67b96d01d1b88d5","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.37-canary.62.1369.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-/3mIlOyOEblMW5rgn1MJzIylMjY614Pe7M5jx0mvpNxDTUCAwoxHgyDF7H1sfHI5hf6E0nQYz22hm1VBhkbcBg==","shasum":"81410edf0e383592c222173888fe54dd69130220","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.37-canary.62.1369.0.tgz","fileCount":11,"unpackedSize":65292,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe369oCRA9TVsSAnZWagAAIZsP/Awu30YjwoiVTK4jXkVe\nv5QItFMfkABlDAtTbM1D9NsXzJo3M93rzyfo3wNO2Xv4MDQ2RrRyPZtCWOiI\n+uFvgMd+kFUrxBT7D6KP9mBv4BEFyjDUldyctm+YeCq9+bel+Zs74HR2LizS\nvFZKAG1zMbwanCBfIofwWpBZ0KWIMLOqWzSlDmOnFqYqU7jEFYi+i60ALooc\naniMceZn7Hyca4EG5v8ItLAg6oqQePBP1VgjOHOmoTf5rAH/wSCn1U8/rT0B\n6bAXJRuO+Q4n4fcm1fWTRhwV+6qSZ2nbCIMsvrih1Rd0g6lnHUmKSqR0q7es\nFzVHvbgeYPCzzeohrjLePXldvb74VUEn+vJ7JcMo6aQYBx5GbLss7+Xn5kv9\nhMBvH1OLpmRNZ9cg25Uj66p73747MvTJI7cIZDFWYnNSlUFc+8zj0SPGX/k9\neNkCq7vxQZAzyW5gD1QtQ8ZjTQaGy1D2uRymyM2XIeqKRkU4br2lAE5edzGq\nW06d8KdIj6hVe5+/RidafHW/IrB2xTvCYtEx83siV5+0t7dnWEVcF+rN+isq\ntx1SxGdFLBrnaJsjb9zI+UI1+NjV0KsuJUdQE3pIZaVI7fxKzFQGv8688zPT\n4fxiWcVcsqBuO9SIxa47/fY5C0Sl030kxCF6kdvXe/r9k7/xOSgQCEra9yyH\nJlaY\r\n=nT5q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFQyArZhAb+qh6AwX9Nxx40u/sxOKGB54crK+jrEzeC7AiA/hDjU/NMRLa6RfgpSVsXZOeIF+bVsxOzKpZOrgIro6A=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.37-canary.62.1369.0_1591717736362_0.4647167878801841"},"_hasShrinkwrap":false},"1.2.37-canary.105.1372.0":{"name":"storybook-addon-react-docgen","version":"1.2.37-canary.105.1372.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.2"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"3bc0f35a5acb6fbc8c1cfc29e86132ca84c18740","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.37-canary.105.1372.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-iFNn/+K4hnk8SdEVdAE0cvbcej+WiQwHyZOGCvq/7MrhoVEz0rVI8bOf/MT6UoyqjseKkOT4MPp109qxl+5x9g==","shasum":"55cee093e218635427531bacdff81250bff0bade","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.37-canary.105.1372.0.tgz","fileCount":11,"unpackedSize":65329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+JACRA9TVsSAnZWagAAWiEP+gM9mLZOU6IY+NKHiBJQ\n2z4Xmzn/RKkhx/kB2ckZaswQibGD0PPNwKzvsEsd5zXPt7rV03zGYfr8Wv0e\ntoRKlrxyudmiNP8/jw2hggOyfKD2xmdf5qc0RglPDzYqsWS0wsLVM8SNMuWM\nHW5IRS5mgBXV7lkgzDevH4Rl+Clv6LvocTAeIOeP8ULUhhN6Wbs/GM0dhcK9\ntB6+wBKkggabKl9BMcUTaCqPjcb/P+GEGvtu6SwBp1bll80Ijeq/fMn/TTNs\njVUhxqWyx1P9UMwvyuuj1nBoL+LDaU3JdvPUQEuCaCjlEveY6UnXEbVqYH0n\n+9nQe8iJd74JIhSGnirqtINn5e6BMO/rtpvElPhTI2e+Qa1wj6aPgN2fXuaq\nyeKGh4jh5t7u80jc+KnDIZZLULc3ZA1nE0LqFk/A6wmG1exozHcJeD6jVbiO\n6MjLXjH0fo5KhVdbQtxSaf1YlP8Y5qd8KBCuq47N2J77Lv8HmznHoLRMPd9x\nHFnOOrA6Zt0LTCWiIpmsUvKQ80GkhnwNL/Bwdxg9E08krm6M09y5CoQ9oX8F\nTBq9U6OiyNqDk2F/UISsVsasrSexdgrVXV02wWzW/W3RwU8iEWBNzqihxR5e\ndt8pvDslFzqprZeTDdjniPLP3kUzIXbWYTwJU30Y+tG8ZS2ikr4R4+vmQlHw\na+2V\r\n=c0CR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXDaGTmyAPjDLK2pQS/mrIMYvGo/5fjQuYLfvtUvr23gIgCGe39lq5Q2tY83DxECJqVhck3iLgC5eVbmkn/sxqDlU="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.37-canary.105.1372.0_1591730752047_0.9119349680146975"},"_hasShrinkwrap":false},"1.2.37-canary.105.1375.0":{"name":"storybook-addon-react-docgen","version":"1.2.37-canary.105.1375.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.2"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"4bd6890bcb6f160c75f2e072bdaef3e7a5d6da9f","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.37-canary.105.1375.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-ELToD5rE5Ni3QARMdSFzxOuTTYkthv8IYiFtNjfql4b/Ij39vUIn9wYHez2iwjk6fjkz5UR5/fTwCbEMmxyRLg==","shasum":"ef3856248907b75d2450db299a1bc14eb4034b93","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.37-canary.105.1375.0.tgz","fileCount":11,"unpackedSize":65339,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+mNCRA9TVsSAnZWagAAURwQAKS+3/OP99NemEq0IE+2\nqpvJPyyssup+1SkKRlTmSgD60xDVY6gyXaqx6lQgnarNX70JD0FkLjohVIRS\nSFUJPFmoZXg6DYqQLKZ5LL4fdzfwQ0X3tzmbyDBBJGnOWmNjc/YW4QEOAnBZ\nvAxjQoTD9/eeDhEc6drZaLUBCwXbOrkrmHQNbL/5PjaiDdD3lsoljo1oLx3n\n7X2sLs6mi7N298nrgIMs+9wcZtmuVisoLg9nlojnVCn2mD02GLZ1RfoTVf6c\nBMIBv9aJa2DPX2hFL7SvE9XJtUctSuLvN6wQUsgAIlkTjMtq4REeE2RrwjZs\nP2zwpJLIIB29I+ymgunolpz784K6X6RQecFPy+OamkqoFtltUrVveVIPqdga\n8b3Sl1kjFKI36stzwSnhgFetC9El6mKxWC04lT00Oa6ArFmZcoiF+mcEoMn9\n+wDsWkRyDXAoHqf6PPw5+ViPiKPqJqmtxibxqeI9Bsl7pHsgvk8HKFzNEuX4\nch7Htz5bpVchjzrKC3fOgnRVaZF8Y8Aid+McA5R+YMjwCIEOUHmSZmmjq6UF\ndMUmkMI/qujoS1PrY0m8W87PWPFi9AUWeO1T+DH7MB95nL1TvlifviDZ978F\nP2F40hQsQFNB4xVq+tngitrXoF4dLm0YZypPfKZ78o4b0QmdyDHDzm/C1fEu\nR4XK\r\n=1B6w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCXupwn+6sd1AneNN+llW0PiiA/9OhnRRS85rz/qMU/gIhAKaGDGbrMDo7YBVR9Q2/YYJD1nhDmZOgIiYRGtT5Ppll"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.37-canary.105.1375.0_1591732620704_0.29583056333617574"},"_hasShrinkwrap":false},"1.2.37-canary.105.1378.0":{"name":"storybook-addon-react-docgen","version":"1.2.37-canary.105.1378.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.2"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"8b2c075b18241f9931cfc50dd3fcb75693e8c1e0","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.37-canary.105.1378.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-b+O08tuTIfcZhUKgIGxD1nCfdT89YHNH54YQIjaj4z8HRB7zFPLvPTjGE49UqrdwqgFXVlbxdlQphHEGueFniw==","shasum":"1e2fcac1db957804245c79adea58197840700518","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.37-canary.105.1378.0.tgz","fileCount":11,"unpackedSize":65393,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+1QCRA9TVsSAnZWagAAYvUQAJtvsBTK0+ToHvAN3GC9\nY8aEjAY59gMzpxRIzwUdlT66Oou70uJ26M4X2keXZkNW0Wj8tzSM9H/wCWMr\nbUHXHtTy+ZGtx+pH7tOMFbfDvV7dGxM6AXW+EnBRbBH0iDuVz+Q1kQ9DxxrF\ni0H0Ydo0cFsnmfjyT4YAEj3Oop7YFYzZGcYwxqVRVLoSNR7drk3fGboLJ9qc\npUSa8FOxUQaAT65jecINhdHqcd6yMkP75SJQSXBAaxu0bcSS6Tcmzzmnuwsn\nRdydEwaCyPbqfC/HT0ax5tEydgfYukmtT8m/5JIfgozotLvWE+4WcKkakYxe\nThfgfRuCF+KoJ02K4olM78Fc0/npPa3ShIkXc9gBIKTgXeK8A9bs0u1Yii4x\nkukfZ85C0dSsMP3OcS1acvjorTu48V/dyDMCSyY03ENsO1TTQUTPIEluh78R\nHGfK0funThK6biHja+8S/umiOEHQ+079PoFeMYkB7lAdEiVJAeT4uNV3Bm9B\nnRyyvUcN3gk2LNgkyDOY/KMKcCiJ8101jUgSdeoWNsiZr43m1exqzqXIphIl\nbigR82ivqSLok/nmTtByH2yMtEndh0AvhMiwyH7nHfg/3pKaBYM+1P/pR6Xj\nH7ZvN/LZvguXwYAb0q7/HD4Eqf9TuhSPctxW0sE4JtrKs1AEQbGfXeeqB4Ut\nMN7o\r\n=MbLE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGbTYiVqcr197nYj7/EEdz9P71cyV2HV6mOXnqjGDH/GAiAhQd+2+4fR29xzmGdGQK1zKsWoSLHRcobUXsZUrMplTQ=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.37-canary.105.1378.0_1591733583633_0.5646766858738512"},"_hasShrinkwrap":false},"1.2.37":{"name":"storybook-addon-react-docgen","version":"1.2.37","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.2"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"19e01313207b794013f3ac281b3936de0e44d339","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.37","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-HeH56cR799ujUb9EM1wUZy655pB32zh/JJzdL+nTiLWcde+VyPR7ZQiDzKd4ebdN60p3Z/1BjzTmAVAVyA50PQ==","shasum":"487bb7908366da194e79a35a31d9d5f50f992a36","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.37.tgz","fileCount":11,"unpackedSize":65689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3/f/CRA9TVsSAnZWagAAzlsP/i7CzT2T82IHCjYuaxF5\nAfHUpPdrFWxiRXHceak0fGTTbNOXgkxQaz3zw6S95G7QvoYJSzO4Q5MMVS7i\n3lsl7doE12TFUi1uRWiVWqt6el8zp/OtAoVW2+4nDy2yXdPeLVZOD2aK1egU\nSAdOC4dbWIXZguN6EYgGygG/Ini4xcBpp4jCyv/5CkywA4lF8ba+UfoULsuk\nCGgdEBnmWsKp5Mvlh5kv69glXEkmp9cVgnuqB2n5t1aDTVyvpPPHw2VNS0lK\noBC6jmFBTN2/XFPCusFyFRniduhssNTSTC1Tjy3B//jpwM65AqYkyKYTndSi\nrA5a4WUlFyvLzxkZpS6+mpW8lu/xJ/fFPLfTBDVGGfZ1r/bKEsASr7U0X/e5\nKlfoNVeY2eappd5iRtnJZGj+9Wa4iQwTfc7TL8Vk1g+SUY2W4ilKxEu1mTmw\ndXAs49vReJRc/ZFifeP+dQyeguLx3p5ZpCPMCepHu1VmiUxQuOvP5iRKER1l\n3aeAgc1J4mzwEIpn7zVK7oyz8dNYFBJGjQJMYw0raMRkLQYo24pzk8bS8qfk\nG5ix4vh6b4+zJaXQ01tOwlO1QXmpCDgsEz95kcBeT/hRSSbu00499KeHc2CZ\n8ZMPoZxtFuhE9VmgRJn1furhkHj0H7HUa60KDDEu5B/hUrUNmwLYBegXaP2s\nSfJV\r\n=BEcf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICyQ2GwHTR0f1ln2Db5ilsl1Li2P25wCGHBXAZcu4FreAiEAniN4oCqZDmN3efL+W91UzLEfpRnw9Cb/1Y/Zs8YC+4I="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.37_1591736318684_0.35531248888305167"},"_hasShrinkwrap":false},"1.2.37-canary.62.1384.0":{"name":"storybook-addon-react-docgen","version":"1.2.37-canary.62.1384.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"5.3.19","@storybook/addon-docs":"5.3.19","@storybook/addon-links":"5.3.19","@storybook/addons":"5.3.19","@storybook/components":"5.3.19","@storybook/core-events":"5.3.19","@storybook/react":"5.3.19","auto":"9.39.0","auto-config-hipstersmoothie":"3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"7.2.0","eslint-config-prettier":"6.11.0","eslint-config-xo-react":"0.23.0","eslint-plugin-react":"7.20.0","eslint-plugin-react-hooks":"4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.2"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"e799305487556f240934aed1c030b61a09b7404a","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.37-canary.62.1384.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-zEevu/APmNKYY0goqogeQ3CLBveqnnCJy+bKshvZhOE18h6jZWTM+tZ2Gm4MjQYyK+D6sFCkcexXK6L39TjXFQ==","shasum":"89ea3d29630e844ada7acc2a3754dd9322f7900e","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.37-canary.62.1384.0.tgz","fileCount":11,"unpackedSize":65375,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3/gOCRA9TVsSAnZWagAAZR0P/AtcH+WDXthBhm25M0X+\nSpFOBdf0gwl9k05XDIs42UYr1hvNEZBCrOoMnrY6YVQHq9bQ/Z+W+YGEHNFz\nGkJAYupW7gbPrGXpHoQ6e3cWqmz/SaymQkl3F63V5PwMcrL/WncQneziYAMI\nvlKgdreWcjLOzhQpRT8F09oleovbkVj0UzrlBTlU18iztd/qml4d5yk3i0Lb\nDwowCegRAgTN8N470s/MyPaOqs+NJ7RpNIZWl/F9/kk666hJ3/47xhJmztPG\n92Or/fCPJbGf9FDEZZyO+VARwPxFIyZF/5qY9xOIG3tNskPw9pHx7sOsUE5A\nXaeVGHdVZOqdgPUeylm1mwghBUDvlZrNYZbMPBhkaEDyavr7zvPQ/c1t6uLL\n2BGMTmxX+RJJv4hXcKfhSVfLydK1ZdaJJUNjglEpadeIfs2hUCZUVhqKKOE0\n1x3rnZSrxGWPyRSVWaZhGvH4B7yWPLpM+inUCDe/CfeKXapDVTRf8z25jBrR\ng72uobJnjNP1jbK+VHKJr4PRfN6zS/PH1ylKMX2Z1ycTt7OeQwyOzKb0akDz\n/kyYOyN9czOMnGyQFYqECx/iI/Lv/hwRCLvYvhU9SSreU0BvK0IBdB20EvkD\nWv40ZuETEktrHMY3C4PFQjbPGDrYfbcYY9Begk8kUtjNMertP18/iHSteKjA\n55FA\r\n=D2Yf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCYgZpQ2QJkunVA5r3jOKP5wSkdOb5qlWmBNks4bJtpQIhALk2btM8cIAiSWCX49m6fKRZqOfBTFl+CM0Cso26CzeT"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.37-canary.62.1384.0_1591736333891_0.4244241153204915"},"_hasShrinkwrap":false},"1.2.38-canary.62.1388.0":{"name":"storybook-addon-react-docgen","version":"1.2.38-canary.62.1388.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"5.3.19","@storybook/addon-docs":"5.3.19","@storybook/addon-links":"5.3.19","@storybook/addons":"5.3.19","@storybook/components":"5.3.19","@storybook/core-events":"5.3.19","@storybook/react":"5.3.19","auto":"9.39.0","auto-config-hipstersmoothie":"3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"7.2.0","eslint-config-prettier":"6.11.0","eslint-config-xo-react":"0.23.0","eslint-plugin-react":"7.20.0","eslint-plugin-react-hooks":"4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.2"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"8252e3e0d157a4160267773ff058dfe197703fc8","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.38-canary.62.1388.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-7kKbDGpFl19VRRF+s0uXIvTgW/8DBXZ5vHxVk9Wy78DC8wYkMRIIrzHc/OOYOmjjEcvYVeIZ87K88jw82NzMKA==","shasum":"48a5e2a28d13a0e5137fe7e2d7a8d288d81c0bf3","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.38-canary.62.1388.0.tgz","fileCount":11,"unpackedSize":65689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3/iZCRA9TVsSAnZWagAAr8oP/RiZ506doMHy2+RNU5TX\nk6jJI/DaXOqvUO4v9FgKVDvz+VxAPBRrCOTHZP+T0o+zv/y8NEoHqvN28nG3\nvVlAzGWq7F3jBrihugjQhWEULC/OSHseTS+u1xx790B1dY2blorRBAxBa27E\nG88DTAvafU++2wTG6IDANb48BvHld8fnx7v3kvj0PKjtoOxVsqJ91z+7VP4z\nRGDqDJoYp5SXfMf3s2ncQdQYqYvIACy0RV3jvBQwz10VNS1eho4be3D9UVM+\ncZfaNjtfRA3KAPVg7PegC6YOw6jiTDSrqGeZgNm0uot4C+HxSzQl/XPQyVB/\nyp9WZS7rDwdL4YH/rgJs+EGx4QZDQS4GO+xzTgpS0b+gmUypXnZJAOh9uPUF\n9q9p1JdHf5m2OxSaBeVQSiqYmdwdtw0ByX2tynneOtrxf0nLHo4Wzx10aC66\nzCt37sc2gcAZicWM9Ws0DnQpKntfejh1H0u47J43/zblPvr9HKH+6Tkg6M+E\njX5CWNPMUKlDnh7btcFvc4i7MUaELyRaPo1V2tps+usn+UbDg5yKyK8G5pOK\nHzRGp/B1xjaGvXQQuvzMk26TkrftFwT102V0kgWff7hAlFXByaUV4k1kYaeP\nY8uShlUNaSNes+d3y13eU0mckEeinc/PUCuOANvn1P51e50MvLHTN2EkEPJ9\nW4Y3\r\n=x4Ap\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDNiTu2VHsj3BVVZ1LQc0ircur+L1PfP2S1EmgMbVELtAiEAw2u+2jGuHB3PiFvIzig3V2uC90/4ymowIp7QMmOheIk="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.38-canary.62.1388.0_1591736473041_0.6958427869174888"},"_hasShrinkwrap":false},"1.2.38-canary.106.1391.0":{"name":"storybook-addon-react-docgen","version":"1.2.38-canary.106.1391.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.2"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"f6081dc5c52089a7fb2a5c84d6e64488fb383101","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.38-canary.106.1391.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-cEEySI/H5Jtt14gKvJ/TjuwebObYxzxsHpjEnFe338hM4Tin0ciDqBcJsOQZMQnFHJ1Vu2rw92uWZGrZv8RDEw==","shasum":"edea8f4fd829ccec06f9410f339f98080b236ac2","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.38-canary.106.1391.0.tgz","fileCount":11,"unpackedSize":65777,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4B+sCRA9TVsSAnZWagAAVvMQAIgewKlK+40vYaQe4T/a\n+Z6c3974o14lkwIlQBkGgScsi3hNeYXE9NgD0kcG2rkfTlgSpRCGMt/jJaNx\nT6wV1h7Lu8Yeof9AQjolWs0W7DM5Dkcr4Vw0iCtowZ4Rek5a/ziAg/VrRsIC\ne8v+WLSojJURD5D+4gKBBSxO/hGy6RHt663CDR3IqKietdfhWmTTqOOKYIZz\nAa4UPtMCCe7UHGJY67aCFbwzT8MVQbSxZAZan6Jy96drJwy70eafINn2ILQ9\n347udGo04P8C7gIBM67ht+BXMopGL8ZTbtgGavD7MB381LXJWaHQF2wPz5nM\nxg7C2undQbO6hVHh2LC8xVh8h4SOb3nCmu2WreAjtt64mJcL8AG/U3Z+jAIq\nF4D+ShVU/FKHDv2HxyACGWUgFyVnUY66LW5yNj5QQxyL721HDEo2UaiBat9W\nvnVkpA1+ETANVvf3xkvpgLAXIe7a+JRyy8V9gIMY+hJGKp3/p8snQraCy1N+\nZ5MqkG4ZEx4AqA5zXKfuXqEqvAJD/bI6vgQBpAHgsWXq46g7s5DMW+B64yvM\ntYXFGi2H/EviihECMNCuJLCoBzyr3nnmE+Fi1iYNsogXtzRgDkVxgtey8fs+\nFYNhJ1y37SnOm36Hcj5XKsXRtm/L79c6NPwX/V4hlK+o9Wc/B4yQq87hm2kE\n4q1O\r\n=rI6j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICnInKOdp7fv46mQzfFkFH04ZfeVvKuqDmtM7HalT7sCAiEAqSFJ2AFUj4Po581clAfGbKv7eRy6A6z7ZbPnQA8OQUw="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.38-canary.106.1391.0_1591746476067_0.7841610431628439"},"_hasShrinkwrap":false},"1.2.38":{"name":"storybook-addon-react-docgen","version":"1.2.38","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.2"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"408e311684e1503db4d30bf2d1076ae411c29069","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.38","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-YRMKARznm32MD40vWwizstpeZ8M2KTjzudbHjQZ1MACzNoHxLBo7draWkY+tMm4JmvBGx4gp0O6o/rzhEy9iFw==","shasum":"ce0fc0d7ef9a5c76db40209209c1f831d8b3c56c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.38.tgz","fileCount":11,"unpackedSize":66062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4CM8CRA9TVsSAnZWagAAMFAQAIF+Q6qIE8HAoYithBpD\ndlr3S+bjmS2VPYf3sKTH+kLF7u5GBFlI1Zr0V2XR3e3qcUiq5XkNM3trhIDq\nmX6VjzETgNbMwd3rqRbfeXdhUKjoCWrzJTAz8A5Lxi39td9C4W5jJr5/Ud1f\nMqLNI0+BRJAgSDp0R13AwHrA4BtQebLHYFbNghz2OF4KlQOgvv50vLkfw85R\nbE7oebyssJeje3boKpKgB+4bcw5RU3jwAt+kdSGZKBwodFOOTe/kqvKI9d61\n6zshjwD1ehrKNWh3WeoEJ3gUf/fF1IsJNTIqC3QeXZtaS9+/qowqgGCiA/gW\nj4tZoKE60ARnt9uPe5OXu0nYD+ZMlcKa1PpO1XsvQ3Ce9m6cAubwdd6e7Xdc\nm9VQix8YZroVH4e7nvh2fEr11+4twZzMO1/fsAhYBF1Ul0rIuJ+lCb5uiuZB\nC22GDga+pNIbljPWKIUA12dBWPrcvwAn8cQ+FEAP/FtwIMYq2sWDc5TI81NA\nd1cJwtGyCRODhqyJiufajfIUKdvAWNR73wI/0U0V+WDtyU9kljl2trUZa9CC\nA/pG999fSW68xHy5Q38pJxGRug1kic1VntxktSpwTdyD+4s9lAkpYZA+/DMW\nn9/x47Q/nTirO7e0iSy0g/w2r/W0TwIDjFhyVSX9M2MGUUsjmX1767mqOwx1\nIV8x\r\n=f7Xh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDL4Nn0QDKvDc9JRYPPsBRUZtFCzw5ioh06ffOwnNPEsAiBm/QJvzhQXX7vqGeGxlRUAVWqVLheQf8XxXyuYwUtPXg=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.38_1591747388058_0.9250759935254025"},"_hasShrinkwrap":false},"1.2.39-canary.62.1398.0":{"name":"storybook-addon-react-docgen","version":"1.2.39-canary.62.1398.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"5.3.19","@storybook/addon-docs":"5.3.19","@storybook/addon-links":"5.3.19","@storybook/addons":"5.3.19","@storybook/components":"5.3.19","@storybook/core-events":"5.3.19","@storybook/react":"5.3.19","auto":"9.39.0","auto-config-hipstersmoothie":"3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"7.2.0","eslint-config-prettier":"6.11.0","eslint-config-xo-react":"0.23.0","eslint-plugin-react":"7.20.0","eslint-plugin-react-hooks":"4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.2"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"2faab02897cb9a1215d4fb846e2490291bc6f166","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.39-canary.62.1398.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-1y/CKo5YaHUnatIWAUkpf46XVp7s3t4PDyAiOiyCY4VBsEVivMtzUJqBBwGuSGUL8vc4rmFgranNEeDTieSH8g==","shasum":"8ad7ad7f2c2336b8f9ef131322cb66fe473a4239","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.39-canary.62.1398.0.tgz","fileCount":11,"unpackedSize":66062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4CQWCRA9TVsSAnZWagAA5MwP/j2SvKA1qnUIR68D8IvP\nGpgn18rGfC/2otBLmSBG0+YecBfTtlf5UXzKfej0hmFeFUSmRAjxDEejgrHU\nGaxkYPxCqNkFlmi6cvP7QOWrzPu3MgkTaDscwYTQaz1DFxuIIySLPwDxz3XY\n7qHVlLi6b1H/KJjZnVCDuz9laN7m96Vp5NREj3vYNtyGmYWiQ1BeDtjfRtrh\n35y9AWkODuH+j9d6x4ZTSIVmNsnaSapLDqWXfhsDnn+jNVzziL+9nRUbNeV0\nqyNdB5S6LDIEz3mIyBEBsYdFSMbaQXfL/6SDdX0Sl5A39djLEj8cTgpF/5eU\n1KsZIMvf7sXGbRp4UMXIkOwnw1F6ZiTJ0jfHyS/ey2rucI2tiRWPx8YnJLHU\nrQwcArtewQNGEi0U1EZZGgiBKmRk8QyKZPSqNNnsgw8XaGqoh+BkD451ixYj\n2OBdNGbA7MrTSWKqwFmi6Y9cg4+g3rarfDYMXkYbExO49bs1RUJW40KauK2C\nXNI7gG1v5qfqnXFE5KXiJ5KKTFkmT3V3B1F6NwIEU0mOyHKSeoJA4IKG5aWE\nwnOo74L/KIJ+pveYBoVZxkKsqnU/UYpo7K3ELMwbZAFt54Ix2M05afqdA8Iv\nQyb/Q8Mt/vNrHuOahVfj7BM6iPHbaMIYsH1kpQqq9EqI/cZW8ELSfs2WROAy\naDUW\r\n=QS85\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIETJu3bI1GcAa0LHfxTRt+usbSEG13G/U5zACEoZC+OyAiAIojMpFpcfaJGhmvCjytODHH6uZvdIIrnzhN3coXFOjA=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.39-canary.62.1398.0_1591747605770_0.20931943151675347"},"_hasShrinkwrap":false},"1.2.39-canary.88.1401.0":{"name":"storybook-addon-react-docgen","version":"1.2.39-canary.88.1401.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"10.2.10","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.2"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"67f6bb2a6a734d294f61f491dce311bf538dd5d5","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.39-canary.88.1401.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-vZL5+lvbbVN4SY/CLIR1IBllPqb0KyPUcG3H/lRGK7LC4J5+6kPaQm3ZfkhcGjWKdlcnVN3XqLevUzrguaw/rg==","shasum":"b30b77a395f22b9695fc2af892a57548d5faffb1","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.39-canary.88.1401.0.tgz","fileCount":11,"unpackedSize":66081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe40l9CRA9TVsSAnZWagAAI7MP/19rYfSDHVErobv5LMkj\new6KJkdnEgfL8UXRXAmMyOpzdz6URutN5ZsufK9iXqYWnRYweytX8Rq4/VgX\npN3dnBFR1yrqVwksLRz3o+Q3i6TuoExqub5p7uWVUmd6b/aKQyFIMLPn+9kN\nsCYzIOGcswmyGDkA/zR83l+g/mGFZjevHs7umuji0pN2uvlGLvuwxkx5tTPv\nu/jfbgigDLJO0igkhOWQInNErF0OVqOaQXraDDwUg61s23AlGVZchrcOsOis\nHVkxBJklA8vuBL20DVpCxHws37LIbchM+KLFTCZK4QFKWukVWMb9hZOkLK9K\nphG+Xuuf+fZFlBps9MYd3JZ5zcveq1NBNTSonco8SCd5rzwvEqNzMUtQtvnV\ns+qpfsFr4nJv29X9oMQRQ+7oY+zZSHjj4wwodcTGqR0RUXzHfwkOgMMzWxOo\n+0ELlwCppi88/qE6nXW0Rza5337L8Sd9Uo4Xj/BVPiMa6NBnisq+KQJyUnag\nCEyd7H16n4rfrUGAYbrzAle6ZaczrGaY9f1wUGB+9iXrKemrbgn2Y52wORUU\n3Ev7S4CLClP55jTe/9VtDvGoPgJ4QB1z4bq99pkTrqFFvHG/0+Q2OfgiiQCB\nmGNyqy1bPr2cOA56MTHcNK1RJlyrWs5UKAVWvh5s9R5XErhqYFlgnMmSZ1G3\nkHzU\r\n=RiLP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICo9WxrF37MKkJEkbZyrrIQAWrCJQFis/qZ0/H7BfQE4AiEAqUbyNF2YT4TuVMYpNB9HJTM2qisDPKJ7tb27tmyEhqk="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.39-canary.88.1401.0_1591953788523_0.6540444011094402"},"_hasShrinkwrap":false},"1.2.39-canary.88.1406.0":{"name":"storybook-addon-react-docgen","version":"1.2.39-canary.88.1406.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel src -d dist","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-eslint":"10.0.3","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"10.2.11","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"parser":"babel-eslint","rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0}},"babel":{"presets":["@babel/env","@babel/preset-react"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.1.2"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"b258a12681d4c317123fb61c843fb31cbae674bb","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.39-canary.88.1406.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-4EWJgpkW1uHYJmfErgt5M8+1WleQOZ3ayvDcp7L6DwQLz4XmY5Errac7AAgn25eqh2K9jSrRWCdArRDOapQz/A==","shasum":"866ea7923da58c99b43e9fef4c2b604a408d97a1","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.39-canary.88.1406.0.tgz","fileCount":11,"unpackedSize":66081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6fB3CRA9TVsSAnZWagAAXocP+gOP/uha7QdgXBft4d3L\nRSNu0tTYv5kxmwk8UK9qVJX0+wFShD2MxgneS7A7Ok8QQjg2Nhph+wlX226k\nZRZMNRvlNy40QfHSI0Fmdzq3268eNLRyA085vateymxR27TM646zMTmSwiqo\np+pff5E4WdCXbEtj2bFzvgBANPp0CXptFLjEci4oymC0wEm+yXt0xdljQfIP\nPxaggW/W/iZv/QvvLblQ7Veahj0RO/hBtBFXLI7tUJxAhSXLPyJUk1jwKuX2\nFuAAWcg+E9JPNq/hlWzHU7rJKuKX7Y0rOS/B9dlgpOe9D90PzAr2/GNkAn+M\nOm/qJH2jaoYkUi3brx+VjbTlxAbnbvrhBXmo8cFcVqVCaDIvMj0lTfURkXve\neXW9oFVrgt4PXcX/g3yLS+TryTzDDVr8yJRV5aQVnVRO0LXpPsU886hF2pgx\n88flSoaUFlonmQ3isy5EBx7HG04mN7gr5/rLnv9ZPNe77dQpYPMbFBp8Awt0\nldEMMoOleS/7ruycMhrgfYRtI+RyQJXTUuMJhlHcTwDiaxGBqiH3ogSoCPXz\ncLF0J1ElzDHF7STEHI+abaFwXTfl9+s6EZmu7ByPEy3YTnPdjghSGNNKwz5g\nswYCOYvtJU29L3nRcipv9H2U9gfzo5P2NvM6SILlaPbiDPIZ1H5KCvlRiObu\n9ezo\r\n=Icar\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFeUqiGWugU0JSnYdHvejF/KzQ8/rsEQTqccpypiOjTZAiALk6Ht8GFG25MAXUzf1dXfg1SaCz1/KoUrr8XS4zH6vg=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.39-canary.88.1406.0_1592389751062_0.4391378180857348"},"_hasShrinkwrap":false},"1.2.39-canary.110.1409.0":{"name":"storybook-addon-react-docgen","version":"1.2.39-canary.110.1409.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"1147eb45bcfdf349f8efcba431a173f3d5624a8d","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.39-canary.110.1409.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-mHI5isHLrSG4QmafGi92ZlLk2gN/lDH3KUdBeuf62SmiEna8EgrXIVQLXP77Fn5NgD9nlgkqeN8v0ZVo7dwdKQ==","shasum":"854ee3cb48dccc2039ff931af6c34e3deb11a6b6","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.39-canary.110.1409.0.tgz","fileCount":13,"unpackedSize":58326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6nuYCRA9TVsSAnZWagAAzCsQAIGUuLZs6y62l55pAmD0\nLQlqBB+2sEBlchhLM+vtNYh/hxE3uK1B+PQcPFa/j0GAoQ1Egdn++1VUXBOr\nTTgxpWhX9MzbHa6NbgHhmsjwv0MR17qCEIqz0U+gsakSrdGk0uAFEE0xsCu0\nnZdYRQkFqHOv2l/hR7xcXLcKXLLg844UbqbzJlrPYbHiTGaa3HsgBrh3EcoB\n/drYYGMKUwC0epCP9ic0Rc8dkslT9+COJtn6kmroqRbB2Gp0CpLi2ylzVLvO\noFHQeIrJxsZKZ1OVo5jrcNcmctv+Q46G7McQnetwpTiq7EE5nlQSMHANiFXU\nX+1Or1YZMUKaehPWSYgg/bDlqcd8c3Kqk+3nHl9XSsDr4plrzImw38TmgKEq\nmNdOaoAMLKOm5BAKJiEXvGgU9ExT1UxDO03qULp9fOkuMcK8cbApIhffFut4\nEgH5JwJAHL6mRrlc5HHNRsJ+k5fuIKtHYhGw7CXDXoGOaCKBU85zOZcjx0nh\nufIecTG2LXss4stFnmuXotC3HhTXp1MWAPEscMf0g+u5NkZD2ynGYas/84cl\nVmOuHFmLXzxad5EJor6oemVPkLzwihlSh+9XpvwSWQhlC9CuhRVpHEgszYZE\nE6xL4x/9GoTC8/xcHiOhBViGuLAyXNOp97FoFG3jKZq85+sPT8adLF/hfwuQ\npHcl\r\n=mNNz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZXPXGbFKqWSLRm2uI6sM2miIEyG/Rr+IvOnhcj4VLxQIgc/fWAorf+rKPtuVW9sG/yxA1wbMYx1YdEGrZiQ7EE98="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.39-canary.110.1409.0_1592425367659_0.7857758030077735"},"_hasShrinkwrap":false},"1.2.39-canary.110.1414.0":{"name":"storybook-addon-react-docgen","version":"1.2.39-canary.110.1414.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"caf325aae1a31efaae323c4a528c8e0868376744","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.39-canary.110.1414.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-Hn2GD4mbphRmupA8pCfJTBhRohs1HCIMVStBtZ6LO4iP8DO4V0BUKX8Jb5+dZKLJOJ2N6p7Oz+TMHOPFpzZABQ==","shasum":"ea7fa2649ff0efb8473f7b72803402f042614124","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.39-canary.110.1414.0.tgz","fileCount":13,"unpackedSize":60728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6obuCRA9TVsSAnZWagAARkYP/Rby8CybQ6w1h29XLkAI\nUAvZvT/B1O+R+4s1Lb597LJDWmrdPtxeLijXtjs+ickcl0XKjDicLaFf8oJp\n40/Hi2amzUC7CcjmopaT74QUXPbjJ5/O5vaWPyUbaYBlWxIPsP9+EpwSwD6W\ncGxZ+JOb0Fqx/E/NQbx23DsYSiOSiSB2knuFP2OlQ5cAg3Kv2PP3yM57ciaN\nPN/+t6GeRs4LPOVuRoNjVdYSTe16zLa08MVN8ZZJtPrRmL4J/+md2cLBr2kk\nJ+TjIcFHttxXTAm3mlzqC50Pa+iVgIno+tWpNG0SJh4+BcByq7XCjIctQTOF\nmJK3Thfh+LHr4qvNTF8RKScBKjp2Szw/RbOcIxx95N8ql6W6wzo3/kx47XAn\n4I0wHDotX3c5YR4eeU8mp6KXa9R1HbP7qkDCyccJUK9IkJBm1YFwiCsMCRii\nZDd9etnAsBmCihfcPWs5zOOFZudFhjjPuYK2TGdvK517FFCHTdnF6HyXdgXn\ndgL0/MtA8LiN3xSFJcYAo9Ik9mj05p4BqceVlVoq/XnN1FNi/mV9+CZLxsmc\ndXqOKgsuOsaqTUQFDiuN0txPVzdV+JlrioveDKiiSsKsZeuXZ7IE9sUyL+Y9\n4MhJqldyudl4/ak6NzluqrhC5mugb/K9NqIfOQ4ojWIfFjgxmAMG21sSlfs/\n6uAb\r\n=JMxH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCR8nzLLKEe1zQ1fxRrPG7+KrOhENtrjRDMTv5tubbbYQIgdCbhb1cfyXXYV/zAUPSmU7wqsfq2hTuy4oVYfcenAf4="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.39-canary.110.1414.0_1592428269882_0.4239007262884411"},"_hasShrinkwrap":false},"1.2.39-canary.110.1417.0":{"name":"storybook-addon-react-docgen","version":"1.2.39-canary.110.1417.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"8bf5ca3b428df014f9c93ec9adacac26513fbe48","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.39-canary.110.1417.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-xMDtKBCNrmP4mTq9ycoLH0vnPttnRyCjIPdsE8v11fY80pwJVOxWvTRc74YyG5yV+tH0Rd3+poHWeq495Ni0rg==","shasum":"4d1458110f5e91aad7e280923052461996249317","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.39-canary.110.1417.0.tgz","fileCount":13,"unpackedSize":60768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6ojXCRA9TVsSAnZWagAABIEP/0ZXjnEIwS/i0DuFJWiE\neXdNLDcuZHjCHK7Eo/KuCLnT3eWtsq6JuPHTkbHDTOFuaMEHzGDoWdQAWWQU\nzvIcB1bb/zddScCBqrU2foUnPKjp2ZSuYu4H+Vu9YxYmADj2RjMbwpbkhqmi\nwUQ+RQQk/fnVh3PdJqrxkkPCPqcsToUbVXhlQfIe7fpLxxgBEAGV7c2x9NkI\nqaN6ajykfCCGWNwQIuR3fSN3s9cb+KtLrGQOwjVO3n7kC1FCpP6HLJe/Wb3Z\nvhWNU+usNIc3LKbdPWGWgQwoiSxVfsAxJAy5DpuyT1YWZXsqvGZGqzfzYUZ+\nl/gRG9vGYo+HHBesZfB3UiekEavq8Zi9Q6vNCou92kYF82vNkTDi55uNlyMA\nQ86x7zfwqGhsm4kfJdUflCRlAFMJez1/0iWj3+LpSDKhBCNIu8LENev5WRVy\nj7ozzPRBhON2PUg2xxIshGHuNJfo5k+3tFsVG2r0bvH16WVM5rtpyhyW1Hwv\n8T2bPI/oqysD0KseiWl0FOjFgpOaHdv61i2X/W3WfDFR4HQuZHj8iZ4OojMw\nLrHPPU6ijffbfj3gS4AawBRVKAk1Mt60d7s9miMOi4yx3FZQ0MPZ4dko4WTN\n8lvPiwj6xuSsoKHxIBdIJcMVffXByYnH8l+8zbQwqCEiZgzT8UI1JS/vqZ9e\nAV4c\r\n=l55T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIANyFppkzrfuZf+aLZg8DULtT0Y7xOUJ2ihAzvVK7FniAiAQmiZGt8hLDD7RC9VElEGqJek7Bu8HXGQZmNnk1tirKw=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.39-canary.110.1417.0_1592428758429_0.0945998550888103"},"_hasShrinkwrap":false},"1.2.39-canary.110.1420.0":{"name":"storybook-addon-react-docgen","version":"1.2.39-canary.110.1420.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"9d901030915a949676282f87213f66de6ce438be","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.39-canary.110.1420.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-LA5+1CGsE3neqO/gLDNfIWET0x5/Xr/ehs3j8bRe+R86MGuW/UkQH9ah6kx/X/BliikI8P/3kTOUy8+f0Z9gaQ==","shasum":"59d66d91de3be31337d468481ef01bd07226cbd5","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.39-canary.110.1420.0.tgz","fileCount":21,"unpackedSize":66911,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6omBCRA9TVsSAnZWagAAtXUP/2u8+xzUnhcLwCXbNDHB\n8riMEXbD3d2Fd5V6NBjUhe88BE4VM8jU/k/R2KLipOMLmeWaKj9AHMESwpoE\nG/pC4XL6qMK/El37EuXujVRpixekXKEUcaAkDMIpL+ORELqIjL8C6RCaWGDy\nb8uQPqEjhe43NYwHOCVehLOk0W8ANaLTGdio7Nbo1l/MYml7E8edECWFdTIW\nKnjvFcgFF/vDPptbQFbITCow6efBeWxp5r7KKZjCERj1w9BfffSr0r7JklPZ\nVbKvZ5wIqIu2LByko+wbI3YVteZa/MP+v6h8HNhOPAnBJkluU6onhSCGGlaE\nUgc5JfPjM5JodEOi3/sGaCj98iJHtrcfvzDyQxyIQVG0D+HfxmTloRUKRVZ/\nkrpaLaMB2l2ht05LOfcbybzdtGRYBOydHA0AbOtkHd+0mbKIHDbg8DybFkXS\n1lTpN/gp0M4faa7tCYnWq1N4mi5HUB2d+K48OeHeofA3gsmIvMVT1FeebcOs\nVt/hSIMWNoNtAKs6F9MVa8HZaJS7rG40Ux099s73fSuz08baDGgCkqrCWYtG\nGrIdl7T6e6XtPAhDjLQyY1+jGmbBHMBMdVDYrDt0L3njWpVQ/cF3WpzCZfyK\nB72rQMzS6hiDJpE1WLqjarTgX9sTIg/5p6qu2wqzSkURbeEzVwqhgc0bf90y\n1p6w\r\n=j8/Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDh6+x2kouyVLoTqjUznaRky+bzJFbGiKsZ427lyYu2AgIgT/yP6Mdh5KLWQwgdPyTcLaus2V1Q8zO0GODF8lPUgAg="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.39-canary.110.1420.0_1592428929113_0.7822157704350441"},"_hasShrinkwrap":false},"1.2.39-canary.62.1425.0":{"name":"storybook-addon-react-docgen","version":"1.2.39-canary.62.1425.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"7.10.1","@storybook/addon-actions":"5.3.19","@storybook/addon-docs":"5.3.19","@storybook/addon-links":"5.3.19","@storybook/addons":"5.3.19","@storybook/components":"5.3.19","@storybook/core-events":"5.3.19","@storybook/react":"5.3.19","@types/react-dom":"16.9.8","auto":"9.39.0","auto-config-hipstersmoothie":"3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"7.2.0","eslint-config-prettier":"6.11.0","eslint-config-xo-react":"0.23.0","eslint-plugin-react":"7.20.0","eslint-plugin-react-hooks":"4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"37697e849547e02fcf161839ff15e44da71fd0aa","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.39-canary.62.1425.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-oT62drHEugBai+/+elSZa7T6YKaYVBfCpHtPBqOyak6RwiR/w8i9VRasCnPC4UmJjTDG21bcc8ROG0X6yLj3Fw==","shasum":"eb48b1b48bd2bdcbcbda755d58e13835d7d83962","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.39-canary.62.1425.0.tgz","fileCount":21,"unpackedSize":66890,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6qe8CRA9TVsSAnZWagAASVUP/3oOA8tSfw3z050c6eh4\nbFiyKRKtr83OFMNWa16wg5PyiyUF+6ZxQ0juhizS20eZ7NpAddgJX5Gh7Txk\nZMuuuqCPkw/+FKzLLrSH9/Q1sjGjWW3mRBXtBx8biIthn/xsoNntWSOgMrL2\nCwGiNIB5nDAD03Rgned71Fpyx0uljCWTNB0rYwSx70SGjtwzT1e0u/ebKFnY\nm9e2SrLfNlWNGdLMyNTKiWyS68r3yjDksN2Wi2x9di14GRQbwPK53rJlQx6u\nXuRCVXI1fl3azDVeJWILD0yMofbestTLZRAWsjOQnUqeC8KHg4Oq/9wyxrXQ\n9CTr6uAH9HQKhMMtkdiRmgDru/yd6cO7bQ5kdVNIO3E4oShjIs4UIqcKeJIf\nzDTBcSQxqSL/YXgI+25/Ws9R5Bz/OqZnu0TBKhVq94u+LHM3r8X8JMwtqi/c\nfBTS0nv7omdc5q2Ru79YSKZEq6AuUZctWGBpyk3BqzB/mfRU3+4Xh8KDCAg/\nv10ZpJd88+IDPs0GKwhKZFqZHoOyIkXXWhG8ZWCcqxIpd2Su/7sfPTi/9dtX\nZL1LT7LYlmReq+901ernIRTkvIUcuDkUWiZl1enayLdXtYFgPrViOcO8pLqh\ntV8UYbWR5+vyuWUDrogdM6aDuqRuHb+KeV/q9P6fRByTqkxk9z/iIpFN0s0S\nfP0Y\r\n=CY58\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOJ65kmIWFWeaGjgRoUx2JmO4ttfnK1jccYBCUTVhvJAIhAK7VkIKjeqxwx/gJCNf9tpG52CM6nR8MTNKyxO3lXqCh"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.39-canary.62.1425.0_1592436668131_0.0698662238569745"},"_hasShrinkwrap":false},"1.2.39":{"name":"storybook-addon-react-docgen","version":"1.2.39","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"a1953885bbacafa65bdd1d80ffb4b992d7fcdf62","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.39","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-h8C/TtgzZeKpZPf4pT41LyaWhBaSuT4fZeMjY5CsGi0hljfXpEhGS9Ry8l4XY81nCUTS4bmfOBvR2kmWLaqArg==","shasum":"4e1293a7788513121b7c74d20e8c4ae9ab99c9d9","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.39.tgz","fileCount":21,"unpackedSize":67199,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6qfYCRA9TVsSAnZWagAA2TsP/3FWJYmQ431adNESN7ns\nx0m2fi0VcznLWj2eTUdZ3S6ZbijOCv/L5M3AOXJ6do/a3woxChnscdRn/9P0\nb5mBFrOEQf0yFnFMKtUTJ7aK4NJslsd739uZJ7SODC/4CA7xLxkWtzNnSt8w\nbOVWM35SKa8jUCuGsGxmTu8u3577VAQt0VDZjsxR//0iGaL7L/1qp4SCzBkp\nr560/OE5tv2OKTY1T5qwMcE4sAv67NUllnpfVdPPNfyonUc0yQRR1WuZbxRZ\nZn3L9WphwJSF8uhzrS5nWo/ojYKY0USmPzniKIVvgl9MRNxG5sxJ/YvkIgGX\n2E3uIFbUAq75IXx6YDZmZWv8wHdx6Czy1a9NHq/jIC/94J2sOYP02zIPzZ4l\nPr9GACv1x8C7Vs1fW4ERM87fx+pVUs3caq4Ei+AUNJs6VGXVv/v07/M/wjs0\n7WN02UzdhSUJ88XnRy/s+Sy2Bw03hWeIrq9CyVyWX6MFMx1ILrL32gBMNyAM\nbCQR/xLSAMBaGXkFOBPB0QYW8tbfFDGa/YBWyb3Pk3F9bGrla10/7oqy+gig\n3D75PmhNfLgTrzk3/RwUy06ECJnaVsOWoB0UKPmR3eCcl6U0w2Xe5RmwPNHg\nZXwMEK87R7/er6xQpkE8Vny8ThGQaZ69PPGXsYer2Ux/nD3y0+3cSfd0mEad\nUrqr\r\n=zi3m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHP7J6b9T2Wy3gbPR/ehLUyTNd1jOxX1GG9RZgGpkJTHAiAgSwZgZiyFux3t9WfOAW2HGsfT+x1JTjeUK4eayxgGHg=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.39_1592436695318_0.6656574491247222"},"_hasShrinkwrap":false},"1.2.40-canary.62.1430.0":{"name":"storybook-addon-react-docgen","version":"1.2.40-canary.62.1430.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"7.10.1","@storybook/addon-actions":"5.3.19","@storybook/addon-docs":"5.3.19","@storybook/addon-links":"5.3.19","@storybook/addons":"5.3.19","@storybook/components":"5.3.19","@storybook/core-events":"5.3.19","@storybook/react":"5.3.19","@types/react-dom":"16.9.8","auto":"9.39.0","auto-config-hipstersmoothie":"3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"7.2.0","eslint-config-prettier":"6.11.0","eslint-config-xo-react":"0.23.0","eslint-plugin-react":"7.20.0","eslint-plugin-react-hooks":"4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"e61b46464079bdc55108904487e73f0dad047aff","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.40-canary.62.1430.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-TJJBXmw7kvPeCXXIsOV40758ix1GMq+TEps+iFAzAZ9H4va6zitVow6ljxFdKTZ6/r14R6TKb8IHqWwdrD31kg==","shasum":"51469371099b8359ec2ff651b704a03e1be3fb9e","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.40-canary.62.1430.0.tgz","fileCount":21,"unpackedSize":67196,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6qjOCRA9TVsSAnZWagAAkvAP/1Ahy6PKVAy1U9r6l54z\nrlsy9XEUqE4xkHplV2FwGtOd6LJdbBu38FW8d+52oyA5KplkXE67R+lU3JjT\nOBS0waTLSOTeAyGEEopQ/sjAuJ/ZnDzsrNdPLQ6lEwm52D/fGdY68cp6QIm2\nzsuY8gSSiMkKOytuaJHF9fx4nwbDPzlxuYwECrioiileeCZeDgbo1+NvY6bo\nTndPqE2dVp4J7qwA4svMOdz83A8PcFg5iLlW89TwQ2Xo8FvW4oEjyfBmgtra\nNuhl/Ch19KsTfJK8u3Hp8KA/m3r4+NTOfbBlVtljEi/6mXvwqQZfhRz4B/Cl\nbOlGVvh/vGdGRnXpNXObeXqd7TXdXutKcuXytgHVjexe6c2IbgiJl3YT9R9s\nUHtMSpx49i82vpQb+qsp83KbqK/S5aqw7E57WI21MkKaETAsYKxZFPJt3znh\n5d5JGzPNAAvRUXEaiPt8OlednX0f9sE8f+u5dNth+rNX8eLKo4BVfuDU6dxY\nTS8o/U7ZLc8Jfpqn7g2m0hehYiGh+BUoSAnxMXtumnxjBrJkPtkjlYy1fbbT\n1OZjliJZ/z5gFMPlv8aA3plHtBqdVi+U3MIjLmqIwN1AeRs4KsG1zO6/Jk9A\nYmRE82bfFWtGD8O/6Bt3z5ya7FjbmaaOS9G7YhJj0ZRBYiUAwtdWMbBAiu9c\nTPOi\r\n=H2OQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBUIv2hu7RSH/9cQQzjcKkOR62OEsgOcRk4P7Hg+D3oeAiAriibABPdWykS5zNBHKmc0ln7ECz9dODPMsG3CFgP4lw=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.40-canary.62.1430.0_1592436942238_0.611461322821361"},"_hasShrinkwrap":false},"1.2.40-canary.74.1435.0":{"name":"storybook-addon-react-docgen","version":"1.2.40-canary.74.1435.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.19.1","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"991a1bcc65771d0b87391dd8f5d744a1e736abf8","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.40-canary.74.1435.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-V2znXI5u1/s9sLzrm0EVD0KRUjWprPWGzLWKGTBlfp4q8iGCaWjVmavVrqX2ZM06jGMwBiGZnMtcR8UOX/D82Q==","shasum":"e4b03617a9f59ac9af2fecbcde7c24d83b9ca4f3","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.40-canary.74.1435.0.tgz","fileCount":21,"unpackedSize":67216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6skCCRA9TVsSAnZWagAAfpcP/1bQDJT4JbJeTTbwWag4\n1tysIiR93B0AypGFQNSuIEeLBAhDRmXfnEoMkE+/7uPHiI8HRF0a+S49LCA/\nWTJdCpL4gq4lnmcS1IbyH2/NQ5FbU2gBlaDz9TgZQvT03IIab85LHiIsFVRa\n2EN6lzsxy3rurZoCydpowl76f6z8l1tItZEqkTUqKnpyBRoEAIS8NV/UxB3V\nXuv3k5fsvubfDXPD44NFXdlYhHyH8R7yx0UcT+6ihkZzD/qid2dOLesG2UTU\nCQMotWy9kqKkjZUdt03SSQIOkrG+Ayj2BEdA9Bx5jfZHDzHYFrh9f2qCCzOq\nmvqiqkAhN1TaGQfY2e60Mah90dQYj/E8kUMrOqqO0kWQ66v2Js6v75Wop2L1\nHXCIhsfNi4gYYud24u5SpvGjS+BeyYVaGrDhuRn0Gl8CT9QzbAVataUiCX/g\nOrR/tUEO1R2DkgTZfO55PiJH8vMTl7ur3+ooF+qG4Mue4tXlswr2Wey58laR\niB+nI2XJDmVQok3OYGl5EJ9nawygvd6pqfVCCheErn0ba6eYEXFT0rPV4uh5\n8ft3PIkhBM/TVC0FR94r0HCnbR2BpUaX7MEM0hTJgZxBAqCSKcsOjQLqPY3r\nr4yj2B92r669b1o+v9UAAt00kJ81GtEUaZRU/xotJxu3nq8i1XKeDw4G3+Ci\nXcVF\r\n=30gR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHxtRzA3KghXw2+12GQSRsvYa+o1wZo0HePK62UCRT6rAiBf2nafW3uDnJFKfgGL17s35Yw8V4RYx1EJyqkudt2jPQ=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.40-canary.74.1435.0_1592445185521_0.9705473243027904"},"_hasShrinkwrap":false},"1.2.40-canary.73.1436.0":{"name":"storybook-addon-react-docgen","version":"1.2.40-canary.73.1436.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.10.1","@babel/core":"7.10.2","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.10.2","@babel/preset-react":"7.10.1","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"4bb1964031a54f7a60903fb2d95245157b048835","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.40-canary.73.1436.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-zTnbImQ209zrhAkIVPnlllYYnU7CmGhasaHgKdfFsHOPYDQgY3d9z09T6ecUkJGfmKo2t4SZP8zW0M/u3XATtg==","shasum":"c3e999e98f96644af812363bffd843e831f7e0e8","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.40-canary.73.1436.0.tgz","fileCount":21,"unpackedSize":67235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6smjCRA9TVsSAnZWagAAfi0P/iQom8P4ICqcWCLnTHhp\nWJAv7wvh8dKe3xWIsPU2KLewByw+Yub2HTpZsMBzFQAw1tnJdJobbhjpjOKy\nmi8IHBUS+nskiVvX3ZfEWOBwFAVb4cL4/jdcqKMiJVpzDyCBh91t47AJ7SWu\nWEzKBxi706jRBFYqr0pYmyQnoizWId76UMEZtY3mtghZuzZZbeAzURf2usIM\nIIzDc6L7fn+oWMs43Hx80ZXj7zemwdNDMmBy2awhgNdlzXRb84ibDZw7m205\nkIddxupXi0vPCp0azV5jTVmyq1PYthFwf6sd/i19W/iQg8xGw0IAHOR0S2Zu\nmLuMvZFDJ10q+gh6umQ3eNj3FmtpQW9Lrvg4aoO+Z0LQjyTPb0iAmug8oqdQ\nliBEfCDQjKjz4sY1TNzJJ/Wnyp2B3d849wNqloBnhUwkTCjlHcdXzu+KN5yE\n79ZemUo2NWqKh68+nYt6zMZda8o+ZO069UQrdohqKEPc/6G7xr/yD1z+lZYS\nfFy+XNkIoX803ODPkHJ5G7Mus0PIAegSzRs4fk2uW753OCCqNMbiTQMKXf3m\n9JHfBjmtUS8B4SFWHCy6yX3iM+idMlMgvlmP/OwInhHXwIphmS1uzcZypYeo\na+hLlyDze9B5hJzCJ+5bG3vR/5SZo5harUlvqF1CRo8y9htdMKoqiqr8017F\nWqQK\r\n=z83N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBGQJ9OMXkmOPWeESJAjEBIYu5APggNYRLkiw9/6GcjDAiEAnyIcTZ4lP7Ft5Z1j2TCIskZhGUwOhRro3ocoBt3IS/s="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.40-canary.73.1436.0_1592445347025_0.989863871381897"},"_hasShrinkwrap":false},"1.2.40-canary.73.1439.0":{"name":"storybook-addon-react-docgen","version":"1.2.40-canary.73.1439.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.10.3","@babel/core":"7.10.3","@babel/plugin-proposal-class-properties":"7.10.1","@babel/plugin-proposal-optional-chaining":"7.10.3","@babel/preset-env":"7.10.3","@babel/preset-react":"7.10.1","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"90f36807278c4c0388b9a18b4270e6962fe4982c","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.40-canary.73.1439.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-8s6iaNVrGFJIHrtJAx9q4UGEUn0Nw37ccW/hDWaz8TFMBvoV/F3JsEaVqmcKssupeWVrk+xgzJDZpann3UNlyQ==","shasum":"f88a1a95c8377605f14339c79685a452e6d1cfe7","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.40-canary.73.1439.0.tgz","fileCount":21,"unpackedSize":67234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S5wCRA9TVsSAnZWagAALcMP/0KC4qHAmU9SUPOX8lWP\nTTtjfC9zLxNl7O+CYtACjTRPBHmPRSbaWSo3mnb1fQH8pXnzDzMlREowWjHp\nnNyyNQgyrkizpOIu0O0NyjrCjPwlXEl22st3A/HnJBPwkygDejrKUuuRO90q\nJ3P947nt1/dUcib7RmDBXfwCa4KJ+oRlm0Q9IWYzwG23xthmCoX4UCve8q7O\nlOkj/ufuB1KZXATsrfnTY12hPtJWYUbo1VFXLUOiXoCo9e++FzWt5TM6RYtv\nhFDYjEXBmQkGRQJ/ZBYAthVu+dDo0UjGm/qqC0eK4mUHuAkOA6JZKzRNjJJ+\nWSWI4Qr/CLb8Nu1ISBZeIbvofWyPjgjJoZOmkmrpt5/n4lkbkN03LMtFf2kg\nnp9CURJbTUfSdOuYLWrPXhDN33VX7NshN+OYqLMqIFXxbP0N9nfyFVG+DdnO\nSl9scEyMh1q4QfEGiPL7QWRwR00GZb04EiOjm9UxoAXCAXZwEoBb+RFzRg3H\nZcVors7FhfP8LEH0+GaQtcaFoxf7IL0VjnzOvQpS0IBLp7qJbHmk8Hf/0QPY\nqdoaMNbVme3mkkInAQ7OMNeCfGNcyxuG1sjwVi7wBB4lKB8GG5gA8rNN0Iuf\na5LhBaoqrjpMcX6zDxNTBil4l188rWVQfFszhPFv4J68v+yB+qkLMSfkbr1f\n0SUh\r\n=awJF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHSt2DWhITtv7VosYzN0s3omoyg7y1zneBPvhUrGSkbQIhAMBBd24ydVTO2Lx5yuaS1O5QUVhsLqT7lwBezOD0nakS"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.40-canary.73.1439.0_1592602223742_0.08856337216214372"},"_hasShrinkwrap":false},"1.2.40-canary.111.1444.0":{"name":"storybook-addon-react-docgen","version":"1.2.40-canary.111.1444.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"a012006c5c599ae82b5ffc4820e8f49dd8c8b016","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.40-canary.111.1444.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-XCD/77Y0JRJ03o6C0LBBYi56Q3dLbKPhcR1n0rWH9jFg4X/DCqs73MkN0htEKRYBg1dviYFqAYSTtOYINeLqKw==","shasum":"868d7982ac922b6aa3ad47335201f1306e79dade","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.40-canary.111.1444.0.tgz","fileCount":21,"unpackedSize":67516,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8kiJCRA9TVsSAnZWagAAkkgP/jT0+3JfopgA7MsVZ/B4\nVe7BwM8q//h+i/kAkLPFYw9AHGtCt+D2amqEJG4xF+0AdU3w7GLt1pBH2dGZ\n3o4UGi7YTA9qwGDM2tH9dOpHJ51R51b2eGyrdUbp1mU/Bq0OjzHfauUq+EyQ\n2AkK+ZvV7XhU2pkmfSaJiLlVDT+AuTmIA5okH+E1G0CMDoRoHHcKGJ73ZEPQ\nQqg4PJkPBg5UAzukRC+muwYvFnTDuRcZFlrta+1JRZ46N16qW0jeJTrqQhbK\nSRq+gDcG/NkG41ypkOIE7ZHoNhsR2QYGeTtnpDJgtPttRHrRJ2ZQc1t6IoJU\nyCD1qA5R+8fGtejq+53wTTyeF/rCzN0A9IWMHM5QBrsIai/c5Z4OEgklZHl1\njjUOO1ulg+Sf7yOwJgRypR4Z0MS/y5tcIRmTF49RFvnZy8JXhZNB06hBmZoZ\nK1d+TV7PcFUqVrjDcHfDmE6GEcBzjgrRUPZnt2f9d2KZbtTGdrWCUUSeFgKs\nqYHebZwA3fYkNY/x2mXJ545R6pDWSNoEoonkSPfnJwEdJSa2NluMBnLD7N9k\nG/lZWvz/DwvEUOvuZ4MsGZjEkFqIpR46b4EQMvgZdbmGViRYOb8s2BzAcLY2\nrMlnQaFxnue0627/ycwIEGwYBkRdci/HX2khkkty/gfeDRZxM5SkOsyun9eQ\ni3FP\r\n=5+iI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEhdK4kZtFjHv2nFDyVR/z/Ev0jx1H7UuqzoFT5O87EgAiEAqNpTRGJoPt+EGbvl12sx13r2K/sC0EiKgiRyM0joLrE="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.40-canary.111.1444.0_1592936584448_0.2509427020333712"},"_hasShrinkwrap":false},"1.2.40":{"name":"storybook-addon-react-docgen","version":"1.2.40","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"d3d5122abb23d99c7941badc3c07cc86770de37f","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.40","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-0GsyE11BzocXiaH8P44/8X6Qt7QAeROTZo9QaBMGq3CEAQBL2uBqIjzToM9ORugepfPhYmSNAXgUwBkaB/r2RQ==","shasum":"277f4b26c6422bd886da1dec7829c8ce79ed002f","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.40.tgz","fileCount":21,"unpackedSize":67831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8kk0CRA9TVsSAnZWagAAmqcP/1l7lsAts2beTfHaVl7T\nTt5kJ5UlEkQa7r4mcdaa4IK+pHcqbbNxFqcgiG3ZwN0cl5ql6nRl/uQuTB62\nxkQZHaTew8hPAkOqWMVyR0+gnsSrnszvgB5Xb8taAG/ndyiG/CXMnAKCQXBO\ndubsykRV04BTtbamoEw0DQeghiEBZAeIjgrCmQChatwEYmByCzK9hbSM8K3N\n/HEaGWMJjYRuEYoWkDpL5qiDPhD4IgqgFumito1r5UM5CHJCrH8CnAsLn3tL\n0jEGqZz6GonLnyUl5MYlfbBmilmNZM1tk8eo9Uj49GYfT2Rsx5va11tQz+FT\nCH1BE6HFaEMcfad6inrwWFWmWlbi1txh+sb83+LIcV1KOR6Zzs2oUQGGRLN4\nKIOXO97DFLURltGzxS8tXsuMpOxha2hL2PsyLZz1FlpdZWQxoR8xD9r23Jcq\n/1uHsFz0rpi6n7OCbU2qjQUa576XJ7I8LKhEXbvjIxHNx6hNaRt9o/iauKPx\nXceoej3WqicXk9As4pam8BI2Yk6xYripq61Ld0l3z/Itl0jEQa56ZH1q2kKf\n8MmmuQ/6Di07skxomuDy9t2wwFHQXi2T9FY49vfuZf2mVN0wUiFfntOK5oGd\ncGxY/BN0zp85znVVSkS4HpG5S52F9/pBdO6eTMo4aeVaHc6T6zUpB3D41NUS\nk1ii\r\n=jwn7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/luioMaw7fScd/hQnB3cuinPGaLxnCsUHdEKASF3iwgIhAOVo9q6qpUBA6fILXRU6xB0VNGpCF3LRg5QtK0DTR0/c"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.40_1592936756473_0.6068011473535768"},"_hasShrinkwrap":false},"1.2.41-canary.62.1451.0":{"name":"storybook-addon-react-docgen","version":"1.2.41-canary.62.1451.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"7.10.1","@storybook/addon-actions":"5.3.19","@storybook/addon-docs":"5.3.19","@storybook/addon-links":"5.3.19","@storybook/addons":"5.3.19","@storybook/components":"5.3.19","@storybook/core-events":"5.3.19","@storybook/react":"5.3.19","@types/react-dom":"16.9.8","auto":"9.39.0","auto-config-hipstersmoothie":"3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"7.2.0","eslint-config-prettier":"6.11.0","eslint-config-xo-react":"0.23.0","eslint-plugin-react":"7.20.0","eslint-plugin-react-hooks":"4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"87bd28e2029964e39ea0f32b69b91735c27d825c","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.41-canary.62.1451.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-lf3aC7SzRLG7XWR/7k5XPXK7RzHfBstpPz8c+MVC41Lbc4ZDcM26qTjpoeeWITri9V1+hkgWd7bd6Ow0qb/Rig==","shasum":"6e0f09c6f16c5bc7efd2fe273acfce366c21a943","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.41-canary.62.1451.0.tgz","fileCount":21,"unpackedSize":67828,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8koHCRA9TVsSAnZWagAAyj8QAJook1tmurYj7cOoBBgn\nWMJrk6kwZP4NEzLyY3uWgV1Kx8spR/a/bfXxF45KJQDx3uJCFdvtaDI1SVsF\nmY6kv0M2oetzaRdlLH/1qhh/tuZ16kfl/Xm7XpWFvET6ptgzgsxD7FVBjdIp\nX1F94nX8VQQ5fSsAUfzTrlwBuBnOFZPXTKcj2huk4Jp2PocAuf8POrFbN0re\nh/2sA8xWgT+4wsibxWKA36DUx5X8idCB91GqfAAy6JOpIY+A70FurVAHMr1y\nY/sHuWkcMVW7YrJWfHHJ3LzNS6iDB0CJ5ZxRlFVzu2q9IA5k3y+nIFiiWCw6\ndQD8m6ttfZQ+PSX+IY46wtrcPJQI2U8u/zK0r0/qC83Wr8Qee9QLziNB4sBF\nQXBDksYykTA2kvDxMID2AiLl1FyJE32XFGeROaRG95xOW/sWZKwF419bbpA7\nsTCSH5Fm/44S/h567gXmJO9FwaJAWrPIJspFq7tpMasvz7Kqrw5Ed44JETgK\njn2eIb4OPiSHcvwswEJDH0t9TnVLCXl0DY0RH+rMt2FIGhLpZOSLiIQ0b48m\nu04RLa+DhbakfZYG9GqeRGhxyJhKPi2yyMAYs9do/f8yBFhkTKMdAdAxFa1w\nUYJz2Gb2YIDtfj1m7PyOJGK0BYuXMMtjr+Dy5Z7hxqiU/FeGTw0K+fkvwHx+\n8uJX\r\n=lWIt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLNpwS6rIk73hhkUfv0SQuz0PruebzqND8r99gWZ0wvQIgbfChX62Rrw1gtHkZthtnr5FQ292lXE2aklYZsUD75FY="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.41-canary.62.1451.0_1592936967195_0.7940836968002445"},"_hasShrinkwrap":false},"1.2.41-canary.68.1454.0":{"name":"storybook-addon-react-docgen","version":"1.2.41-canary.68.1454.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"4.0.5","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.13.1","react-dom":"16.13.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"3cb322b4e5b41b93d73da7b5213b4872d0821098","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.41-canary.68.1454.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-18Pyu5tvik/RPrMZFarQ15gZwhSVb8M6664lYSgVs5votadYiuW7G/na/EO73pk67cWR5A3kTldX4WhEk4BUrw==","shasum":"6f2da927104a79e17f2694df7cf1f1d67e801c61","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.41-canary.68.1454.0.tgz","fileCount":21,"unpackedSize":67847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+yE7CRA9TVsSAnZWagAAAeYQAJUAPsJAuQ60qZwSmCEy\no99du3JHDFP823K/jY56sA3eMEKJNbxKgLwrjU+0QUBhiEY5WZqaNq1YgFUA\nxWVqGQFGk7cu5u7oKfbsc2Ts9mZuvmv9o9vLthN9roU61pCbzgYu96VPcySD\nPuzHETnFgohtWUap1qHMscX0O0ZuGOZfNkZJimWDuCvYWcinjVMBIKkOYQku\nvOeIjMyHs+JXHgM+pcaHFbrHLTQJUKANOqtYCCczgAmj/dcS5NGh6dqtz99b\nPedbjn72zPtio12740nTzMdMDOD3kkMbSRVW1W4uHHBP7xHeKrr+iQpD5Pp8\nrrBWo3HUjHXitw+88FD2bnqdbLkdRZheTRPzEh2tTq52ftCXiqN7O6tHSCbn\nPW9xLEPac+tHaObuCAmerv07f28ayWGq6V22+Q9y41y7nRfxTLHkdsDyk4gj\nRJWHPfO7uOreI9Z6EfSDttQ2wQxrUnpketZeHdNgqg5fO4+wsXiUXAsdsTIi\n+rQK1g2iQsB5eMlagGzoaFidzhiuzQdZy1LP6muKHMW0ndoL8THFH3CEkVRW\nmQyOOGbOMCOs95w+0AqLeUf6EXgUyw53FfplvVug+oX4Gib58YWx86lbNNr2\nBU/wGfEGqO+jJqOD6f9s2IrpncVMUShPKYQGOXrZy7/T/ckpK3z85OFjo5Ub\nxCP/\r\n=bHdV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcbrJmWGvetsY5fn2W6j94/164yqD6Qo/rz6eLbHgSSwIgTEAqbd2Q2lJfkASC8KHItWFwBfoKBeAimJXi61GH3VI="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.41-canary.68.1454.0_1593516347442_0.9393047631906732"},"_hasShrinkwrap":false},"1.2.41-canary.73.1457.0":{"name":"storybook-addon-react-docgen","version":"1.2.41-canary.73.1457.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.10.4","@babel/core":"7.10.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-optional-chaining":"7.10.4","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"5ab913ec44fbecdc0185c3c7000e1251b3d5137f","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.41-canary.73.1457.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-K+2jY+H4gxhRp5PFLFXmbDHZUVgwPlhJGZclxgrIkwkweex4OZUYzVVWsD/KyXhhIq59t7i7LPyNFPaAeINA5w==","shasum":"200060c89806c50a0004820763f2e82f5cf8e9bc","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.41-canary.73.1457.0.tgz","fileCount":21,"unpackedSize":67865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+z1+CRA9TVsSAnZWagAAaxoQAJQHmSyasedML5L6oXVF\nqo18zp664PL3rx7vJcbGYCFSXIUu51+Kx2C3p75njNo4IyRmR6pbL1AEpSLC\nPUG0JFHAQJXUyl/YhgtM4zLqMHhe/UIP0j0V5YVyGn+rWzro7YBvSqjc2pUZ\ngRM95BWllYT7zuHaHPivtXnnbVVvz7+nRB8A12judo9g4NToNu5vcWchmAJT\nXFVuV8mD3jR7oSFStHxBLNAYgzUcSzfI+D5aTAdPoa95bV7vo8ANizJQqDpJ\na1fEfhWqO0o9hcQLmgPUwIRFN286y15AHgDjdSEM6AWwB6b/9jAfdR3cGlAz\npJujpT7vtY4RgPoIT++KXXfmieBDHaXsLziMFiQjlVxEkO+0Bk45mR6mdU8w\ng8VhTd5qu0wOqLFB8Ee8fK7Ah00OcOXgwjeHFAJ5Q+j484XHYiN4jxBtPUx1\ndFmefgfKkqhF0mRHHVhv43QAi6d1OL+Zqf2vWIM0GaLNXOBT6k3AJjcGGOTC\n83pLqbB0v94Kg5qQGw1G+W6ht6JLKTbyMnDFdocl/jBCGLG8jbjSPM0FJ2Gi\nLfpwCqecAHr/2+WBnxYrPc1sMdOhg/p/0ySEsP8Y+CgPUaPjviqZfEiAnIhI\nz3jFEWzKdbyFjHus41xJNwYHyaqGGHMMiavpigv/XOuJ54r4HJDLXQA1Vv3H\nOlg4\r\n=TY72\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvW8CjLTfLQhL3/8jVjZZU7QjTUq6SHLqDXR5skyQjvwIhAJSF7PgAa+mqIoKTp4nqTu1H5KaNrCGRnXvWCDMGrW7Y"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.41-canary.73.1457.0_1593523581962_0.4243635533264569"},"_hasShrinkwrap":false},"1.2.41-canary.112.1460.0":{"name":"storybook-addon-react-docgen","version":"1.2.41-canary.112.1460.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"5aed5e8df27458975d1eeb1176f690d09c4f4780","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.41-canary.112.1460.0","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-IfIpdWdiHVR1QRrcchcNQ/Zcjig8mzhkCImHRKK0sfVJAtftujcucbLlxmXGB8CayMjpNE70rhIUacUbStwPZA==","shasum":"ab51768154afa94287987bef565cc137ae137568","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.41-canary.112.1460.0.tgz","fileCount":21,"unpackedSize":68179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA8NKCRA9TVsSAnZWagAALA8P/jtUn8e7uvB0EKtqm5CD\nmrS2FR2KYjhJpD5UIGy9taA5865B/L3uNAPfR4ku+lNutZM0BiULfSz1pRiP\nUr5y9ljwszDwVlRyjitrlkMZ6sLkySZqkWllPJf9cBc+8Bzzy3DwW0i8vrUF\nPT6mmhUKhFxmoeNNZwz+94JI8wqWU7SPbGAnn643+Qrk1JVS55cM8WQTCVgU\n60WbeDmia25yX0c/1hVmSBXbg/EHkaQryXHgX768viNLYP/35PL7S8MPlnwV\nBtwvSTPpR5Ug6aqvSkh5dL3JkQZmV91mm7dHvd8hD0POD/Futg5eD6pekahh\nvTrtDstZY8Zm2BvjuuTd6qCrOuAynQAKhSeD05cUQ8Uw5q5cqsc3tZQ5OLe8\nnBZY+f1o6/QsMn6hTa4gLHRvg9F7i+D95cMfpd1mFLXTIVlVj5fyLFYZKeuq\n/NVcxvM+1HBoMCQGS35pSop/r+Tc0ZpnRzK+Aw2a7Bb2/GmmBo42Bhr9xx1N\nR2DQfrDTei1C2ZeMggjw0lb1a6lpY3XRysZKd1k/ZklOEd1/jDe1d/0kxhhq\nlXtWxVW3RyhAF5ZOXvhb3+9JM1TO3P/jZ5KrDS0yCw2t7q6qP+A9GJ8AgH0t\nMV+ctfF3BRuKxjIwqQdG5ZmdPfdncQF82HibdK9vBQLNlicnMJ2MsE8Lvk8p\nTEU5\r\n=br39\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDy//FZr7d6Cq71SBqMz0WpUsOcDcApQie6aKrdCtpalAIhAJVq7IDKDU757h769nitmAPcZ8Uo0DYbItKcnY3kVxDq"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.41-canary.112.1460.0_1594082122315_0.4722568321447824"},"_hasShrinkwrap":false},"1.2.41":{"name":"storybook-addon-react-docgen","version":"1.2.41","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"2573c1102530fe08ac1b6fcaa0c7a10ea6e0fcdb","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.41","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-/C9qZgO3Jt/H96NfzGQxQHYUTPneY67WQNFj+ZddyWTnhzQXg3mPKy4Bgk+uTJi2N8bOtOb9V+PwNvD1Ot+Ycg==","shasum":"eabf0b8ea9b06a8c09f48ee47bbe53fb2453a226","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.41.tgz","fileCount":21,"unpackedSize":68461,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA8UuCRA9TVsSAnZWagAAJUEP/RGAcZV7MpG3o/pmSUtx\nkM1wVdIXJi7E2wDiNNL7f71+RS7t4M7abC0O5UABNa2CMoh0aKW1ouVpc/iz\nhYVDLLFWQ5Xv+MZdhHNFKHyuVGP3wop+OuB0pWzvydsq65zoaresPARxOVno\nis7XMWuwR+NB9L70KcAsPy6H7o7qt+FUCFlAEF6QNz50CBLd6z3HcCjosqIs\nDNvK2LJUS3Ecsr2eCFc/DpmuDwZTW9MQZP9xDC+9E2aPnjSK2L17chBMtB1S\nHY64auAJVHos5mvW+a7LxJU/dyOR+lE3nB52FFSxZzcNp0n6QEfYlt3uEebl\nsDej/lzt+Jv9RqgxsTE+DxjavTy/nXZv7EPzgAZ8tqrQe2dwe+MO2GLY1TAw\nXSBBwZv3AdlxPHvfop8Linfa3JJnV/Ey1pn91bOC3aGp2WFsoYpIeotZWum6\ngk6iXQacOz1xI+PX0mr1CwwYUccizxh9mSt8jowiJjCVVMua6pH1a95rPUY1\nyyIfayn6tsPTiqJ2IMRa0qRq4jKuAmLi4of9IuOVQtRJOPZAxbcZPrWpRmpq\ncXO9X98kYd39evNmF4gWLFre/hUFP5dFut77VzAH3wefjjZ1gpRUV2FHmfha\nK28dRdK4mLoeOGNm+fbDdwFqRFuDWvuvC8G++YsHHCXGQLZDMTQv9BepCEtq\n9Nar\r\n=tdj9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvJgmUfP79YEHc4rZ6sqk7bXez2sD0uvZMPmusrahh8wIhAMphTggUWb/hfMKgWHPLqQVXu5fBHfOpzGl+2xFFJ+iT"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.41_1594082605949_0.050717808294213684"},"_hasShrinkwrap":false},"1.2.42-canary.62.1468.0":{"name":"storybook-addon-react-docgen","version":"1.2.42-canary.62.1468.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"7.10.1","@storybook/addon-actions":"5.3.19","@storybook/addon-docs":"5.3.19","@storybook/addon-links":"5.3.19","@storybook/addons":"5.3.19","@storybook/components":"5.3.19","@storybook/core-events":"5.3.19","@storybook/react":"5.3.19","@types/react-dom":"16.9.8","auto":"9.39.0","auto-config-hipstersmoothie":"3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"7.2.0","eslint-config-prettier":"6.11.0","eslint-config-xo-react":"0.23.0","eslint-plugin-react":"7.20.0","eslint-plugin-react-hooks":"4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"eeac52e3e783ef88f6eee33c23936f004096c435","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.42-canary.62.1468.0","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-1kMQqKF3NVU393J9nRG4uCv/OP3ax/4d4EyHMh4XTULIqsDkeUO9kHn0hPr3Htw42TK8KEs0R2+3veaBgmeMNA==","shasum":"60c60ebd8d2cf417c89ffba3cc08c9be98456dfe","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.42-canary.62.1468.0.tgz","fileCount":21,"unpackedSize":68458,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA8ZHCRA9TVsSAnZWagAAnecP/1cmPOfQeOHQWq/MqmSd\nnXT/4Km04hNUiim4w62Ae0EJ5O4sAHWR+iMhSF9HsMNOg4rMr4pMZzYzn7G3\n8sw1Z3RUY5qomRa0U55UPvLJ0lcvQ8rFhajHYk0NY1Kytc2aChMfesqWoPi4\n6Bj4TsIIMRWDnshxLNyot0v1FvmgZyuR87Bc8ubIDrXGWkACk7mb0D7jnICZ\noiS1KY+0ucFFJk+TH/NEN31VZFqffdOJsfTBkLuuyp1jDS0Aai7lAFlYvfMV\nLQdWa4tnES6n9vs+N1+81D2v4yxi7VInQcWRjEMo8FwY1Fsz/BiRK5yvA+bl\nrfsjgmA7bwagwi6+ICUhcD9v9q26gMAxGqvs5ZC6uRHSb+KZPV5HLyLK8Mh4\nWXTrxpLveA6lOOwQUpu4c425WWGcTIPvyXbZXr5t5kUZAxyyURfxz2Vddsaw\nARZ16Zn6VFIA3YUCgRCwpp8CC7bgKaDtCiHaThn/MDbzug+SN8XpangIvm/D\n5lFw/AJJt2c/6+OrCs+ImotZ5QI62E3o99jZDhvqT3QAAwz6SzBBWhOJGOx2\nK4coyoXlwyOb33M19jJXJLiXPaI4Voj4t6hy8BVk0vlVpkFEY2EJwfuI2265\nrPDLQ2/ml7g3IZ1VhBAgWVod0O9uwJyz8ryKHbyLwLjI2/7hyb2IcOfFlfRu\nqcl7\r\n=6gr7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE+h+Caz9SJjI0etqVO6n2wE/pS2ijxhHdVExGS87m6mAiAbNJuqhJNUIvJPRJKgjgQP1QVFUD337f3y/9E3GaXoyQ=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.42-canary.62.1468.0_1594082887233_0.5587688976748826"},"_hasShrinkwrap":false},"1.2.42-canary.68.1471.0":{"name":"storybook-addon-react-docgen","version":"1.2.42-canary.68.1471.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"4.0.6","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.13.1","react-dom":"16.13.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"af8e0333a88b295251e323dabcc6fdacff29405d","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.42-canary.68.1471.0","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-zBv5c8HGqh1P+0+2inOjimmpWS2eENxEykbKF4U/cb9OqaEW5XYPx6/b2LqQDNJN9xSOl4kjeDPYfPH2sarR/A==","shasum":"9c2839d9c902cf81a75625c84643b47899190884","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.42-canary.68.1471.0.tgz","fileCount":21,"unpackedSize":68477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBO2ACRA9TVsSAnZWagAAf3UP/jpXtWDA3iw27ILQF/Ya\nIM2Fb4FVpX2ZXuGjne1mpdZoLGOSXH/JvpTOQBwhAjvTb6UuauHHABfGG0YO\ngGxk3O8nfEFKDlf8sGCaTiSP83jDFw6dtNAteClQHRQ7GEiu5lwwHaSfEH+T\nCmbaLlaFiUyPK6cK+M685nhMcrJJkksA+FyRb8iB8qYfjskEJXLVoFRU7TrK\n9DdXzDSbB4v83uvGsUPIH002VZSeVR8r9cAUqWQ0bwN4AGBwvVsFzLNL3Xca\nzjxJGYe6i4Fqfv0G8FqWXaVVfqOnNWUDqfE0m/2yqTz6RYzXqAWvaVlPb1sF\nHMxDuDLb/eGElFNuukvMJf5YMWsCKbrbqc+SdVon3rOUSD3ZTYyATlfPpTDo\nxBwFsAjtOFUc0UABTszIwPK0xpSYJ1QgSi3B8QW3QZrNtz4LGYySCvIEvSE+\nwpj/eG4h9ihjWElvlJe6XkLNCp3DSpyLf3uNu8Yl/RSpI8865TAQ3wsRswzc\nJeGq5+RClEa7QNCHk0L4myg2H3wNNXCaa6479KbYTxibMA/korpVyTPfDZRw\nTxjSqoBs3P13cyqC0GErCEzhMQAZqQtozx58j/CDsCfeN+0QZBXVGJF31Id7\nH9fh0UkIZrZyKmevLJLCSj6qvsy5+3LHxsupGUxiM+exZA35IhLRgQXDyu+Q\nqo6x\r\n=OuTC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAeMVbQz2ka18F34z6fDIhbjFESO9umds+XsX4eks54gAiAsxXIIbtBey0IGQ8TamQkgYH0CYb1NE/Nbu+lax8jW4Q=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.42-canary.68.1471.0_1594158463515_0.20265246327133668"},"_hasShrinkwrap":false},"1.2.42-canary.68.1475.0":{"name":"storybook-addon-react-docgen","version":"1.2.42-canary.68.1475.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"4.0.7","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.13.1","react-dom":"16.13.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"da2181b2d04ad3458722db5b4fbd16bc9f739c17","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.42-canary.68.1475.0","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-1x2FvyBTRwrDU/cRnU2mOKSuD7ah2JNKZhAI/RjYZDn7w7nAF/NiRNdGkRZ2sUbIuwB5cqFZ44N+KRMkk+Xtug==","shasum":"5837fb6bbfe91970ad6d9c0c075c06febf1b37f8","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.42-canary.68.1475.0.tgz","fileCount":21,"unpackedSize":68477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLGYCRA9TVsSAnZWagAAOKQP/3dcao0R1cfJgXeiRhrQ\nDxiu52QMD+vWwiMcFbHo3t2OvyGbW70UZXcnIK6CUMdvkoA3aRp0WhI0OjB8\n7W4y4djEBj5h6b52gDsuRC0OD4FcrPVr7PEsB3p+vj/Msjs2qwiIISAN4Kr3\nFybL84YF0H5YsohU3uoHPndtS3MELOvMRaByISuIhz7TLdL96mTrdSnT++K3\n/3XIdohpMWaHa8VNNbWn6ketomB8lzXrNpwHph4DHWWVDJ8w6v7RVVx0CmXN\nl+EkzRKpn3vWSJdSqkBhR71/CvDiQ88EvBLi+pB5Dk13TzAoHEOtIM2TOv+u\nSp+m2cm9MYagnK7UGJw1ROuTf3ONkCxu2KHtAx5ojiuoOOnqIcKwNQHb9f3g\nsNvimL7mUaVer8W4FLm0E2gkcDRQnD+vvIXF3vA7Pi5RLav+/lFixkAs5YBB\nl0/IPQI5HlIQnrbyV4oJSRrdQlOTnBF+GXrFLHRl+UNpGNMf2JYueAjYz22W\nQVyH7IZ4LQ1NCD7LC7LqC90Z8iCUJviVCtSCUbhuajQ4lJSDuY0t/pVXYSZK\nBzslDkLLB33k0j2A6dnaUBrOgSSiyw2ZqSlHcGyPQyvnxqm7MvK2qVef3Dwx\nKpjINg32m3fgH77LAsvfd0CQng9QlNwUtDC+ZXDtt3dsL1dNtMEQl+vyFzc3\nkUw1\r\n=H4N4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDn9GF8BDMEkuSMluhGjWOD7NafxSTkLmHKrrF+vbakmwIgUELZXn2HlzwNFLfRcbJPrHTVssWCsg9g8iizn7oYQxM="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.42-canary.68.1475.0_1594405271931_0.11663743060449705"},"_hasShrinkwrap":false},"1.2.42-canary.68.1478.0":{"name":"storybook-addon-react-docgen","version":"1.2.42-canary.68.1478.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"4.0.8","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.13.1","react-dom":"16.13.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"5d4bdf396a32738f32ff4b0c9b046aa0edb8ceec","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.42-canary.68.1478.0","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-9DCPuV0FuEnd+3J2ZUTkubx732k9GWx0aGAgZY3VMYYqWq8oA/zG/63W4w+RnB30sstkgrOyMU3zrArdYDdN4w==","shasum":"5d033c7ab2c9b3218bcd39215496b54c08c57471","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.42-canary.68.1478.0.tgz","fileCount":21,"unpackedSize":68477,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDJhACRA9TVsSAnZWagAATh8QAI1YtEcpfLIecwXr9RGl\nzsGoH6LXCeRKUbvvzb5wtl+h4ryxH0CgyFGanz9RxBJKWWd7W00AIl2Q6dNX\novCqq7rJJe0tFmH2Hps8DJDFQzMQFPPRLbJqr2utURFQYhv6m4DVm6j0UPuh\nEz1JsAHGK18O90Ry/B3/MDRl7qPRkXHUHiqRHMXQGkDyndptq98kZ0l5QlFO\n1rkHzWwFWzA7Hvb7mp3cLtLdfKHFaTYick0CKZC/YmmReECPS52H1Oip9u7s\n0rmA07bI/ITq0xhQWE/UMqVCZ8AkoIWVdZ/Sf1pxl9fZdKN1LIVkDfQrqR5z\nTNw1R8o0ExqHSNn0RJi+c9zqx5588Tlq03ifHaos68VyHRVbel1LhIH/WLGA\ntE9nfkS/QOUIKhTrcqCcFNU1mnuQ7VqHifbN2vnmpRd8mOKe1QJtSmZ9G5nn\nXh/MFAiHKYGP+4DBlr3nXsLjyZVybl1NzM4Oa+CARzGpVfRJO6018r9QDmLR\nFLNtx58Q7doPp9X0gsSmLwkuJDsb90SX2iHQt6m9n0qynzzlaM/2TymPrQlk\nBUOMl61GySOm29nRRzRVVov8B708ITKBS6x5OhzTvHHpBAmINIRGUAet435l\n9KHOuh02EBeO5ehBZjPLCANpQY+LJHEELoTDnndathaSOOdSEaUwHiKKv/2E\nwUVK\r\n=Azeq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFojW05XINljHYm6N/oBYaHgPwUxtoipXCHIW2GufSygIgA0cSAmzPXKnYNxo3wizz4A4m8kl3jQUCnDqce6qfLKc="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.42-canary.68.1478.0_1594660927743_0.383408200768101"},"_hasShrinkwrap":false},"1.2.42-canary.73.1481.0":{"name":"storybook-addon-react-docgen","version":"1.2.42-canary.73.1481.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.10.5","@babel/core":"7.10.5","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-optional-chaining":"7.10.4","@babel/preset-env":"7.10.4","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"0b3a2868254c5845884e5e4dfc666c5be5966da0","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.42-canary.73.1481.0","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-gCNfpFDTvzr8scq9YNGSS/Rs8P4DM6J1MKyAHXWkftLvLAQ7or4nW7Pu+ZxZQzdVS/Yt5f0owu/Y3s3fyBFOsg==","shasum":"4a1393a3558b43d2946559efc52adeac3e5e8d7d","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.42-canary.73.1481.0.tgz","fileCount":21,"unpackedSize":68495,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDfjxCRA9TVsSAnZWagAASvoP/j9LJse0SjAYzvqDcP9a\nnfzrZH6OTMOT9SNMGhrSZWSPIvA4b4krkA+kdk2SNRyiKL5UpxQtFRljaoXr\nxGg0kA0XaL173zMFhXT08x+eqn9s1uHViiow0cxtEjgWp2XeV3LUX5s8+ioY\nCDQEVpH7f9neKN1KNLPdc7UkWG50cRynwU1YK7acXY9V5m1BE7YWsCb0Nqix\n2pP4VwtVCZderDsrOivkBiLmdW9mxwg32NTl9W78GSdbiIgftv32WQHVxn7+\nfmXP+dPBgBCIjrS4sUBFX4Jkoxw6tRjKf3fTlUVw/2ldhcR4CKsGZ6Zf//TA\nXcp6bJfGMumG5y+2gPlpYm39vTOVVp0WgbzE6LH3viB0jeEyATV1zrbAmHOw\nZlxRy8+X6K2HhHrThp/TO+qbyW/IVVuoWyqgVmdK7HxstsIuJ5LEaTU8XBIc\nQ5PFgHn/vRR6Aq//DQ9DIYjnDGBPa/OxYKce/boW5MYaJ7uaTqQK1f1aI1jr\nAWOJW+yJFjq82AZYo+31nF2FAdL03G7VTEY8uPVVMZUs3ov2Mk6hrGJJVH33\nCSnEONdhB2p3PgHvqzdz9vdYZvOdKXrbYMNSETHo8gfyGvUBMhV5gOtFMVf6\nBvmCjFWExxyTKye0wyevkHLI7izn2t/8RszAfNwwEndz8pmYf5nd3Bk+zH0B\nOYhq\r\n=t/IQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5n8nFHInctlLbONavcLdp65uSH8mWZy6hUJ1+bKMgjQIhAPmhiqa5xuCsvDYsypcGG49bbW8cFAJ0JaXsWIYTX8/1"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.42-canary.73.1481.0_1594751216390_0.727696606004419"},"_hasShrinkwrap":false},"1.2.42-canary.114.1493.0":{"name":"storybook-addon-react-docgen","version":"1.2.42-canary.114.1493.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"a6f0fb42e8913f34363eddc09532255a00d410b4","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.42-canary.114.1493.0","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-on0Kf/EVVXuBkaOHyJgtl3kP91+LnbluS6RsYkqUgkm8+M3zIrAvzn2bqLf+J5kUH7m+BMjxWdiTORSKfKHihw==","shasum":"ac5011e88673c3f9a5c70d94181ae9e5e92ebabb","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.42-canary.114.1493.0.tgz","fileCount":21,"unpackedSize":68493,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEb23CRA9TVsSAnZWagAAv50P/14R+VVjA4tvt+ZqY0e4\n49uPfxJpxezGCXtIa1LzwUUJJwZAtf+flAF9SrM4D2x7F5JRx/0iASanHfJ+\nfzMlRfByRSpiQPF5sPH44fSAUv8BC2weEoj5/ssQkX1qDS6nWOF/Q6o1zjWu\noXOs1FBj0N5Jex6aUACLR5v3Mtf8W5tLLm6dmBRh1Fp3ujMhUvgMsNrrXTYl\n40/PHgHViG6yOnvKFkRxUGmGoDoip9wrbYB0RWI1hU8NkITeZX5S+dlexvES\nxQDdrrv5olWs6L6bEj+H5d8TECgmUVDc9CPfAaYtSgKBph3tFZus7qBpBtCS\n5jrdQjb4ewsR97K45vxYM7BmTX8w96r8e1v/guaF9+HdcW2sm05ayRyuTS5m\nBswvPoUM2tRjeT56scGrnbS7xLY92Gy04PUVM774F+7Ox/Au7GeqSwmPyoE7\n3Dl8o6EtikPtGsUfG2Y+sv4pd+QMjdyLIPb/5mmwhwtsVNPqjSgBHqX2a4tv\n4eB2aemY+LMkXIM4MICVGQyV0j3J/UogehvlH7BsfkNRdx5u1fwNsaHHKYHV\nKdvf2fikAGAuSZZY6SwnxIJLZDsC78nxwLfIgV2Pc15EYxMylRMlpLIzzghK\nj6xhvObq1vkCj1kk6/uHVcwmcI08pP4iWnPk0awCcOpycKrWJYLZt5/VmKXr\n/As+\r\n=y0Ct\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICG0rD2pU2HHeiaiMuA+OMSdOxJmp8ev0trtqOz91ghsAiBjwfLl+q6O7HbPZ7gjJOVYqlhpCbLgy4rUqUg8/ha96w=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.42-canary.114.1493.0_1594998198696_0.8345022005483018"},"_hasShrinkwrap":false},"1.2.42":{"name":"storybook-addon-react-docgen","version":"1.2.42","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","gitHead":"b1fa50c23317a5e9b0dcba852a6862b439a08530","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.42","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-STQ7HU4+N8zaOHgwNkElABuqsnbXQMVckh6rroTU2pqdP10oQQ+rVfIbLX3wEFg5bbQk1FUzc/DNR0kSJtUASw==","shasum":"01b3d782612627304ae077c98bf6f5fce3fecb5b","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.42.tgz","fileCount":21,"unpackedSize":68953,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh28JsCRA9TVsSAnZWagAAIiQP+wbpPzBWB0BQ30XghybS\nk2ks8Hs2vkrLJQ8t9rGmk9tOdLDdlKYzj3ax/r9XtT0UNV0HTQsMP1DsWpeN\nIL8GD2FosCgpvpZ+UZec4sOERM5LtHIhFNx+1KMjdCmWQWuQWZ3pRUZzU+QP\ntA8/zIQTOR1EslUNrc2D14y06DQv2zjSZINFMulAfn6DPuIX7CjWscd+2H3a\nIntfuqT80njx5HE1ueZpKif/PlW2OATrnk9V1zYtwMkDw4BPLCLjXpVHeMsL\n4w6ta1cesOnwvzdQQTOA8bPHYRoJoHtKHH4gokrxWawoJFZIK/JHzpBHiHvr\nHtFjw5PV0gJlEh3dm13RqRkYkrHKp0tSaofVBZJGyoBU9dvU1tdIyvTqn+Sk\nlHIL0x3TXbsNRFLOaEsj4hP+prUDU1cDUvqyiM3cy8N0esjEbdINQIQ7yL2b\n2LZjsCqXes6uBwNp4qs1afS4BRI7bA7OoGuWRY9opAJKoAsFLPPEEu/fI5fK\nShuKnMvAjCyQmGy3KKE5G84Oa6Ftf7x3LKvftniywbZFfxs5o7NlvTBKw71Y\nnqKPB6OeAGHNyqYjV9/hUeW393Tnt7/mcRKZocMj1GL4y9eT1PzuGshNdp/7\nJ8nk2/on5fF4MIPaL2teLOArkEZ6FXWvy86BeneT098SXjrSK4sGHWu00ysD\nrBJe\r\n=KqK7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHjkjXNPIg5XI2cgcqUtZk5yiNsV/dG7XDhQIuEeAED+AiBE1R6aYcfYdTu2WNpzh4tLa2ONnjFxj7IrJlnL3ZObfA=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.42_1595002749513_0.5440235758603056"},"_hasShrinkwrap":false},"1.2.43-canary.62.1500.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.62.1500.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"7.10.1","@storybook/addon-actions":"5.3.19","@storybook/addon-docs":"5.3.19","@storybook/addon-links":"5.3.19","@storybook/addons":"5.3.19","@storybook/components":"5.3.19","@storybook/core-events":"5.3.19","@storybook/react":"5.3.19","@types/react-dom":"16.9.8","auto":"9.39.0","auto-config-hipstersmoothie":"3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"7.2.0","eslint-config-prettier":"6.11.0","eslint-config-xo-react":"0.23.0","eslint-plugin-react":"7.20.0","eslint-plugin-react-hooks":"4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"a54a60b2bc9d6f9d67c7e22f3f822251173e8573","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.62.1500.0","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-/A5z0Amkh+mSbkYudRltmB6rdvvr9okBHdVqpQ9DmNlF4L+TzyIc+MFb9/YBmhPBleObMhOcC0Cv6XUmePWACQ==","shasum":"3d3e312572856801178b6e66b57f74d46598349f","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.62.1500.0.tgz","fileCount":21,"unpackedSize":68950,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEdBBCRA9TVsSAnZWagAAgS0P/1UIb9X4OrGQ2HPvnYEh\n+evviglU28rJmBv5ooTrK+XRM7DmqWc5tKLgm9ULqNm3vtUhnvLH8MiK3P4d\njnbgGi6crFOluMyMtnHdlqerwW0EcXGuIhCKQsM1mBKXkcdVCYPgFmwK0qLD\ndPEeQ5/4fU/HzVTbaZTxq3/QwKAffOKFZyTL3q7Kxnv9WwCKk2QqbckOCpZK\n22+7789ovZNw/0EVYTTjy9M+Dvi4tlgJY9zlk0p4koyfpeYB0ITbb0T/Pdks\nrmcw0E08qVt81LSPm2d06lRINmX3BES5ct45ylBKjhKALCYIwk8BLRqHOVc8\nf7HaTrkiNFLqn7XAH2VHaIfB78UnTNbzykCP9b50TfevnHNssmwTMgfTAhDq\nR7TzHN2pNvce7a9WsmDQzl3zZaOwLWWCOmDaKU4eigaKcZW5fZ25eN6Gh5Qw\nKHvsKMaQ0Z5LZTql+BUBd5Q7mwbf3nqFQ55D6D+I8GwrHjtprmXR8n/l9sen\n03H0Cg9BO7cWlU6BR8Zg1bEdED/flRcehdc94DOj2TOGcZrN4IzI5pPAjLbM\nZd4DOngEGRMaK827ZQvy1K/RhM/URZVSrcRm8uA1NeiZQqWFdQ5xdVSO+okN\nfx2hh1yDEbQDDgInXKrX7K0tXVn0UqDY6UammEQSrndYZbuISAuBsarKve+7\nzDkI\r\n=5nbD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFe0JFcSI7ZHoxDi61uipOIefDTymHfveHWnUFoTV4ZaAiA0ReT0wQVv409TMlLrukj/fe85KBwGdU+vgCPONd8h4A=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.62.1500.0_1595002944681_0.20416069725144825"},"_hasShrinkwrap":false},"1.2.43-canary.73.1503.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.73.1503.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.10.5","@babel/core":"7.11.0","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-optional-chaining":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"26bdda00e663c598f2f219906e05c14f908c7900","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.73.1503.0","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-fxw1N6iUAxRk65bRCWMue9p9Ce/k/wDW9SshGzITz6wmqyjeh2Ob5LVr0AHDtlyFU8+oHGo5QWm9PxRbSqmZqw==","shasum":"b15308a2715377becc17eaa5f2cb5b3c5ef6133a","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.73.1503.0.tgz","fileCount":21,"unpackedSize":68987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI0NSCRA9TVsSAnZWagAAijEQAIsv/RZT50nPmTFKv/QP\nRsEY1cyeomIZtpJxGAQcNlk2EV/LdBA/zt10OG47HZxssAPkniZNnO77CaXv\nyCh59n0FSosf+6rMElRtMMzbzgeJ9Tv4+6gupF6hbO6xCDCLlxnRHOObiqe9\nxu9IAvHGSgFyTUPIIGW8J0yctSDhKZEs66J+J22ksq7YMbPvFkIM8HpDlvCG\nFSOVNiU9Bl2hRBz5ODhjG4558ibVO3Lr+AvWJI6VNSpgUkFawy2yAkA7yAcn\ntzrNA06dpplmhCqPwB4PHe4dp4d54VroMQJ1QXHcypz+su9uaVJzMR6bVv67\nOtwIln+Q3w3qHjxLqzPFtOaOS0/zCleJbTsXUdKxV1x1CVLDkHNaeXF+wNRd\n4v1Yn1VzlQjTu6IrcgDPyjQsCDxQ1TH7gygQuasMiRIMk9bMEK+wOF0HaVwl\nKcRG5u5DaliObvj3c+g3QVhqQHa9flxthWR/uBZFQfLjvR1H4Ee1EfSVkpIc\nUYxQAzmG7zkFJnctf/pnxKTCppFtrwmF1byVz1ZcneNy4hnliWxfsEXm9FhF\ncClb3B2vvz1jLUH4UJxUUMNFZYIndDhyPpCH9UL1DbvT0ngKI7UlV5uHmeQc\n0iOzpUCWucXqvhaUeODakNW48g3zdjw8Xw/XLnbYybj8nh4/oQRgEMFr8WhZ\ncaoe\r\n=1fC3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAQZDjoI2KqCigiioalp+vaL+EFtNnHgFwLd3QG0kZadAiEA1bWePvxBOmXnu+XhiIo7rieo+NowgdP+hf5K3F+/GyI="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.73.1503.0_1596146514041_0.4763288344967742"},"_hasShrinkwrap":false},"1.2.43-canary.73.1506.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.73.1506.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.10.5","@babel/core":"7.11.1","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-optional-chaining":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"9a95996dc80ff77a289628bb28277d8fd2bce69d","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.73.1506.0","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-6jcVforVW+K+YjNh3IcHMl8+0eLi1HYkEZ9U/kezDgJ4BSLVorznb+tKxUIWH4sldfjH2t9qbCrYNueeSGMrHw==","shasum":"34ce31b0809db8fd3a80db4b777185956aa2bd5f","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.73.1506.0.tgz","fileCount":21,"unpackedSize":68987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKd6rCRA9TVsSAnZWagAAoXgP/RzawYRZxIfK6qT8KDYv\nUtYFIpmr80M2MT35wrtiWoQg+LgnZhqn1l1Lqau+BSb7lLfZatZd4kATP8Hk\nA07q7nIEv4o06DVsmw8kWd4iPoqS7JFXZgj475uwtUiywR2ep1W68bikRd78\nfdWffi5Ucgb5Dxula3BRm/IujAXFaVddzRTUBLCmoxEVGOiawWh92GfLzL8l\npgYRzElLcZyfHe0qYJKcPAepwYy+0IIl4XyqiqsH+QR+5LkQoRgJZ2Dzf49p\nFjA0oIsuOTYE4fVbbk7+9h9PxJpP0qODlICL4d9IB9XS4r6NpZ/Ox8GSW9n9\n8R5A18GNUtkS+5Gl2+ekl8h0WRXopru3lLCAAJ/iFFTDf+vL50KAIHMpdVRf\nY+bH08I4NU58Do/id9q281PTtBe5F8vg4kEYYQkm1f/gHfG1CDjdon3Y2FU/\nRzGLFKsU85uy6GW9To8CgiRQl+YbPXi18NinKHhdeQLo99DW/8SMSDJiM4ml\n4rZRXehc/NjmN10ZisbSuhfDhxZrpl/df6jpXx86H9KhvZ3Fy7y2hDMVjM98\nwHN+ypRUptrtY8DbEHKy4bpflIoDv8nkyNORI1kUBm6mULoM8CKZKeWyIjme\nci1rtg4gKtqG3lVUFHp18+30TvwNwAU5+A+B7d+QdxXmav8vltWcuy3Dohw7\nAD4r\r\n=Mudd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJS23PTbW//GidlmJaJt29IpuTpVpYteKErNV7NP9y8wIgAO4f/Mv+FDXd46Ut7nLwb/WI6XdDdq0A1IcYNM3bi3w="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.73.1506.0_1596579498514_0.9538386007330604"},"_hasShrinkwrap":false},"1.2.43-canary.68.1509.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.68.1509.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"4.1.0","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.13.1","react-dom":"16.13.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"2238cd2878207d33b14aee14e8134614bada3b84","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.68.1509.0","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-UAhDqWWZ1+Anxkr5F1yTUuKKMos37qHqnDLOPTXjZ/mJm2BaJXg9ioUeObPilKw+3iIYFfG0gHPsmABOJBunfA==","shasum":"cf60a019ede002dfda686014978e0fb1c5a4ab80","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.68.1509.0.tgz","fileCount":21,"unpackedSize":68969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOnusCRA9TVsSAnZWagAAmjAP/1YU0Kia/Bd49ljG5tky\nA48JbWwbZPiXIbB6EOpPgkPYxwiXQidqv3jHBMqlk5DfhacmbD84JhtXRyFR\n6Npogt72/+KWlcIq7n5050aaaDlB81Imo5qeiaPDSrE6DQ3GPeQDmb7JNpg0\nR53WqEhaj5jLJc62V/nAmJ/BtQxJ8h/tK50EAUBesvJ4J6i2snfp5yIR9ToP\n/ENpRnEHywndQmJ+R7QDOT0NIniIC/Rlfi9F1pakOP8H0+9Vu4JLHiVkRjJq\nppcmnwZaDRIWAE8SVpOoWfl1UbKXtLRXxrO548qq6tfbOim4uvX9QvWdWn43\nVjzB0Sui7yWDZIFGF6cW/JYU/40Hc3XL+SLumF22LDz25NbQLqTwaWUTORoL\nYEd5ehOuDQ9YcbL34bb9YnVEyHMd3OHsRA+2tTGL2hVbkgl90ly55wsqlXZ0\n/r3/+NwRg+Q+zkdMkJ0zSVmRKk0KYGfsLTzDeKeVO/8lPma5c5CaTr5yZMHY\ni/Pz15LtcVx4GYswMw2cKI3AGXlm5ad+Gvqk5EqUuN11vgJTCDy71yt6/ZxG\nQEmH4H0dNGj3JVohvqh/EZzfJa7zhFbSC0d+miyn3vuFOE4g8EtflukkTZJA\nxW1G66mSxWvAId7xE5TTEIAhJvXs6qXJK27FzOgUEN6x+oY81CeQ/I0Zw1fw\nM/hU\r\n=Z5WJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgoCUuSzvmi+ftau4FD6Mtl5KjBw48noE2uwST66x24AIhAOJwXMuTVDAbXCHGPyBtW2VU1iSMGE2GS3eh7vBP0XVZ"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.68.1509.0_1597668267455_0.48839986083162734"},"_hasShrinkwrap":false},"1.2.43-canary.73.1512.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.73.1512.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.10.5","@babel/core":"7.11.4","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-optional-chaining":"7.11.0","@babel/preset-env":"7.11.0","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"b84bfa44aab2358decdd1549776a66631d2c9472","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.73.1512.0","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-UFquMWPKMpeMYsq2i9r4ZdJbyBuX+Loi5h3IWd9bauYqkIMSoXRU5zMPaf9bfwlo/KLLOdLuOl8ojEGoseqkvA==","shasum":"3e0274dc4108d8680f05264c9229f56b59c1c14c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.73.1512.0.tgz","fileCount":21,"unpackedSize":68987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPssxCRA9TVsSAnZWagAAIwcP/iAe4IsCgr8HigvyqggD\n6aqdIkL5NKu05l0qrHuiI232Fs+2qUfhdSHxuP3286HGel5UsIOfwkacUr5L\nAtx/P9ZZ3z/VwCY7jsE8SkvZIzWaIm0cVj2HJRu1bO0q5UvW6D03GIt7KFuV\navqIYNLvP1OxfKb9/TWCUzkTkCkwJ3mdP49FZve7E6r6/pZ1Gq32X9+SyWeJ\n4Lz8tXsNUx5k4Vlr4nFeZoo+48YE91xdE5CIReZPvar6b/TByy+C8ABnRdOl\nsJBId1hLDKB6qsDVpbKjIiTTf6Yefo6lXC3A19To3HQ4MEbBUJfvwxZ1C2o+\n8hytj72hNER86Ceh4ydim0Lvx6drVfIDKgt4Eag/s8S8uZ5PjAcET8m3MNav\n1er0yI782a9shJvth7u+LiwkPttvPFv7SKG4oUeoVUwHyUCudFJ6DLdcnFqs\ngBK13np6jBNY8NQqVm7CmsgLWRj8UbQ7OsluV1KQTaMA9JCSyyysLhP1BBR/\nUmZduwF8TXv8NifaD4EEpSsC4U6jTQmqaaat1wNoVl3rBQ9f2ynn+weZOrHI\nVFHeP2MK7GkPugEpP1X0UNOTChzfoFvPXgI92DxLEHtTbUz0hfVmlXHU1rCe\nYP454kcnj4ZFvgdQpgGKUEyxRZ3iRLZSiIs26UgC8tDKmYQnE7Cup+Y0vUVU\nAd9f\r\n=4bL6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBdBWyvHr5ob1EN93eU54BT2wiVYuFcYI0LdgCYiznx/AiBvDr31jBuxet69EjgSaR8kgw76pt9vMi/NdvzlF6XoYw=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.73.1512.0_1597950768788_0.1984083597812092"},"_hasShrinkwrap":false},"1.2.43-canary.93.1515.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.93.1515.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"2.1.0","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"b0228f92af298a82b33da5d1edfe56daa8c028ae","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.93.1515.0","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-b5s++XKNaQOKNevbh2sq25KfZI5CC+qPxsT67jYGcSUTzYtKGy5GBPrEdUh9HU+pyX6HfhVPfgkzGPIZdpAEZA==","shasum":"2f647ba9a1df06f051bdf905e982c1e03fb23cd6","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.93.1515.0.tgz","fileCount":21,"unpackedSize":68969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ7HCCRA9TVsSAnZWagAAsIsP/j7udv3UqGRVuXasmaMP\nfyVOZ34pNXQCd/R5AlIm8oBEKVRxA60hZDShxeT5RVhLgKIDlNqxALLBYRJJ\nvuEyf8ppxutRU793c19BoUGZnpSbnZmQi/YSnRMmRC4KwI4IQKEBMsRcEtSK\nIZNSMKTKRrvl0x8bTolwLswNp8/araOpq4zcNR9LIC6YFCmtHIpo7KjB6to5\nqwATUoQv5UjLu3ky9hLhC3e4f4bLm5DwVnog3RCcMligCKEo/yD1lrK4enes\nHjuMZiqobWDj2f6LbhgpsbxjrUg+vikkgnIoKbi6MwPjLcOCRnCispCB3Ycl\noJafQqNW0l6qgCl78r19UU/zqH3BTPAiA/Kh9OoxgxY0AT4dN0KovYoHWVzU\n+vGUAKeV911+YP4Ptgn2+ZNqv7VkgX/J1V2cR+EBM99vM7KYTyWsWxg9bWtT\nL9IWXHkTba8FAD2LZPcIC6sq52i0XHQr+lkIYM3cItQAYSINJZeiIxLs2B09\nmJJyYWeKFOj4F5xOECMs1rsOnakIY4277lTpF4bSzBeC5LgWmHeLcHzyjqD7\nooCNXUs1mssSMPOGYE4L8a7/eKZPF1H5hOand8OwfPN5uzVniksI/Twr6/FK\nE5AVf/pogkFg4iQt8s2eMTjqQKFgvMVEq55Jf0+MQr6RfExyKi8ZpnTSLVPp\nT79L\r\n=xAv6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQpvrhoCLier6M9dUrOlhT9/Nuo0tHBfYqy7Se8ug5BwIhAIsM7bJ/v74XQ6mRgSFJT7OOLzzsABZNQk0bfemYk6G1"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.93.1515.0_1598271937749_0.3407755458086452"},"_hasShrinkwrap":false},"1.2.43-canary.62.1518.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.62.1518.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"9.52.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"7.11.0","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"7.10.4","@storybook/addon-actions":"5.3.19","@storybook/addon-docs":"5.3.19","@storybook/addon-links":"5.3.19","@storybook/addons":"5.3.19","@storybook/components":"5.3.19","@storybook/core-events":"5.3.19","@storybook/react":"5.3.19","@types/react-dom":"16.9.8","auto":"9.39.0","auto-config-hipstersmoothie":"3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"7.2.0","eslint-config-prettier":"6.11.0","eslint-config-xo-react":"0.23.0","eslint-plugin-react":"7.20.0","eslint-plugin-react-hooks":"4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"0fb6af615307c80cb8fdfbf625e23d3cb7597243","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.62.1518.0","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-CO+RoIjLMY6o5l98hQHzQhqAzGoEcmaNJRPXLfvchpxCDhgbI9LffJdafgKPNfWS3az7HlpJmYsJoSqhnXnCfw==","shasum":"70e360c7b37b2a90f45e81b743560854bd45ebac","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.62.1518.0.tgz","fileCount":21,"unpackedSize":68950,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRNF4CRA9TVsSAnZWagAAYX8QAJraQTTPtn3XEA4BReaR\nwGfuPxzYHB7FhQ0d9S96okDM/iTCu8szJ7YQgZEi5NBtj3qgpd2NoxALJpCK\n8Y/iPQE0N+iVcLEUVR77PHzWW17cD4LkA0ii04R0Yfwlgo4Hayxg5tlT3Vws\nQIlw4MvSNRPBKrVnaOmsQSXouo4U0s+Ro0t0XN618ZveD3E5Gb4S5D1GrsVY\n7N2aHqFgVqGaTRr4Go0OeG384QOilWhValoJ+ITCzZM284sI30JUhIwB7/B8\n6uG8oCffT+qX60GkxnfAxuaGFVfdmzHRHnnCNwSRzVWYjW9TD1isOhhG5Hr2\nqGLY49RMrSA0U3jAdMYkjA4/kVCTL9J2JI633vtIvDraM2FGGqiF1K6Sqi1n\n7Fp8UztKVnUWapd8bsnLFTS6GB/kh098oqm1ka5v1FXmBD7Tra2UflawPMgO\nD3FS4FjjnduDTSn1dHhZM59YSnx/Y6mFkc4IzjwXM5PCIkciyiegrHc0ukHU\nIUD1R4WzwclcQxvmhuYphe3ey/dASNs2xXSND7JrKYSW4IslPUB0Fjp90TUa\nEUS6SKAuODW7NaL7PWlhLcIdHe9PDbq9fueXexx6D0Glz5GCeOvmyISCu2/K\nTN65Nrd7555yjs4zbYd16Ftej0mPmWBfRenkR2CPFTy00UlOY0UN8pVdcwNc\nZruT\r\n=f+L7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSjETyb+uMg81RaRwuVGzeaJHF1t72cEf2bJV+kC7dlQIgaBR3fuEu/zMkc+jqM8/KBvUJeFYHP//BGfjzCHv0lhg="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.62.1518.0_1598345592411_0.9637077193082952"},"_hasShrinkwrap":false},"1.2.43-canary.88.1521.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.88.1521.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"10.2.12","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"f2107daa16c9ad80e42badc9f581a3016048b735","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.88.1521.0","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-BbtjL3DHlotYxl+Nde+w7ZMq8IEo2SorCFprslizlbgpylLatxOhXXN0hzQNFPM4r5pUMu1v3ViDqrZCJUHSdQ==","shasum":"0c13f9acf69f226f854704dc800f07024f207f92","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.88.1521.0.tgz","fileCount":21,"unpackedSize":68972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRPAUCRA9TVsSAnZWagAAH3QP+waeGindccIn5G/AUhJ5\nFimVCiUjqDyFlPsi6k1KkoWiwb1PPuQf/RwXSRqGAA9trRFHNKoknsd7pCNO\nF5t1iyTo62bflKMgIZTFkwr6tZgl4KQKM11bY7YLu5/EbefpLW8l3R/M+Urg\nd6p8wdl15PkVyA6gHf9MGGFYp8DCDSgq4M0s+2LvyHDpHqF9huzyJhC+z0n9\nJ+EbqcPOhJNetwGwA9T+WFeEf8lDUtiBbscK5GMeeJ58JBhcqHEMvADa+kLg\njh7G0cy7yenQbcYKZTOTxK7DrDtU7mVXgAvqbTokLBZFonNnC7MX/nSm0PoN\nID2UEtNmRAMwwdAGQr01bBqpOBJRcKAlIQ0Ct43V/FEeyNqsngbzIvjuNz2v\nYG7cr2SkjW0wmglsoQn7tpZOjg7SJXcXJMHUqjUOdC0My70wWgomHGXsT8B9\nEEHzkfrhDmQpsN7m9En0yFBITaHAT6cymuFqlYF4F6+L2h9XpSTBHUJHN32j\n+fwnZlnBkuys2+IC2QJpvNUXi115x0uF7YPkM31OBHRG+RV/uj41IFvt844d\nB+D1GCv3CUQLhrO1NIYReFvEnX9Jjlm3qRoImcAwUd5WXWQ32q9P0wZUprqY\n4Z6ZmO++wz0W+JMSh3cU8IArHDFAFfD02NxlSRuvGbdvmLIcUIKmtO4hdrfm\nVPUO\r\n=I6Bn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4ZXmQN/+3K/n3/dN2kloOQFrXdLLvk9Z1VxxXsjnw1wIgPez1cVzkgXuO9NFU7wTxQTrV6H6pwx/u6HkVODbzVEs="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.88.1521.0_1598353427528_0.26748434851790526"},"_hasShrinkwrap":false},"1.2.43-canary.88.1524.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.88.1524.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"10.2.13","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"a93f3242c9bf03f1f78254c51ec0a70109cff428","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.88.1524.0","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-XzEFNbtIbjNsZr8iyGIsMT2EmAnikTmd4lmqJO1Sb7KvpOnZ5P0GNwRzsT9mH3hiv3ZTMzyf4pXHOhm50hv52w==","shasum":"c97af87727e4459b272a350221a5e1c631a4aeca","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.88.1524.0.tgz","fileCount":21,"unpackedSize":68972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTjmCRA9TVsSAnZWagAAQm0P/3mz6fsZ9UZR8ZQpIjmj\nF4XpdHHF+Sc01pYVYbZ5hvuuq+0i0LfTJpHvY+faavbhr34WeNEW3UaVI2fG\nocx4f2zWvpvBCyszMIQCf41lCCbFWakZpbQkmqtnorxP51w6nBu1sGppX78+\nVkUXhfkJ34nWU6w/MCqYnlMdQ57BiBCPYbl9C4L+W/ovzZXy2Lml2c0Q6Zyl\nQUIxsi5tR+1Lv8HcGL12LQSTBmytNiXat/Y0MrlVjOAyAzclS3/z29bKDQ3C\n3jDVrmLD4SxCqDm6m9GkrmztiHH1dM9Gs57P6r+6+bK24IiAnL3z4dxqqEnN\nCihcTrl3XEfLoPRYGrIND0SELBVkUbJ3l24fd8oZvZ0naIifMNNQ8cwm+Ws0\nYStkO4heptNH3sDxUQHXOTrRCIDgtOwwj47V9CUG8FtkhHDjRG6MNqw5Jyeb\nvQs8hDkUV6XKR4sAy8OwT0WJoKgzfy4Cp26H4egL7CtVLTo2/KaH05WdudJr\n8IPODV3GWQas2ZrEzCMYistuyOosrrDOxrVsUATy+beHtKFnIJj3Be851cKK\nBiKmWMwCOTf6jLJqirndCIp2JTcg84LXQUzdQRlyPCulvhWH3+zJTSWmSDju\n1JyJS8jQtMpa2AIjKp4RXzWF0NDjYAME20WgGsNvayzoiWyXcjxSIGSBQMEb\nlb2c\r\n=E68X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFx9gC8AibCwOKZsiNwTb8MwprKawiHzFg5DSWWsNP/aAiBxYi9Uv4pV7SYT+4ZEH+zD/Sh0XUTfEi08XzhKZZHMUg=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.88.1524.0_1598372070087_0.2515920078570051"},"_hasShrinkwrap":false},"1.2.43-canary.93.1527.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.93.1527.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"2.1.1","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"1f84882dde906e08b955bb1c4728e9e7d26a7f22","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.93.1527.0","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-F3wh5nzA/021ZIml6Kmdtr2CR7Q9Z4mp/eAcEwOTLThnYmBpiJSjWAheK4G9SulyLotdcoKFg2GNkrnVSiqLLg==","shasum":"7ede88ddd5c6c21ada6618a190bdb32c325fb666","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.93.1527.0.tgz","fileCount":21,"unpackedSize":68969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfReVACRA9TVsSAnZWagAAZQgP/2XyoNR8n9MvY5IuNAcQ\nEqiIyTXlBgoj0VIymXdkVxNq8wKD9fVdXnC8ANI6pM+XCvZl2fCHZoh6kBRf\nxhfR6iE0cJ45nRY7gdQbiXes+OVCSM6EychlOa5uCbsCGkHfw06tvyDmRaSs\nJ5cTNFfljK1ckBtRv3kbZWUz/zB1cAEh8OHLMtdJs0bdpmbbBL61iLZ/uLUD\njlZpeUpz3XzCNKPlqO+vhgdkr0IcmwUpqfL8GtfBaTO5FATS00u2teRofIkx\nyrIZiLay1U8FaZ8VGErlv9/Kc0YG+AYkQYPLumJ44g76lG9tsMZHYZ+GA1D9\nRti94cCAnBbYPNHJhHnwK4IMNCZ6Fv2nqxH39K7klKQ83j3g9HgG6yemjcjg\nlQ4JLonvauJWby1tT+1eK6d6QvMMfEkTTbLSHp2gblj+Q/AzZqnFQZyzPSoS\n4DaSfFJWi546V2rlk3fVUi5m7fNfpIHECW0u7namYPL1A+6mKEUhmaKzgsaF\n6kZWHbqdPw3tcwjIfIaze8mQ08emw0HmA/FIlYdYqF6/zo31EI/t5crJFnbu\nsgOnuX1tBHmTkH8pZwxaq06bfIpJ4diubYG98iVl5Ue1fD3SBqI0nRvhpnH6\nq+stkZTbsUG4j5wtZ3BAmOH8M3raMMlZuu7W6bj5NVaq4YGhLn8zWGrpnDIr\nDapp\r\n=bodf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5t12b7QtHVNpdvhUD9VOwV+Gg8Rjb1SbXn6IvruliTgIgeQ8c40w2TpxKLO/oFneCAHX6ubsyknRoHznxeaNxIuU="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.93.1527.0_1598416191453_0.4076925911356879"},"_hasShrinkwrap":false},"1.2.43-canary.62.1530.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.62.1530.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"9.52.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"7.11.0","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"7.10.4","@storybook/addon-actions":"5.3.19","@storybook/addon-docs":"5.3.19","@storybook/addon-links":"5.3.19","@storybook/addons":"5.3.19","@storybook/components":"5.3.19","@storybook/core-events":"5.3.20","@storybook/react":"5.3.19","@types/react-dom":"16.9.8","auto":"9.39.0","auto-config-hipstersmoothie":"3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"7.2.0","eslint-config-prettier":"6.11.0","eslint-config-xo-react":"0.23.0","eslint-plugin-react":"7.20.0","eslint-plugin-react-hooks":"4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"19bd5a158f240cac99a6ca748d7e248951b67700","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.62.1530.0","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-aH4DKpgirEJY79Q538WtU0XiYKJWOHE3tY+HJG3CthATeF8NlBVmvqCwH+gJvIbz/DStGZCKaOvO7BaqxtzEKA==","shasum":"a492921f524ee4beea02c8b97fd5951424b185d7","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.62.1530.0.tgz","fileCount":21,"unpackedSize":68950,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRpXUCRA9TVsSAnZWagAAM58P/1MyZyk6+4z87MHpADT4\nK4CEkl0/G5+K2u3i+V7Bbg6nCGrHS8soDJd5I7mX83kfk8qQZw9oXYlGWlni\n9zQLypqWS286SZDf0s890wH8xmRv95YQ4xRWnV4ay+yQcOqDwrUYiLPKJFLk\nhyA7eWZoPkTs3+yDU0Q+gQc2yvuma2pTveK4mT5mBRHvpXCjOKX/Z7HyUF+k\nSHpSQDGa8ZMVLwPEXTgSkWFp5YKkRnmkgHpZs1WyeiZ84lQ6u6WGoD7ECYSN\n0iFkJlzIk4hvY9R3M9LEyO3VKZh5H/lkrGOVwR/4UXjWzo9fxc+VN/8iW50X\nOSWY2bbrF5vjmX9qAsqnwZlyx4ZeskDu7PNyKKOXJAhhlPuh2XUAnAPmyxhc\ncS0cf/twdG9ppcB2mgCY5gv/qA5d4/3edzZBDemzTr4yksfTs7UfcEmEMDKR\n6H2OiJxJcykYF8tRVKqnsKigcfw2ZkCRTdCatVbv1Om2kdOOvfNYj5sffkeA\nUtACuSFY6I4fVdrN7v7oYUpiknxNCtNarWuLeBlVL6MPd6Zjsew0pSJ0Qn6v\nQf7oiS5KIMwIxA7XOgKWkPrXrroBBDU2g+kZZ5DUmolwbyNhsPCN2POJIPY/\nBL8rBczTJjW6FcLynpzDDu2SwXGPTHIfQhDy71v1AfgaFz6HZHTNjZX53wNl\nWmto\r\n=5B8O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBpy2uKTcfVM8GazljjE2NbYHnmrAz1b/bU6IXAVYX8wAiAA0byJtaJBr1wdQVIinEPMX2k8ef6J33uMES8+YvDWjA=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.62.1530.0_1598461395404_0.49598804458390444"},"_hasShrinkwrap":false},"1.2.43-canary.62.1536.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.62.1536.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"9.52.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"7.11.0","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"7.10.4","@storybook/addon-actions":"5.3.20","@storybook/addon-docs":"5.3.20","@storybook/addon-links":"5.3.20","@storybook/addons":"5.3.20","@storybook/components":"5.3.20","@storybook/core-events":"5.3.20","@storybook/react":"5.3.20","@types/react-dom":"16.9.8","auto":"9.39.0","auto-config-hipstersmoothie":"3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"7.2.0","eslint-config-prettier":"6.11.0","eslint-config-xo-react":"0.23.0","eslint-plugin-react":"7.20.0","eslint-plugin-react-hooks":"4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"8c81df1c902f0658bb05a319267029ef794326ce","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.62.1536.0","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-pGXH1jsBcuKMLnhFKXf2Kb2PtQCSAmej6Xq0yP9KdDRHo8QGqK0olkWhkCI7SiiN7fhxOIHWic4dTQfklXL4sA==","shasum":"9ca1191cb20cbe7dca94c984d31cc519b1871435","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.62.1536.0.tgz","fileCount":21,"unpackedSize":68950,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRppRCRA9TVsSAnZWagAA9W0P/iwwTy2jyC/w0zMdm3cn\nYdBT7LSN/qoUgnUIxqmkV+NLkDe+4AFrAUzZiiYTw7obZ6Z1IofeNQz4/MF8\nxkyoNaAmm8cDAkmQPuXOjKVkXh4BWdWODHSMEDJFhxwJfmANdjLOSwILH8I+\npfCBauAEB3U/ZalWE1FkjkFF+NuX5FwN715a/FOphTCiTrAiIwsVC1Sp5IiB\nQAH+pD0zAoqektaJ7NED4abmdQWixaGbH5wLSYBqLadr3qhzKxPkFQI1idWr\n8W4K27aq/uRS8MAx6ixVhRRg1PvwdaCn57Imt7LugbiBbc186XQN9mf3f3uf\nvS3ELY/G/c/x4/kwnYwd3MtXwMGaY42vFaWXQEFrXA1UgInIH6Ca/TR9C2d1\nQniYSV582KpbwihQmAS7isYQ3G8Xf+BbFT4Gfvocdb7hkq8/Q4mNveoCd6Rx\nX4+i1betcCVbSGygTnz19HVnTNcn2IKoj+Lv0Gk2F1ZTrKgep03gJ3AROhGc\nMWHFGjeoy1C4OmLnBm0zo/JgY5qVKsCeK7ipWJBFj9A2sivn85yNlyiZ5uid\nQt6rynGgC8HgDCPSa0puvvEQLqLxz0+NjlhvqdNpJq5M/J5ZIKWvFxID3F8k\n8q3QhF/xkehT4Q82d2WzuEyMUh4MLSbVOrZG3GJC+KcTqbnEIEb/OcSWV3be\np/da\r\n=yXuO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAPTZAVd9dUKV1RBJL8zamXlcHB2sfLzrfiZUEBdCDy3AiAuJWcuE8Dp1IuYlPvcS+Pb3pkvJU/RQXlioDmGWEBavA=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.62.1536.0_1598462544469_0.6550248205293274"},"_hasShrinkwrap":false},"1.2.43-canary.62.1542.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.62.1542.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"9.52.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"7.11.0","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"7.10.4","@storybook/addon-actions":"5.3.21","@storybook/addon-docs":"5.3.21","@storybook/addon-links":"5.3.21","@storybook/addons":"5.3.21","@storybook/components":"5.3.21","@storybook/core-events":"5.3.21","@storybook/react":"5.3.21","@types/react-dom":"16.9.8","auto":"9.39.0","auto-config-hipstersmoothie":"3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"7.2.0","eslint-config-prettier":"6.11.0","eslint-config-xo-react":"0.23.0","eslint-plugin-react":"7.20.0","eslint-plugin-react-hooks":"4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"c61d3fceb931d0762bc536057bf9ad3686a5d101","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.62.1542.0","_nodeVersion":"14.8.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-5i3V1jy/voLXNT4xLlSQOXDGXQqfky/Bw61GerG8rEf6A7Gx/kJrkMkM6Jko432241eDTz2DeNMscAnEnMkYBg==","shasum":"094593aafe64bf86eaf6632e9e9377a8ab2a3812","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.62.1542.0.tgz","fileCount":21,"unpackedSize":68950,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSE6sCRA9TVsSAnZWagAA84gP/RCStX0/+0RNOXH5hlKS\naLbaKlI4f/c4vl+j8I8v+mWY22Wk12bLz3KU+jKZofzFsYrtesYMf0Hdk1aQ\neO23K+Thx1HP0CxLDaQdDCBGnTOhPmzEropF7fGrJkyJmKVjLTjXzxGgj5FM\nK/3I5ea11mNha3knL/mCAI7ytFiF3J+yDaeJqa7IrUDKZxl+089GccX6Rugi\ngTKyK5V/LJ6YLNPuIfcC3AEZuuxiQyCAkM1YOmVzm5MORh4xEDwbpWOOaQjI\nf2PAYbo1L85aUjAEAz3L+vv0hrIUNcS/U+PHP5mVyPx/5+9nOjlCwJrELo4D\nUi4ViLtMETJYE7CQkDhl7/Kh2c301E3kTUXvaSxQnziK1tsNe2DctlqK4kpz\nrVSs4Hcd+b0J33pv/bNE+IndOWeiOWj/yhP8RIjTt9Nr7aBfdo8GHhTFuUIn\nn+iyLne4gBfgUI6a/HzzbS81pde9+1eFfQ1sbp6v25gyfG80R8nbemPg+pHi\nLOSHInRriYcQAmvhLVcbXfC0YgbIbYAx712BPDyfELOqAYIoRMo2+viulBOQ\npiOd6MwNEsIxKSOfcEfZiiU88uXuSXErL5XC2x9kcm3INC6fG1nqJ03MxMmC\nbDB7xwmcOkI5wWh5f4WdoO8iscYFe8odyDKs/jzm4GkNBEYg5RBVNk+W+fpx\nLc9G\r\n=Ypv6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCti+P+2yvsWK91139pfOKvdZf+HeITYY9QC8fmksP6gQIgKLvRS2Jc1xrRn0/IZLOXNYbSvdqd1P7D1SS+/3+SBso="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.62.1542.0_1598574252341_0.6813631281893597"},"_hasShrinkwrap":false},"1.2.43-canary.73.1545.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.73.1545.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.11.5","@babel/core":"7.11.5","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"99ec35696672f7a725181251a1e93212f24f3669","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.73.1545.0","_nodeVersion":"14.9.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-u+9MA0Ze2EqQM5tQGbt0ZF/cPkCxJNVcpXfCWbjaCjwcFzioBqtbnq1QuFH5fFpHbhRnybfpkvp3ZYPAzIy+Tg==","shasum":"f2d7337d3d2febc378ec1f3644d76e7d03fb8470","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.73.1545.0.tgz","fileCount":21,"unpackedSize":68989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTVyvCRA9TVsSAnZWagAAJrMP/3485nzfNgLhBFkc0O0+\nC3lAQTcl50D9sK4mOxFHn/ySD9ntU8+0Goge6j54c2Ynb6WfvMSZ8bcUfb44\nkjm0Of8AgtZD1UCcLgCV6I2YWe7+1i6MCxEErPwzI/R14uXKM2SzUYY9ZvTz\nN7ShahjB/LOhIo/rHQze5cdz9MTEu4Qzc2NCqsq8cNG/oVpwHzWgeIzF1CxG\n6346Lk0hGJmcye405aV7m/DiAYWoxY/43N9fAvGdg7A+LHg0mPJ+RFYkDXR+\nhKWElIfqMESFrI6HkZIhYKuuGGV6T1NsY99ECeshExxyqjRy5xX63fwSiCy+\nAQnahnr2XOCAEnYUDEEgf3uoPQXfdlz2AsWR3aW8g52Ahr2gwjELIFh/ciIC\nK8QFo05HPuxnQZKfA+6Jf7i3WvmMCa2ZpXakDbaffouIlXnhqJFoHmzqeClP\nJGkDXAZ24bP+au6+JvnCNI+8aZ8gv5YM/Gjevi1odHNm4pmxWJ4Jyb66Xq16\n+rRJT9uEGa+HyZV+pDpGrvKC7JsLJfwcyBGeT0/VnMEWJ9IXbbI+mfhM8c0V\niJPj7NC7YJcmDEMekdtzupee1bJmGLDOCm0VcV+jQl69eaPVgRerQAPwh7so\nbtduBcl0C5iPhqpWo9KFA+cQHZpwDRG6MKCTp+ci3uwsnwCW4dpSNYDeLMvZ\n2k44\r\n=8B6c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFrKwuKld7+ggk9tcQr1zgkveBNZoO6JaRHch8bvTJT/AiEAuKAVOM8HX42iB4oBIykviIOM1Bhk508sTjZycSqcB6E="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.73.1545.0_1598905519063_0.40939392077412706"},"_hasShrinkwrap":false},"1.2.43-canary.88.1548.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.88.1548.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"10.3.0","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"450db55bd8bf9b096b59d04a2f5e0ee83fc49760","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.88.1548.0","_nodeVersion":"14.9.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-PlSyuKSOonBer2bumo0SZLXNlWICm69WKoJhohtd0ZTFNVmHo5oJYg290s4uf7lVGfb1RQpM5zQLaZKjBtkUSQ==","shasum":"847cbe14d434203c7243513098898abfbd018641","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.88.1548.0.tgz","fileCount":21,"unpackedSize":68971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUKmACRA9TVsSAnZWagAA4kUQAIz3gBVvhHMt5iL9UMPm\nE1EgnZ50VVl70vpHPXF155+D+oADdiIBxFmfZKMulQg67OVCRrf4GoEiymkq\n+83ZK/RDL891WdZx2JeiZaCLEHH/pZkRGY7FdRqbVFr2Bewt0J2MrK0JnBnb\n2rRIaqlxd/pQ3MxlzlZQmZfys8tH7XZoQBwCWlAJ181diplq7TU6VUE+JwFF\njAL0vHKgMl26+ZWicCwoRJ0QVSx4XrIPLe05LjV9PvlOJZtvrV7WuREK/8XT\nsn/Bz+gCnGNy1Qd8Jelod5IKNKO3NX7thwFNvlrmRRMgUq5Zla0sK5PruL3s\neSL1bHP7UR+B5pOBxMcuY2E4xOpJTA82Rp/Ua1aAnYiS9jO6KI/0po0MA0ea\nJOCQ98A+iqaylIe6zmoYWsRCYlQYyfnVtWSGU7PTdSGwu0eCZivew3xP+I7T\n3tkBAgpP8LmABW88vjJfPibkcQhsEPCzGuHpTl27V4+HY8AeovDjPzc86dpv\nEhXdRLrdHci5ixPhGuvgJs8dF//IzQtG1NoxoTxkce547rHC3aisgSp1+O07\nJif2QRT28LxUWLJG9edzyzQTBtNUtzNMyt9ryFQ6ajzj/YUbqPjGNbJ8f5M7\nwBMjUyfqXVUcKitXnI26dCHyWqZ5yGz8H7vs/+lkk5PcnUxI5aHWjr5iX1Sb\nGpSu\r\n=qFP9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGYyk8bdM41OItHkdLh5KOeaLjR750ajzfzM7aZ5/vL3AiEAkLsLjpHYFyjeipHbdJYswZmw5R6MVVCmYPup7TJY5yc="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.88.1548.0_1599121791592_0.36607088465574833"},"_hasShrinkwrap":false},"1.2.43-canary.73.1551.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.73.1551.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"d7079f2ef6a57d0d401962b69daed1a61c988ac4","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.73.1551.0","_nodeVersion":"14.9.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-5iU+DUX/9lgN60BVRHpWTrO27NO7htUde3D0xkLxJ1CaCCslX8MwvXbUd01D3Ts3olvMeIoGrLBDw8QGJuFj/g==","shasum":"dc1d2243346c8a96f7179253ff012559dc92e9b0","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.73.1551.0.tgz","fileCount":21,"unpackedSize":68989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfURkrCRA9TVsSAnZWagAAAvwP/11psSkjo3SPZNE1fop5\nhUqcfv6zXmwNiJkQrDBCl8QTM49dEKocFxDtMmECBk7jRgBRSeoQ75sdMiKl\npWl7P2Kju7wgfJmiFRna2fdNFg7K8gFq0LgTi5bFgrYmplIA7szLlgSzzxYY\nVvPFbxfvvrHPS1xJ0AfrFmyXXOq58PU5DNANtp7JjzCRd+ZyT/SqVXCRxxZE\nk+x+nFU8S3Su9X6uBbKFkB8GJbUdxPjHBPQ5b4FOk9teIqzV0wA6PjfCDqKo\nsvIlCagH1wAWoyYpXqrgti+tDwT85hvYOVv9+0Kbs+AFBeqy7r/bnUe2Rwtf\nMYybEk3ro6z95nDucv4QJRwaA/BGQj//AimHR+C83zR7vhCoYE7yJ3SGaUca\nxjfS8aL57b4gbyCySClavxwFGUfpXBS+XsAAmSFfqgUhaFb2787FONiruTQ1\nJZ5SqkQ3EGz9XKn5gmLr0nThJrDFxuoRZXundfH5DF1oNQ6h4Mjy47DFBbvK\nEhFEGPd7lwkKqdD50Oajo2blCKNFY3UsTSGqXEZ2AaxO3dWQoThctZjU9YAG\nWqJeGbsrjVINuQD3uBv4uEPj8hxOoyb3IsdHfMU2IXHuQHfg11POYcLHGINn\nJ+TJbU3A7imU3CIp+2WHQLALnzK5YE2w3MxrgaXh11gyIBoog9jUCU4ZvADU\nphot\r\n=Ap6g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtZx8yALwuGeoJwdcisvRzqjhOlFB+f3RtmQt+JI6ZNQIhAPsIgt+O4z1JuxYLZmD5anMA3pEuK4JjMBSjimEAEq9P"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.73.1551.0_1599150378972_0.8870162458638282"},"_hasShrinkwrap":false},"1.2.43-canary.83.1554.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.83.1554.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"4.3.0","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"f348857943784a277a8a9678381c3397c529c860","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.83.1554.0","_nodeVersion":"14.9.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-LYIFehf6u8smN+ucw5/+TFKBCZomo4F+nRlQ3CdmFzIviO/IfOx7mUHRPAmWEbrTkT9sb2zL9bdVB70MEsPj2g==","shasum":"88861b11d7236de6bc7eaa5229faa5ed42f1e2ff","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.83.1554.0.tgz","fileCount":21,"unpackedSize":68970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfVg3rCRA9TVsSAnZWagAAw8kQAJL0l5L7tmg8pq3mQbRp\nTJPIUCB6QG/MKe0bNAtV8EFUAb4kMEuWvDZRP9352nANM9j3CXqwIvvsi7NH\nQ4XdyOD6guh/V5DWkymczqVrSwhpALJLfeKDfFXI6us5VaIglTOb1Um4Upj/\nKJEysqCFr5zw8iD92cmjtKZ7dOYY6cG1M5s8bQsxIg1pQuwZXT8/rj23ahvq\n4RLpqMDvJlX+WwOcO5+GPXAEbM5BtSx8XJEcMpUvHO27yXRIxgWEkbW7cCmw\nZTAcfh9Kug0AC3UcZS8Wi0XA85Fkjn9/LOtpMv/fDQYZkL6mVLG2Psru2Lnj\nT+OZPc2frhiFVax6MunlNMUi5uq3se+zq93BgI82aPWNc8vwBguHdwqmwd+E\no0WRmIzCAOybt5l6DPt/SUaSFts16uXibDxULbI0KJiBum1nogheqkZ7P82A\nodUMLfq+g6Aw3lodzOQLux0xIMvUXmeeO9Hib7QEgaVnzaQi4fOnkbRFTSan\nUXHo7foL50N7koiC6QOtVeuCRaBLmZsj04TqjXO6QegT/WqGLedNWYI8UNG0\nGiRvx25OTbRuBwqMtDSil4jwtPh3mYFfvKrXVae2qMuLIwq9kY8zUTvWrR4Z\ncJIsCZvz9kxgwgrDUU8QuJvYn7G/HBCsZXMsxd7j1YQrWwtKXUkQuFYh4A0b\ns7zF\r\n=0y8/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICbkfqQGrdcPrY1q3RVEp+Er/10vgAwio2/3ji+BF6sIAiEAmno0yhuPv3ItKYWQIBA5KSsY/tvceLG0PyEl4sxkpQU="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.83.1554.0_1599475179157_0.9695366899091042"},"_hasShrinkwrap":false},"1.2.43-canary.62.1557.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.62.1557.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"9.53.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"7.11.0","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"7.10.4","@storybook/addon-actions":"5.3.21","@storybook/addon-docs":"5.3.21","@storybook/addon-links":"5.3.21","@storybook/addons":"5.3.21","@storybook/components":"5.3.21","@storybook/core-events":"5.3.21","@storybook/react":"5.3.21","@types/react-dom":"16.9.8","auto":"9.39.0","auto-config-hipstersmoothie":"3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"7.2.0","eslint-config-prettier":"6.11.0","eslint-config-xo-react":"0.23.0","eslint-plugin-react":"7.20.0","eslint-plugin-react-hooks":"4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"0d32200fc6680c7ea366272a18088cd7f6debf65","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.62.1557.0","_nodeVersion":"14.9.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-by59qcGclA2VBKdzFT+GEv9prWdiN+GvMoP52DnWc+airK3YiaqcrnWNjvSUgNY1vSrBhd8UzRyH8xT27RpXLA==","shasum":"2e489e02beb4e805801fee5d40eea8dbeb2a4c99","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.62.1557.0.tgz","fileCount":21,"unpackedSize":68950,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV+bGCRA9TVsSAnZWagAAIhMQAJHUEVII/X21FFjQOZEk\nwuYthRsqXOlQeppD80cHfMB2InQCmhBpr7TxmgsvmnrFDj5dFGiB7XTQPfNq\nAMIp9qFq6T5hrhc4NmQJtLdugLIbVDU0Gu8VMIJamqkn9teQkrc9cXu1kTh+\nJuokbwx1efVQr599vH0om/JwMwt/le34pnVca9xLh3U8thzknydJqbKsQ8yq\nO5DFyxiKAFZ8JjP7+jtLoZ6YTRIS+PQzR9ECTJKF5RcwY4WLLPBumGkbQAb/\nqWgYVQO2TtdTtuaXAyoxue3U+doIR7Q/BuVklHPHg4+nurmB3c/ZZ/dBv9DJ\nOlwsy7IybBeS8xmDYhhwSxFLyixbjT1tSGEkiB87WSfsuQjMmuR4FFaslse+\nuUiJ9/9BEpp4RFirf1lphadstAINAjT2TdWB5OqZ3HZafH65p14NwkOwnIVw\nLu2MNSv/azI7aRkTokpewvj+39YN3SE5yZd0IuPMAfyESb8KGgWLV8wPA6Ye\nEFaCoLX4S/ZtSUvAywpCsFxZpcpB9T/iVzOYE0NR6bfbim2ByuWrUxu/JeOH\nFE5uNrqQ8joSJgyvxul7Fu5URjXySOsGUoasQdvJ5OO+2y3BFvPP8V1anfEw\nnjKyIv0USs/6LqkQziaLIEJrEHdp7CDUKvtHRzH+r0u4GbRFUVwHQYgyz25S\n00I0\r\n=bD3g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5VTym4vsipM9uaPkLOfPSFfLU8SqHDVocGDKNKQ/K6gIhAMhcnQ6cLSTx51V8SgISYOU+k8V2lYjoImgH4EouV/iV"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.62.1557.0_1599596229853_0.7615532517777077"},"_hasShrinkwrap":false},"1.2.43-canary.115.1563.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.115.1563.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.4","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"2e8761d948a9791c4323a211a72b64fee1e75ff5","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.115.1563.0","_nodeVersion":"14.9.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-++MVnxaXAU71HQxUy1w+rhzCvQPSbaY8ZO3sdHmQOje6rAkvsKDzZGJwr2LnTFOx67Tq8ZXn+GwNL5QPG5CIwg==","shasum":"ecd39d07d3429733a3e3b9a0e2fa96f0930e59d8","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.115.1563.0.tgz","fileCount":21,"unpackedSize":68971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWBWsCRA9TVsSAnZWagAAciQP/0N3DiFVhmWASp67cmeC\n8Z8/nHyaKhfEO6btFSWI7oD/APd74kit8jTUSA+fNP5bdVbsaLhKSUavJw9M\nTkFIP8PCAFKz2xvRVud/vlX4dLC1qNbBA+lVfbVH+Y5bC+M8U1mJ+fAkxuBg\nHjw7rn8Q5Crpf3s6+W4hasBVc4NCkQ5RD7lihXDzl43xWi0p7iLGpyZclPWt\npgaWufJ9hbfbVbHxwX/0ONqXuaJA4To4LPnviQ8cPfXXqiB6F7Xbf8Xf3njs\nVmeqvU4HVl3h666r3qOmPIQdv8AE+VbGaWkDNi9DMgwyLJ/yldD95ExaA6iG\n7B09Cu3bRave1QTXcs/1XtVHOMfy/JJBXy7LJ+o6HSqCJHhr66KN8VHdIVvn\nETUNhcM5zZVM97w6EPWKV97YSSpTIkv2jfwl0iGZU4mnddPW/iRd7R4qe3Hf\nmhS/p/r/HEcOod1J+PXqnLQKjgKYd08APqrRbfsxJ2spQdBRlTbfGGZ1plFW\n2SAjVJglOcNiv751M2J15LzZ+zb2NsvVRxk5wWURoDj6GVutyVs7jvRASXe2\nerXUOu7jgWs6K+nn7O7Z7Od0XlLpUfx/CbttrptqIEG8uMPltgdfFrqXFd/q\nFXsOe3na+UJE97+1iTP9HJD7dOZM1yMNZm4IoMLx389FQwKPCeuxztkMpdAh\nNSPY\r\n=jgq0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFE5Wkth1yc7wlPcWocpayb2J+oYFHEpFJhMy1nypkrRAiAELdZS4j9GweuiBwI8duehYN0OiQ24qPZ37xF2WXvrgg=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.115.1563.0_1599608235834_0.03439590727639019"},"_hasShrinkwrap":false},"1.2.43-canary.62.1566.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.62.1566.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"9.53.1","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"7.11.0","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"7.10.4","@storybook/addon-actions":"5.3.21","@storybook/addon-docs":"5.3.21","@storybook/addon-links":"5.3.21","@storybook/addons":"5.3.21","@storybook/components":"5.3.21","@storybook/core-events":"5.3.21","@storybook/react":"5.3.21","@types/react-dom":"16.9.8","auto":"9.39.0","auto-config-hipstersmoothie":"3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"7.2.0","eslint-config-prettier":"6.11.0","eslint-config-xo-react":"0.23.0","eslint-plugin-react":"7.20.0","eslint-plugin-react-hooks":"4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"23f6878a8cb164ea3c5925fa2dd2d02f2316e8b5","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.62.1566.0","_nodeVersion":"14.9.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-JG1Dg6s4TVEIwAl3XS9mPQFKAFAW4ikfyISGy6bRT1KIcZKHbTXfEP2k2L5AToBcZIlQd5BGFcjferz+SCbwbw==","shasum":"5531be3a3f305540d191cb104b8db6d9de43bca2","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.62.1566.0.tgz","fileCount":21,"unpackedSize":68950,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWBicCRA9TVsSAnZWagAAH+YP/2hGZ26pZM7vKxVJVQ4I\nLNpKe849wyqZvdYNoLqNDifbfphmoyK8aRI6vVbfVgHGRtuhwQaLqu6aTIz6\n/A26Ep1QfoQcPmmsMQBoj1Vg8zJStwd9zrLe55IYbBgWjSWFGfHl9vMGZAoQ\nIfYkyOQKVPdidYicJj0MrfjYInQxh0c+r3gVcWLntb42IBoeeKYAolX6fbdy\naQ4TeQZSCD/GKOwuEX5xOmHKe84fyIehyewskgvojiSv8z2/4JfYV92In978\n52Kint0ZkXiFU/cWdS64FmUMKg1L1RZI4hSmZtUI0mzc57AgePJFuOZ42l9o\nq4nW+9dALPOHDLyFUuaFHynVwp1k8sbd2+Syhr4jt+hPWQ+itPAjlQCCD97D\nCV0Zzrr435ciD3LJspRWId8jYlygC5TnHLgX2QjkKhpNkptVJBo5U30CkZ9Q\nHFDyBqhzcIDLWcCTWh+zPjfy6jp6Posrf257K+Oit0reIGndSCKwIDFL4qE1\nPgpSwdXbFJ57i0PEh1tr9K0qwp1aP3hZVI/pYYIOz6dTtnXO9tYjlyaCbhA7\n2f/nM4YiCEUuCSZHgbvkyy8nLAS0JeHGhv4O1OTepMxcdCH8EFGJ3MMyvcA4\nOz76JY7NWg9NRzuNSsa8q/iahIQAEJZ06MP2TRKszHjil+8z/0v+eKZwNWCU\nV42L\r\n=rCqs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8AGzV2bGduWbev6pIYezhBfQPY5FJoutblgsLJrtKcgIhAKSfEn92MeKR7hgvYqvfROQ1/X8J3lZtM55arD+nQbeT"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.62.1566.0_1599608988004_0.6404885349407072"},"_hasShrinkwrap":false},"1.2.43-canary.62.1570.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.62.1570.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"7.10.1","@storybook/addon-actions":"5.3.19","@storybook/addon-docs":"5.3.19","@storybook/addon-links":"5.3.19","@storybook/addons":"5.3.19","@storybook/components":"5.3.19","@storybook/core-events":"5.3.19","@storybook/react":"5.3.19","@types/react-dom":"16.9.8","auto":"9.39.0","auto-config-hipstersmoothie":"3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"7.2.0","eslint-config-prettier":"6.11.0","eslint-config-xo-react":"0.23.0","eslint-plugin-react":"7.20.0","eslint-plugin-react-hooks":"4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"1d3b8eb6d3dc4be512b66333c1bc2cf14c9f6236","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.62.1570.0","_nodeVersion":"14.9.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-kX1ShYkdiCeTMEOzW0K+qKfRsKOqEwX8NWBV5sbD/rWuC11pzfAqgjsZReRHkILv5WjhXEzcmT8DKkFKtIrJ9g==","shasum":"e1cc35aeeb6b5582ff3c512061be4390dbfab8d3","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.62.1570.0.tgz","fileCount":21,"unpackedSize":68950,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWLhJCRA9TVsSAnZWagAAScUP/3ePB76IU9qMZ/wZZz1o\nvHFNOWjDdzs8c0VeB416RxXv2UBzXQLPHNZ+wE7YNSRRTa/mjhq4CyDv+F4U\ndiFaH0VslXimb5G90w37Vez4kI+QGoy6/cDO0Jm0FRQl2Z2D7OKp39mQEv+c\nnBftLao0WiyQayTIPtpSouOmFYVTyAXRxrbKf99GONptGkUZ1+6GGKJGOdbK\njZZqvy1hcv+qF3A/tlImI0inP/agG8KRLcetLwJUDP0jgbdYrY6nK76+fYKy\nZlO2MQaP6lIuQMgB/PBb1hoZLtSk+QGo/j3E5Uo10yHA5nK5wM6IJaI1SDP/\nYWenPP4Hz/gDx7lnf+FtVhcNlIoGVsKJYk656XuwRa9Ng0fjQd4mVRONKYY3\nGxqF6jkq0XAD0J08zpM50CpkUukSbJ3ZyO2Pkm+z6yRqA5fcjd8G0a+PCJTx\nkyzHAyKXDho7spMxS7JZr1i0KsPdpS4VbMcS50DPPf/9RgA9VtK/xkRbaE5J\nJs3mQGYpl60cg2PSQNVGPqPs8HcClPVkQaiStbXdrOjI/xWMzLaMnq9GuzVi\ns/ZKHbdd1/VMEgP/iHANw577Qfaz8sBdOhYQx+rfuKDmp6A0gI0dFRO3E01Z\n6GDPvYjqYDe9I8TlIS+89mEUl8QRrzTlXTB4LyLvz+Os55NrslPBqZKf8YTA\n0mSj\r\n=grOE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCS5/lBrwTgK2HiXFz0IKw3APY7M5SokGlkNTrbvQwwvwIgck17ggP7Q5OMavztH4lVod1maOmRlB5ZYTGa5UHWDQE="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.62.1570.0_1599649857228_0.09618833476983601"},"_hasShrinkwrap":false},"1.2.43-canary.73.1572.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.73.1572.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.11.6","@babel/core":"7.11.6","@babel/plugin-proposal-class-properties":"7.10.4","@babel/plugin-proposal-optional-chaining":"7.11.0","@babel/preset-env":"7.11.5","@babel/preset-react":"7.10.4","@babel/preset-typescript":"7.10.4","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"b0d71578a0bad8b09ab2826a93592320522787b4","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.73.1572.0","_nodeVersion":"14.9.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-kmLyoCCIWFrPIhO6xHAGmIoH1Zdto6lUY/xY1VAzzEJ2+FpGxfIkeNZOZn2Q4rsjvjqzYcslYopwz5VBA4tJHw==","shasum":"3283fd1326018d49c503ba7ec935685d48cfb922","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.73.1572.0.tgz","fileCount":21,"unpackedSize":68987,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWLjmCRA9TVsSAnZWagAA9nUP/jb26jbS+FJOKd2ef07c\n8aAbY+m7GAlaq0sawqUGjqG+N4ubMn4yWU8bixgztcpbfy5U2qqhND2j2MP7\nFQKV3ra9NXoYYAjvvlfPAfVcbIid18HxlgIUuxZuaeqJVm+6rPOVq+6NsZRS\ndZj6MJR/VWOddHv4sqHf8awaF+1IufsDPAXwyjl1KptWwaniLjOWMng1vYdr\nj1TIciwTEZVbpqZjrfBqIkwug/B6WV+Qz3p9H3BuVUy+zvYpRi9/KF2QZSHg\no4ahsevsTamE75A/0Ixiz5l33rHByqCRNS6UiDEx5owFiQupWfqSsAVne/cd\nGF0amEwowvRJenje2AEltsqBo4f4/P+O8T1m9153/buddzgdxPA73C4fmGnZ\nWGVMxU4cNLFPSY11u7NqmnenPQedW/Uq/WgsJfynzjfJUDxvlxPifbarIO4A\nVUsX4ZhHKdYYM45dUaG+xP71ZR0ZPz4IxU1wgHB/OqYIs2XAzgj4K8Ql/bPL\nJVhGnAgxd+vh+dckNuzo9JgqstvNL3A46sPT2EgGJ+05cNRiINs+NDSzDFCm\nyaIis6+02wRkh9mwGh8B1kVNbRYNLmSWlqp5nreXL4vmMXKAu1RDxFz/4+u/\nnUeqFUF/EcsD5Ak52xBQz4Ac/Mn2Rx7xriudKl9SZyUahKVJYyXKG+TztOGv\ngyJE\r\n=TX2t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtsc7UYaFUw/u3EjBgsAcAcHcsdYe6e/+AH9gvJ40pcwIhAJYftjZnu4goUdxepqDNQoza1YMYmsYuPqMrhuBfedCa"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.73.1572.0_1599650015304_0.47654938043357964"},"_hasShrinkwrap":false},"1.2.43-canary.68.1575.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.68.1575.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"4.1.1","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.13.1","react-dom":"16.13.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"63fcc75f59718e090fa0dd36c0e41c64ef64027e","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.68.1575.0","_nodeVersion":"14.10.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-5gmwGdHtqfEQ75kxs5/pLzgQlK/XAGR/IKfKiw36ObHrTBqngoNJoISXzwKQV8eKha6EtnROzlUG8dOolnAmPQ==","shasum":"d3c057468196aff5196facc8d2244a2afee5fc1d","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.68.1575.0.tgz","fileCount":21,"unpackedSize":68969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWnplCRA9TVsSAnZWagAAJxAP/3b+MVWQ1tiLuxOclfSr\n8NHYDkZyNgAFrYLemIFk3wWVVqcx75POy73rBOMl+DmSAgwKDZi4b3/btkQe\nDnPoxje66IT8AkjilZ5oPEc6VaO8+O8iXM8EZ+X9VNYrttPeMOFQllkABp1v\ncfKMeETm79rr8T6wCm4PvEXgGr/z/1QjiMy7+xvjfcuxU47cWau01WX6Ov41\n/sJbz28+B6SJOjAzYJQHaY6d6uvs79bWsdLVQHZJfbr40iFBxJwcSuQPVCfk\nQLJx0GjfMdLbn32wlN97qH8kSy9o6hnnyEKLYKLgWmgSZjTQShUoxRedU9Ry\nhldP4vEOe9Mkg4ueLEROnNV/4RUA6MJzmc8sAhVKmeQoFh51CztWDuxfK8VW\nrWoQ/EcnuL/rHMiyXgHeMcdeJUwe8NEKW5cBVYhBwy29Vwm/wol/kSq6X2OR\nLw0Ip9f65uN2y1rCI7KLTEvZ1ATX1fgXmfySkUEFFXhqD3tgnEdL2uumeh5W\nfe3SM4FB7qBHinhtBxLtrB1+DwuxLyefNNqSwwBig7qQKMGWajjqhp01u60s\noG4u3gsGR4BeE3KrkTW79BXJBz6HUqph31cjJgIwUBDAOsLSi6bZg21nTe3j\npIB4KnoF4T9wiBy988F+MDcn1Hmr0xT27TZl/Xv2bBB6gJ1bFoAKtRuVLbk7\nIFSD\r\n=VY8d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHDohQKUhwq09g9Dieuz8HwmtSIcqIHVXJXrl167PZjLAiAhqLLM6FSEr7ukF6qhGp6sIrdiPHJwfo87mMmJBbyctg=="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.68.1575.0_1599765093165_0.617277526019965"},"_hasShrinkwrap":false},"1.2.43-canary.68.1578.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.68.1578.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"4.1.2","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.13.1","react-dom":"16.13.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"580d59a5f2d17cd41b5985fb6e0bb8a0a3a8b38d","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.68.1578.0","_nodeVersion":"14.10.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-tM6llH956VnmXawuVL1viE2kjcUHZjImJuVBa5vWMMb6ufSE2bx6VQUCLWhoyaHlVdNWFI/wM7UNtbxfjMNcug==","shasum":"3b2957696c3b44cbe1f5bedbe1a67766ee89f38e","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.68.1578.0.tgz","fileCount":21,"unpackedSize":68969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW2zHCRA9TVsSAnZWagAAIu0P/jJZS2/eL69uiHUQI7Xa\ncrinlhzINFCq5v52etRV6PgMNksZLl+V/PanIu1VbhDu/zoWKpPD2o7K/wrE\nPKMBWd/6nP+3nxEI6iIGPEDsqY+xNo8hEf3qUnWv6UttJsQ2Z5sT47XEgiPd\nMeKW+ADrDqZSGFX8w76Vhg1xLZ/cuOTHrdtf1jKWAtn9Jq/o37ZNArxnFQsQ\nBWZ25eLuuu7kIfxsvJVKREBS7OBJDeV9fq02WJtXoOjCfFT95+whicEXDSZR\nO68udVkfxF08JIgAom3jqV1p4udVxYTU6M9KUEHP0xWf0jYmXRXhXhBxfvif\nHVQ5x4lTiWKxOlkvMVv2oJGvpqmQJE5rMYrkGrEazP7Pwieq6e1q8BijElFS\n4AdzkGYcghgzvJvfGZDFb1wicjZgMRyZLA5eOFLFGJUYyZ2oC3XFtcBZYZZa\nDFh+j2nc4Muw/kWQbzT5UVytgcgRNNy95Io8jEINAZibN1oLqpUJstPLwjnc\nH086uWCPbsLyhjXsp1ezD2+M1xt/7gmIiO+E253EgTdgvas4AAHA8wETshJZ\noQhoXLHve1rwLc9waa2oXMdVPihoK8VLAR3arzgjIbJNVUWuASQf4atc8CcI\nc7cQ8Qj9zrkqqYxFavk0aU2QqcEpM9w7vgnCF1WzpWyJk8dng75DxwENfjW8\nUCbd\r\n=lyrV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTRuLjPK+6VKOMQbQkY2Ru8tKkdBXxtF5q0rQImg9PUQIhAP4PG56+ARM7LOrxiCSvAv0l/Bb8A7uyGsk5y8sWogL6"}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.68.1578.0_1599827143047_0.9565471928872087"},"_hasShrinkwrap":false},"1.2.43-canary.93.1581.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.93.1581.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"2.1.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"d8749336117602f78e78ea7414bc757fb333fcde","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.93.1581.0","_nodeVersion":"14.10.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-FcCE6HqzjJAkhymxhIWF+2Ndx6QrakRpnjGx9GtZkALncGcM0h3mmKsrKztpZ/c5v/O1vcEo4U5WWgnmZqTkVQ==","shasum":"e61e8813e520c711c9e53c3c0ef03ff4b0556cd6","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.93.1581.0.tgz","fileCount":21,"unpackedSize":68969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYWx1CRA9TVsSAnZWagAAVrAP/1wN5So7c65uDUykq7ls\n7eg2kG3Kx3GWK1qowHy5tGZifgUjzQvWmbjt/gpneaA7pinoJEwxutlqnCX9\n9fdFn+q14NFSQtt57grGT+UKQEPqOZGjr/BxLgvf68u9w0WrHH514Ez/kB3V\nl9KODqqjrwckWXJCC/ixEDnE80qwCGjn7l24LnnEz99caKhYKPYsUINFMv4u\ngyYToew2rGZylWv7AKtMMUZCB3i4nW6cJVl/rkrqiJkf09RpseA+OKQpuFF5\n4GVCn/r4ZE+3c9090rfru1aK5CdJ3NeqbzuBP0drkGrHN0g3xG0JUq2Yf4r2\ntOX09Zr8NZGU2/yZ9GNJ3TM6ioPRrdMzukY+drf38HCtJ5z1RQCpUIbKwwzX\nmHRFReJYiDNE72JmuBdx9mig3t4nsED26kCkAfFC0jN8OOifFBZYT4QGNq+5\nxvWVhfgWo4PrAdf3SlEyV1k87dQw0TierizWgvwnnFVem8ZcrQk7A1Ghhcj6\nMe5Rpip2N21zopWqLzb4qiKOxrHToAgCMZvLqVEvSXe9XZqSriuyw+hLXzvf\nyZrMEzhk2NRYspjiA0zzemt12xSzE7kdSEoGt2MLo0evlaG9JzD6trT4ZFfD\ngzynDlfLlNmY01BvxeZFMb2S2KDPsm3+pH0M9Q4fgOFmLc+E0ChinxxVtGUz\n8ETd\r\n=ZQyM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFjWHRofNA90jQ61dCHyBxILULl+EBZOFP1249P+S21zAiEAz8x9qx1X0EhYnN9JEPRhFpp8fmTyc0qGReuasi1E4CQ="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.93.1581.0_1600220277228_0.7762093735737918"},"_hasShrinkwrap":false},"1.2.43-canary.88.1584.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.88.1584.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"10.4.0","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"3ed630ddb78ae13e8d35d90abb562e6a0bd14e82","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.88.1584.0","_nodeVersion":"14.10.1","_npmVersion":"6.14.8","dist":{"integrity":"sha512-sRp/sLoWinRGhIYQGKglQnWGyaXsjhPI4AKdwEg3p4A+kuMiG3lBw+Wo9tlbcwoRMESN6LS8bVwHia/Fs6RT0g==","shasum":"dd0700d17e89dbd0e809f5ee27b8562a150c7d6c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.88.1584.0.tgz","fileCount":21,"unpackedSize":68971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYhSJCRA9TVsSAnZWagAApq4P/A0SvUyD8cZ+rAoji4oi\nFM0Or4MzKw1aQx7KAt+YgB8ghKPBZkCd8LjuHBEmiD7JgPguxrbzHA72RAJJ\nCNke/8fN64JfKAjh6vBaInuARHF8W1n0+P0rn9Ksjfcnk/zWM0kzRFF2jHkf\n5bYo0Ni61DtgoOgZRYbZt5rq22fO9jqtuUpC0X2EIwbzvrhR/jRPfzx+th0g\nxHlcktwFDzhfG2vitIIIsndwuWOf7oIiAj5STxU0ZJs/OOtxHPfqdr8uAkKe\n5y6fiilseEqaYI3+b8hfGRQXcCivkl7YRhACNteVvAHUuW2EsnXEV6ePD3hO\nknO7E3SumDonOy9RkyyuPzUoQE22a9e13htZ3HDKtoxUPu4pTz4Z1+Wn7T1c\n66+GBxVtNgX+FnFQ6Zc3GJaJpA3h8rJD80DmPColuxXgdqoKrMZ3AE4dky+W\nR5pfM7TNujXrZlBXKbeUg5OufnIWtoVXswUbnfe4j2+MfaFLnpVjQEeYood6\n6D39pjZ0mZ+4EatHZSBdU9Kj5mYNhJFMcxnwbYCXYz3+TPg32rTLnHtQHqRY\nc2QIp4anI5cLab4S7c2HSbR0oxWhnXOt/3lMB7IXJNVhLcVu2cHihbrkYzpt\nqQOuxWEC15Bn0BKwD/ZQyNrCfPpHAUJJL9euIw5AF/geip9lWKF566a4iaV8\nTWQV\r\n=TXrT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyUIQRwBWAJhMFWXdNNTxcPSS4oN80Z/R2ZkzU88cp5QIgIihj5Ay7sDwTs+DKS/kmcAanDv4vsCb3WFZbkXQnOp8="}]},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.88.1584.0_1600263304769_0.553556534346153"},"_hasShrinkwrap":false},"1.2.43-canary.118.1599.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.118.1599.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"55e86644d7acdc7ec733182fce687ada1bf24b03","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.118.1599.0","_nodeVersion":"15.2.0","_npmVersion":"7.0.8","dist":{"integrity":"sha512-fpMigZtXHihEOrwXrAlMYU7myW9BLXLW8L+AHpTvBA+9GhVagV9x0lGKhQoctCYK2vJqnSjRdDrJzKiMUrcDqA==","shasum":"5469e4a79c5524283b297e24f71a5213efc663e5","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.118.1599.0.tgz","fileCount":21,"unpackedSize":68924,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfr3JwCRA9TVsSAnZWagAAr0cP/AhhFuk/1jBrsMi94Spx\nh/ChYgRLHiX1vtXJG2ZvFaIupY9mDrr01e9KosP9QTokdcqjp1r4YjTTf1tM\nXoHQN+izcrw4pkHA2OtjRZCeX5UBMKAPr5diyfjGS5V9/JrQ8jDHGjQfDT0e\nJCDqmA0jq8W6GznsuPg0AjT937ER0ci2wHX1xNR8TiieC9BcpNkINBj71ugL\nt5csomE5cy2lEqYTqLoGZkA2PlloZLMYXhFUs2ZksHe3YD9Cy7crsc5dgOeV\n61QTzwTdWnF5PGFH4w6qd/8w7JLhkq09tjLKP7UYvi68DhgLg/DZQwHeZKNZ\niNpuW3wGBa4IJxw67Hp+CUGiHSFkF7BkyeZGYiJwX2LPbAsoSDiHZn8EAQfd\n7dWxBlMZ1icSW0ztXC7E3t//xkMs8c90ayvnZ/zirX1vsObUtShgRvsu1Etz\nTbgCCpe1QWJOgDZsSQ4+4uQy1AI5QR863FIzsh1qpbpRhCRSAbycQ8VCBSZj\nG43FT4WAwysgYumBFSHZpPsebcMV2VxzLlnbQvL5B52Fs2VENUfid2X0zAvp\nxFP2GU1nYa2Qq4wiEMXaqWENInRS1sX3R/5Vhr6M9yFcWl3g7DVgSdrhuCPO\nJpp8p+vcTjefMuJ4sNkwstSJ1GIMwhzEWRnzmG9CH/giF9EXX9nocUCInhxK\nAWbf\r\n=LZnJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBlUET5M7HeoLUHqaSqF03hyArIfh6JYncYVQ9x+WkQ8AiEAyyOtJHQh9xKdup089FVjkV6qSTIeNiLE2cARjmukpaE="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.118.1599.0_1605333616033_0.9463823825534741"},"_hasShrinkwrap":false},"1.2.43-canary.88.1606.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.88.1606.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"10.5.2","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"f6198432ebaf86f778771c2aa717568282def881","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.88.1606.0","_nodeVersion":"15.3.0","_npmVersion":"7.0.14","dist":{"integrity":"sha512-TREt3cTklDz1qZ9kuO86+VWI414vkAxq1Im8bLtVl/TznMH2gpt4fxOmXroAFMXHmMd+qkH+/onMCBDZrcxwUA==","shasum":"5528125840e061e6c20c2864182016490b384160","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.88.1606.0.tgz","fileCount":21,"unpackedSize":68971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfwFAWCRA9TVsSAnZWagAATYEQAIwwL4ElEmgOr8bAcGE5\nFJ+FOCcbv1kE6ea+EcTH5mSwPyFg4MoC5gAWlz1dZMv3I7P1lc6nPYlXQphi\nGO4ah3dPgzxi05plagY62SK1JTjApaWRr4rUrPzfe33kn678/GHILag+1WfQ\nEAxMSNsms/MSeQD9Z8uchkB4vpSKExHbZu/5UlTpGQHZ6I+fZfLKqJRCk86E\n1M/qSPbTuBtuKGH3MeITjl1y/W01xieCRp+YdKVQkza9nDD07Tl1xEBIr807\nN58o3qgConcGdAA1WJDBWp/Og5h7/CmyLcY31LtKC6SPWSzRf7jssqPMwm2V\nbBS0VntPF5YjYsmg3/Zd0Q+k3s0QTZ0LL4vKKSQgUlKBnGhYxW1fTkvxo42b\njiInru8+20M58CY7hce1vz7nUcxUzMeqa1gFZ0LofkWOajM2xvSGzuIONn1k\nlkwb6e6JfHh1LmBzSd49wG7AS4PJv447xvjORLVLLa27Xg+P50a0brRmfFez\n7NDpYKiHcKF/Lhth+RaYwG2PVU2IvK7iGdVwQ/Q2crF6bM+HY1rxUCXVZ86R\n8xPVX2gyb1tjC+QyPvlkf3Kkbo2u/ZY9rHSP4+KApcDRb4OQ0JmCK9TvxqzN\nDUFfNZV427kKmvlpJuKN9b4YXwVA27F94zhSFFV+pS6n0s0ZX/lcDu99Vmqi\nPIbq\r\n=I3YG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkISTdSB7PDYTGCy2hzJzN+TYfD7WaUG7b3TNxjII3GgIhAOzioRlxBQvQmqF1CYkcLUR4KPaZ3zkUMJIFunfzWuYH"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.88.1606.0_1606438933535_0.7103882083636077"},"_hasShrinkwrap":false},"1.2.43-canary.93.1605.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.93.1605.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"2.2.0","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"ac7049515befa528ed81c56ba80794c494d03d2d","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.93.1605.0","_nodeVersion":"15.3.0","_npmVersion":"7.0.14","dist":{"integrity":"sha512-NqGw97gEcGsBnlBberuXWrra6SS/w8+8IgADlDK4/ttUk7rMyVWGHyCnw/ALhvPR9ZtOnmxh/aIH+1ZrxkOV5Q==","shasum":"b1c531dde4488d39d134d95c361e1e44820fcbe4","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.93.1605.0.tgz","fileCount":21,"unpackedSize":68969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfwFAhCRA9TVsSAnZWagAAZrEP/0FzbWUX6HtBascEQ5GM\nqEjI7R0B66cpbLy9ZkPmI8MpXrPYVWnCANWGlfD2vglzUk8yJ9pzt3hkMaL6\n9nBTuawXaNCJspoQy5DPke51vtGRO+UBSTgAdiJAk4VmQabV96ADz3fPOYiB\nrguqnLPMdkmIgw5zS/7Hjdnj291YbKwgnpgGsGe77FzLGtF26mFz1ZiNVv8A\nmJH1YN3P+JhSBCVg32EI1SxYMYAi1qrYW4Kk8SzWjggo0E9sI1cbPUCTRHjo\nkU3c4yUvzqzq2Eocw84pVHApPeF47yS+cGcxXA3NnM1vux4MagOiCXHrS5by\n9J7zFi6Y76wiCVe75NLbsehH8KteZScAVNPuUTmZJ68thNEA7wsh4Ll1CDAi\nS/gApXt9Q3sfNIWU2ba/mM7ZqhDO2jUWqd457A7R6GnPPPHoorNwXpK+0s+d\ndLs1avPc0soKknXS8WY638NRWsAGRbR/jcI1sW1oQdnwOEe+I8uNeALScqUV\nRDknOGVRKdEnZvaAymjpNCuXledeMNk6skvVzPrDLube6c/OT4p1vgX7jMdB\nJSPTHqFf4cnd328LzRu2ZvGt7hQoPCFDsoaXcN/CQepMB6g+xtvCkOXGi69I\n+up0ekCIz8hLoU+Yy4KUNz/YdSvObyGtbrLh4xmN1GWOT5jN1CrdSZYPNj3R\n8bnR\r\n=7cJ+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCu059V3JPfEsvlfIC376H4QF/rNpXrF3ns8jr9sLRcggIgGHrLS7O6g8fdiJU3vT06EKTDUlK18KNgYVG4+H7ACDc="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.93.1605.0_1606438944967_0.826270390094058"},"_hasShrinkwrap":false},"1.2.43-canary.73.1608.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.73.1608.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.12.8","@babel/core":"7.12.9","@babel/plugin-proposal-class-properties":"7.12.1","@babel/plugin-proposal-optional-chaining":"7.12.7","@babel/preset-env":"7.12.7","@babel/preset-react":"7.12.7","@babel/preset-typescript":"7.12.7","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.2.2","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"9ba27f034cba68d2571b3b6cf55522467060889d","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.73.1608.0","_nodeVersion":"15.3.0","_npmVersion":"7.0.14","dist":{"integrity":"sha512-xCKbN/NkF06vcdADf0UrvHX95uhUqr9sp5j9ac01zBHuOzpoAXcd8ua6ovbTvSdg4PlQBGY6T5YbSFWKl58CHw==","shasum":"33ab3145d095b3a1e1bfb7ebc70eeced482ce5e0","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.73.1608.0.tgz","fileCount":21,"unpackedSize":68968,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfwFBkCRA9TVsSAnZWagAAf6UP/3mtFTti9gNws1fO7kDb\nH/uGq3Y078gimluwQtCTD6yortDqq/13r9FsIWtHqLVCi45aDNourMZtXmcg\n7BxnZqgo5M5K/bGznfzmVUEk6lQjIB6f1u5YjFxh7i9uNWUsW3HicNobDT8h\nZlFgjeMBAgY0+bpUeX7+txtOIcYkPN6phGUSZsXK88mTzBa/Cy1Sg3skDfbU\nRrUY1g8YcinPmsFkQbnRxD5X6JQ+QUjO4Xpq07+KRo6BZoH8vtL3XLE/0cLH\nghP+qwxRkAclsgfqyB+fyk6TIcG+1tlqPrBofIl2QYLXgZbFBe1GLAKpKa9q\n0YmxD6yCNrFTbSNjv61xI5LXYjA9ipmORtYQTBUNI0ZwkU+92o3XtoR9ndJt\ntYd8s+jibQmxhxHv0XVYRiXLG/kiHM8w60Ae+CQQNRo1vblRT3c/xWKduX99\n/8G7xzJOU1ULR0/Zieog0yY9yP2Ksift/k++Uh+X8MaJN9VzY5BorCgAIIJY\nl1O0pQkPc6nRvHzy7gFJ/01+rtn0rmuQRPisBdZr8UwYkkafdKh7pXfu1ncw\ncq1zyrKDZU5TjMtlpo+aAGIyWFDAXlfBpPe70cF3tmPrSc4EFkVflYpHXFKE\nIHlRDCiV3hd8GlzCrWWA2DpcTRazuuDTBjGTvLHQdZBY+YDtJIajla1DDsMj\ndyOp\r\n=0UVC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGAn+Ef0gs1eKA8Zm8uyhOt0//TNtybWcWFTW51vxqpWAiEAkrjpQrWfZjHOLA1ry2+NSeMETxa2iE0o0SO10uSnQG8="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.73.1608.0_1606439011644_0.8380027615129719"},"_hasShrinkwrap":false},"1.2.43-canary.83.1615.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.83.1615.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"4.3.5","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"255ebdb83cd17599671db6dfc10f66982c52653d","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.83.1615.0","_nodeVersion":"15.3.0","_npmVersion":"7.0.14","dist":{"integrity":"sha512-/LjKfXYKqMfM/JJyd1oYKf5ZJQ9WnSM8NXzAth3FYP/K4M6x9h97jQwzihwyccVz98VmVcBRVbCBKBLwObRrOA==","shasum":"9e6ac8fc7c014b4e3087d9e35c16c677c37cf2dd","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.83.1615.0.tgz","fileCount":21,"unpackedSize":68970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz3mbCRA9TVsSAnZWagAAr6AP/jYVy1k2YUl6xCxr3mp9\nYNJQnSvG/mqdCzCRauv1A26733nFIuwXsXuF7Jqk0NGqNlP4sFqB4HqIkTJ4\nBCYpdPWR6nrC354PxjjVqlyP+QHvWSDCrGImFRnJwbSIeNhmXBdBe1RBZacE\nXxzf9vHZ9WTNERm7w09wq/nokjJDYOXctq1qN+ddc/n+BA/gdxBngQs79p9m\n050DK5KbXw0Knugotee2M4VPg7K3se8Rues0R4WKjsMYYtqPle+5w9kBFMP7\nfVhRz438fikw1Q91l6ZmAzBJ0Fg3cu/ts/tB2F4vPXlDh97fom8SSE3tOH+T\nih8A6Pepn+EifLIcBuUHCF4/MPbfN2jOWswf0e6WFK+E7OTthbRC53oMCghr\ncBEdJ7Kgo6i25xxK7vU9Jj1e+w2VKT1VeROl0EWxYlp+t+exjjkE1kqB1clz\nSqjU+ovlSsiVuv+MLDqVqsAYj5vMD4RX0mKiRUTdlzbl8c43JUMAb2P6xDIb\nsh+vbypKNe/0pZVp0284OyFZppVblteaWXqnyvRbKvW5zln0j2+Ph1nxYhs3\nLDwcRJZVJvY2+0CDDtDk6Jzvfunho+uD/S9wfh6RzTwSD4xq0lqEtVyVvCuV\nFBpBuN08XGAmKYgSKIQy8sg5dtI6dMLJf0/1B9t8ID4rePRQcK6KePVLklID\nm8bn\r\n=5rds\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/leJjqkIErM3Wx5wVFM3ZcMgcV0XzTDpsq7x67o4btQIgPY/FRCSBfEKTPPHMOGDC3PKuT3P/1/C7rwfrKPddMEQ="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.83.1615.0_1607432602919_0.7925504535380803"},"_hasShrinkwrap":false},"1.2.43-canary.93.1617.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.93.1617.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"2.2.1","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"20b5da5f48bd9c1db0f52e2361a53ce8f328bcec","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.93.1617.0","_nodeVersion":"15.3.0","_npmVersion":"7.0.14","dist":{"integrity":"sha512-SkZcdKrQrZ0EA1kYXEOVaI2vQYmyg8IPA7a27EWA6xpv0RGE9S8egr0/5Y2QyZu42x2F66Fsjjmnu644oxldAA==","shasum":"2127e9aca1d8ec1d8496eade20ac6dc4134294bd","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.93.1617.0.tgz","fileCount":21,"unpackedSize":68969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz3mqCRA9TVsSAnZWagAAhGYP/jRFt26uoOOw9WS5hYWh\ngtYqnsQIhK+SWik4Lug5ZjnLn9f5k65xHKzc++UDaB7teBfFn/Cvg4H1aogn\neyylERf+GiHIpXUJx3Bl6gYncSx2HYdwVJO2KoOS1wrpKSOTQP9Qtn+vPN6h\nidmAPcgRj5dvhlPsHC7R82EFjFLiou2S1dnt9UQmdNpBhCZbhxodZAEK/Zh2\n1LsB7UN38nv9x66oEq3HSr7uSf9xlkSgIAHm6tqFO2SiEQbB29xQh2H3SbDD\nlCJNpkJZQQo2KJ3VTcWiU5DcT7HNiZCAxIxWO+LvQ7OQe6oSErhB3C6TGGKT\naWEmE6m/AEYbZuC+hZjsWaexlDOk7zJALhlqkwjI3W+K0zQlGF5hmHP8O82p\nsDXJiOhsDSOcvushUa5iK/OyF+dMXwkJfgcfefkw79gGCgc6ctnuBo+F3jqZ\nvakVs5Hmj/sc0VrMJJJBaFU7OMgBaZGovnXw5ALu79RZJWkBS6DAms4+SOCp\nj+wvrEDW1hrJwmnqLYOGJZsJfG2AXyNO1Z9rojGVxm7fBwqqEH+/aOqXqIdM\npOv2nwSN7v3x5m7zYyc5ujrSm2U7FIl8zhgB8noR9N1OUAuKJO/Dp9RrlNVi\n4qcTCkorD5XiqoT+tN35gQ1fRN+ligFUcFWRtR0wdLTIdXVNmTHeah1w4IdN\nvZ2e\r\n=Nrnn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5Wk00vbxMoKaT3z9ru7TLlb6DvnsTkTEDPkBghPOwIgIhANg+bjsyzAdoMUUkS0WpRQbUUhRM5o47h3NTk4Xo2p6P"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.93.1617.0_1607432618125_0.16784086432955747"},"_hasShrinkwrap":false},"1.2.43-canary.120.1637.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.120.1637.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"78ec330b7fc3ee3098d6b57333d4db57799d2d76","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.120.1637.0","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-ctsqh9Ev6X+xvnsYcQCNnrogr1dtXbjQsiA1NS2yOgLSc9BiVEYcYDMbEKZR7CHo1TLFUW5mMDd7LahWW8roew==","shasum":"5ebfa1dea2deda0a7ed05c2d68360fe51422c7f6","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.120.1637.0.tgz","fileCount":21,"unpackedSize":68971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIkH9CRA9TVsSAnZWagAA7XsP/0aSvUyk4GEsZH3qKKbJ\nZkpng+pwwhifR9clu4vly2d5/8QOzZ8fagT+76Kcjg2S5DLO/b9xsJHkZJUZ\nfhWO1VhWNwdia7mBR1/d6VotQTZOVVjfEzZHb/we/nDeKO/Q6kXxduJfzh9k\nHheQIThhu/mWpxRmsWEgXFdZIwRe7TD/wkRkyvfxkt6w67V4iywE+ZuVqT6Q\nL6qjBSBBAhd0nfILTF9umrBC/91yQZRCW6QsWBkY44GSjxJz99ODepXA/5em\nUhxWtbK70SRltJ62CVosVkY3/EvBdURpWcYUGIisKYEPIinJiI4j6/Q9VPJ8\n9hx6Uo9mBRDZYK2WSp24g3Qjz4QcWpZmPkQAJ5Cg7NHYL7L+PjdJ+SFtd0hc\nawSM7FMAzdB3AUYlg4hqCdvkW68eCNrY7PSxQbN1eXpmKaDF3kU8F6ySXMgD\nPf4En4wKUcQENefWis4q+8wzJWzohlkNkjF0aHRf7X+FrLsEsB8KikTxUrvp\ne4RAzVtpdzDykSHjhRQI5nvWRhLJ8ciwyT97BdM78RFN6gvPM9LvT8aezDRT\nShc9nWPgLc5fodJ4spjhqff+gURvgeHAK3PQvq3I6YYTHA9sRFQAsGMRYL9Y\nlHhiu6HLxjySPyO2x9WOLinUfvxx/G8zKSJSg2heIhkIAFAkgQss/dCj8dOb\n6Sqx\r\n=LZ53\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqr466AKwVj5ssW8+4qBb/K8esN7Fh/4ITtEnzzZmAvgIgJ/iGKkEpxR3++ftgmgVlUPxk9BTTf+Ksrm6lBHPAJ6s="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.120.1637.0_1612857853359_0.50132458138418"},"_hasShrinkwrap":false},"1.2.43-canary.121.1639.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.121.1639.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"5.0.9","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"12c199be89a6c2efe7ca49f7a1d40251001095b0","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.121.1639.0","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-UXm6EhxGaaT/FQ2DCKczSvCFJPVE0yD+OcgF3ZyeHkAF+tIvBpD51E3Hq5fZylSaGbGwkM0TYpoKvtsJhigzKw==","shasum":"944f544a421d6d5570525a70f9aacd965ff6b4d4","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.121.1639.0.tgz","fileCount":21,"unpackedSize":68971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIkIJCRA9TVsSAnZWagAAl8EQAIP+v18Svj1WdY1B9sVT\nC8DWK3NN5XTykaWyv5MrLjYd8OjXybnhKeOewcG4RjJQBnHVYidMnUk4VLc0\nGIDuI1HUBvYP+ElFy/ShlB0mzhO/5BbPBzzHqh+6WO7N+jJjmTSGG3vFV+r3\nxacQpXPN3clF67llllJ/cpAlwqbOlc8i2V0x/mMML+awWWtawwStuHXFkHgQ\nZzIr2+QNL/pnFlqbPp+JojmphHob4C91Q3zw+9OAtLBbKoSeqMMaOT2Rp3Ks\nOmqABDpPnX+LrWFoJjPyy6G9JqAwIis1pM1/qU1nPXTvAZEuQFEA4h6HskWc\nv4jiOYddeENc1MhyNRaplWyc2otEBkCQhCZcUt6+YUCXJ5Lmr/v+PvcnRhZb\nDo6r/6VfN5p5jqSv7wb8050yO67HNexlzxKumlk+xPD+SUtXpO9qCTIaeMjc\nGP9yIS92Zu+CHvKBDDNpQfmhtLEEk6O/+pfaCEScER8tyd0z85TJJuymsuwp\nZqmJV4Yui2YBS9jqMVTNx4IuJqAc+m26hYcwRI+d2viXmv09O9j+LZ0zMB7Z\nIdHNncYSi1ot5+Azay7Lv0EnNa8TKGMMNYXunsRiFTGmSX4cC7FJTclEW5GL\nqaCn3oQKymuQIFA44iQqKcbR2lp0rX8mZT1uFNgkdY9fSLW569Bw5Xc2f7gS\nyLoY\r\n=k/gO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAB++hSMcGyuCxJGb+S7mVCx+QAOPwtxmM0dkeIlK/EQIhAPT+2PzJsqf5uBM/7FutJwzwlbt9RGbIOv9u15Q6IADj"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.121.1639.0_1612857864996_0.9096913193268163"},"_hasShrinkwrap":false},"1.2.43-canary.88.1638.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.88.1638.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"10.5.4","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"e7aa43dd2965d3954555dc120f0655a140f47f48","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.88.1638.0","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-HgpKRfrm3c3ljlthUK/9rz3P2NieF02uqol19Rv1L4lnhE8byGfH+5g1Gv0nwlyGqJHyVLkxeU9uaOe2GUYSPA==","shasum":"8a10c4d653c826536ebe2db30c6132043459f7c3","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.88.1638.0.tgz","fileCount":21,"unpackedSize":68971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIkIdCRA9TVsSAnZWagAARGMP/32xdMX82H0HvI0zI+Gx\nM4GplS2o5QAM45gkELrJyig31cHDKMBJ0O5n7HSukvlJdzi5MwAGr30/KKHJ\nM4ulHUdG39tORJTTMO26g/TZYWZbrSqd3O3ZmU00PGhAnGJ9Yrqz8HVeOrdF\naWIUlxDXwkK+kf/odivnjVG8UgPiCiP1LXYUIS3YIsm7RjZKETUXAxenefJJ\nHJ2Npw9IKHtJhx8+NzggJHtNCCnrsTOMThhh6rMz6ug+SnFWyZCaEI9hF3TU\nxYHk8eFWKt2iBFBWTu7I4simpaHS8HvfGI0wB8braBq2VRY5cDcU3BIc0qsX\nLqpe6I8S1zH51Tc3ZjPmzOQD2IcAqr2KX7o3PvVzL2L8IkMhgAIrKu1ricE4\nXJNjrNbuLAeKaOMVmrQqFjNYVKG/6ZqREPHVmbecHTH2njY9Vw9lKkaW/ioK\nBP1luw+VnhEs9S8EAnKBMxjw5GBuWFIwBddpHpzJTcsEMe2RRRRRxOQq2Ax2\nc4BAmSp3XnMf8AjshrS9jelibel/S9tWwrxnhu4lmjX2prqWyl9ITQNaPSBF\nh7nGaFaOKCA0MqvvWKUbYO22PHNbNta/MFp5jOSj0jCiOKuHnj7PHK7hf8Di\nJCjimYs/QF1XEaL1rLxDQJ35PAyIbMJ168m1hFGbi7pK4cPYnjzfFUa8NlMI\nXvzK\r\n=dyvG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgUNI/DY8kkXoCYLr84EjRKnUWxiGfu3TYOqSqpTQGGQIhAJmME/59EZ/FjMsvEdKpEC7rdLIw5i4ohHOoQjVzD64W"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.88.1638.0_1612857884996_0.622524809947798"},"_hasShrinkwrap":false},"1.2.43-canary.73.1641.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.73.1641.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.12.13","@babel/core":"7.12.13","@babel/plugin-proposal-class-properties":"7.12.13","@babel/plugin-proposal-optional-chaining":"7.12.13","@babel/preset-env":"7.12.13","@babel/preset-react":"7.12.13","@babel/preset-typescript":"7.12.13","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.2.2","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"ebd08e24cdfccfc6f3da83c53568fc9fb34a808d","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.73.1641.0","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-bQ8CnOcXj1EH2svnseN3bp5HuOpnFEN0sjayt4wc+ifAVZg6wtdRwM7J1mJ7slDW/agY6IcThpvYfEiqtl0KiA==","shasum":"1e67dad49eed6a61d8b603ead6335ea309605357","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.73.1641.0.tgz","fileCount":21,"unpackedSize":68975,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIkKBCRA9TVsSAnZWagAAjqYP/Ry84DRysGKpaN+e2x/N\nmpM8tDNcGBGHrNI2vN9ufC6MyvkVvltZuy65vA+MDaftUF0IE4Mb77lrScMG\newD74xNMx19IqdDWTMAUoWAeL+nemFqxF30tWsM8d1N/VvCwkyw084PNQEYI\nMFKuffKhiRAXEfQGFCI0ZnU7Fwa86Xpor3QGcAdBBDjqDSqMvvvNDjzf1KaR\nw31V0Rb2zuCi9pGnhZ05HsWvdCfGmwMQXuyPtNT7FGM7W5ZHlP8VZGnPVpdS\nVB3wRwMEXiSQ4VU/j8leqFkmEGORfj2j0XU65UH4eKYOVeFdRjpuhWPmYQIu\n/Moe0KHU9zN5FdjPSifvnjJQ/TKuw+lIxp5cIdK3P4Ybf0/zTlvQpbJ2ZXao\nQK4t+UiwIpfCEoogzX01+39XpNLaRfIwT1VwL1jAupl1barSrm3lU1iMbUa3\nBGTyMrKhy4b9/wAi9y27SuCElPIoMkxAmyNZ1p730MOlvTH6XgbxoFF63Udn\n35fgbkT6LhYe35qOOgRaef56ui1sRQRCMEW3GhWdL6N5VVd/pgB1HwfVHGyb\nTpgCHrHi8CtSHLSWFmGB+Qyxyb2I1tQCOXKN8t3gDUSjqrx9vgoD2kGAm3E4\n7H8ZSBIrWGLf1Qkc4ikBiCnV+ZMAAvpjwz1ZTS93y5TBfgz9aU6b5b+yF0dj\nw4pd\r\n=GHtt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBP76+GmSkivpTbVH8dYt6CW2hFKfRRPeWqzfKPyTyGsAiB5hLfFNavL1yKzT2pb/R6TwcgpqD4YTmamcWtGrPP6XQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.73.1641.0_1612857985253_0.48687317083049564"},"_hasShrinkwrap":false},"1.2.43-canary.123.1665.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.123.1665.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"9.61.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"ea044dec06e27e9693739bb1c894a896c79da6cd","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.123.1665.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-/EMaRcHWvd9e2mpGkk+jSViT9GbTXY1YPqV8hTLHF7b+jwvIw+/wHNSGpR9/7Nnf2X3RnYqlBJz7/ZWhrXRyrQ==","shasum":"d936cd667ee112e5ef291d56038b4af123cd4cfe","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.123.1665.0.tgz","fileCount":21,"unpackedSize":68970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghuj2CRA9TVsSAnZWagAAJJkQAJjUchYlk0RioVM+7tfK\n+LNtTkiIz27E/IOjlKtF/+wthQhRFEIQCN+dQavNpOiC6ylO5m184Okt8qpi\nA8fUy83jY9mUBLl/4t6hMtWYU7TncVsIBQeqDtbgY+Y/TlHAJeYAlnFjmukG\no2whswmtLWdDu+AYNb3jGBJXlaFyGf7V1Gl6gwSDbO+e86znyW8/lGOh2OOn\n1Lnd+0PmuLedSzjaIZWicDyjnknbonVVEr8svB7RsZU00OZ63yRduPX0L8+o\nBJRWJnDrDq4O6Yf2QKMi0ieZ/34dpcl9SIsuiRecb82eWzNkesSbI0Ei3sN0\nCcBlrO/ifaslXXtN9iLPAQDepGDKiAZYQHkdT+XGFIt01aVThSOdPIhWFI1v\n0DjFsmPwuzH0/Abc6oRWehFNSPxm1rjk0XApMkdFwWxYcG7rnY0oXF2fxaGA\nIVvAhqYs98Q3CSp81VwB1U7UCHPtl0vuXPuZZyFU+sUu64klbl035jGsz80P\nfSHQA6uLGvOpVvIttjcvjdrw6bnv5YJVr54fSsvh7y9ICp+y9B3EXznD2JtW\nTGDPihGALKJoP0wMHglCW+PTA/daQQH8DtlWZK4cnipBqIq+OsgaF+iIY9z+\nxpHpR2VnlpzhCfQzFy2gd6EKP+pARBOPW4AhbAGSkEnQ5ND6NPlzB/a+W0KU\nuXj1\r\n=BCX9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLhqNVgp93YR1CALcV6pZJS9+egQOCogFLa6HIqCPP0QIhAIC5NAulD5fZhJUXmwXTE67fggvvuqrhsUYaskZaGdBR"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.123.1665.0_1619454197615_0.9144448560862704"},"_hasShrinkwrap":false},"1.2.43-canary.124.1666.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.124.1666.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"16.9.12","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"e0ca0f76a13526fc4b4c6b470ff5829f842db20e","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.124.1666.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-CMkD2lZ3nrj5zA0z5ylEWazn66t9VVv3X5Mz8bQMGYMuQpxhIX8ZrUa4G9MTRUWVL2oPlbxEtBWam+DrT79/Hg==","shasum":"4fa4eedc29f9f7b5e828b7bae649e6dd0427ad3b","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.124.1666.0.tgz","fileCount":21,"unpackedSize":68875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghuj8CRA9TVsSAnZWagAAiqsP/0AxBBUAdzfmTEniOldP\nMGhJjcvmvXFGEQ/mxIblIc1VFe71UkaiKGa6VbgvzY7vIGZOMNVNuCQBEDGG\n1Oj9vUe2P+YAO+ZFybzopN7HrUWLyr2tJ6dRXVudfQcpDARnIEI2hv19TAt5\nbtlBfs5WGGiCrv2R+fR/IsUWH7P9Z4GTV/Y/QJZpb/g4T5lQ4OQODelNeCNq\n9Jk/ZV0mzFSDrnAcmN2ueWVUpn7wjnqto0Hj59P8qbxCUlL/cHvjYmPjsvZD\nhr1V+YQtYLEn396toG9wU4KUjg5bVIH9j88YzqYcGpSe/BKKnaW4M2IV0dDR\n7zkedIRZJyWiGoQ4NgAB8ZeONFrJ47Fl7oKGwo2V6XD1rfQmqillag/P+5o9\nt+gqAw4jrW+7n3aif16tUt0qeBsF7zTWZpSXVcxtswffjXQcmoQAAI8TNHAv\neIEo6S02RsEYSzhe3rdqjVmj/3PPgn6kubuIBxfAwmdvFSSIWFV+QChaLzae\nk10QfCQcTKeaLPh9UWRCbexWhtFd2/yHWEGlMoRbUMJyIhuopE0OhAhZFbz/\nShagmQM0D3zRO/VbsyL/EJ0iLERPG70uwksV/PHdMKDrggRSSyg33MXTgiwK\nZTZ+eZzhH2n3BKPCps3G2hGxCmZNQt63oFVAMsx8NOWne5MB+VlTC9x1XjFD\nraV8\r\n=qvKC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyg9ZGedy5Lwmf/966Ha18VrYf3s4yMfHZwh5jiHc0KgIhAPFGVvOvUVlsxnB7d3kxghJ71IWukOVZZk7gvTAAG1uh"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.124.1666.0_1619454203609_0.9459254585514039"},"_hasShrinkwrap":false},"1.2.43-canary.73.1667.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.73.1667.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.13.16","@babel/core":"7.13.16","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-optional-chaining":"7.13.12","@babel/preset-env":"7.13.15","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.2.2","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"7978bc1ab37fc984af4dcc32df6b318e6c0d12e9","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.73.1667.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-bVMNsHcMv0EhgG0NjoSM7FfnPz7pNAsUJwWNWOIREL6SSuza4DbFAZWMrLxoa7hQeHO9ijoY2ErE/RTMohKGQQ==","shasum":"19adef62134e78179059d95b3090c9bc83d66608","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.73.1667.0.tgz","fileCount":21,"unpackedSize":69025,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghukKCRA9TVsSAnZWagAA7VAP/RFtHpdAhAIjUvNEcj3c\ndQqHye6Fr5d1+x44tj9vRf9XJYxF99+s+AUYm6uPsC3xcecLZrgMwj2UP7+O\nk8FaK6FVe1kczTGN/9+tcXMCA724zLWDCs12ZG65ocvA5VjS6DHd6f6jBeFg\n7Yrp00wQrtNqoRlxUlO3AqMNJFvpcB5Jt/TgUjnJN8XCJd5wInS+rbPU1SzV\ngF9hgHg0MS7Uf6+ezGFUJ4Ks+QZumKLa98VthuFFpa/6Tlyd7j3S7LqNFkHE\nWlr7+cM0uqdtRThfe8QI86NNZblqe/dF7LpNpLtaEcJpoeCb/dm7+zpc0una\nUtqD6E8o3QQFsh8mRVjl6qLXmJTuB9BiswjUgTQHX21iTDVriTB8Z/1hq3vc\nPCIvXR19XAMEyNdgSIIGpTvYW+b3OBzv3kyo40+XHjJv9wt1C23nZRPfTqKP\nSUA94OtcCPtzvPnxLDwrAEJhMrGCHcKU6yDvhBPy9hTmf2zSmh1CbosBnwyX\nFris6bHDFT06gFaZuTuN2smKUWtCnr4M6h7XBhH9YDSg6s0kwe1hDGSsgXys\nled4Vy0AYziWIMYvgSjPFosn9i7bdsShvlJQ+62gq/WVK0xExggChHM8YtrG\n11ciF2Da3YhvjyCruWF4O2tZEZjoTBrWz9XfXxnxY2rsWwlj6ub9qjjdFN1L\neWqi\r\n=/kkr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHMOt452Br3UxWo2gW9popGbPxNzTQ/zgSoJoaabtf1BAiEAlK3DHByJoe34CjJyd135TXXiUDt5i48TBvfMZsXrp5I="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.73.1667.0_1619454218373_0.6489684405246583"},"_hasShrinkwrap":false},"1.2.43-canary.73.1690.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.73.1690.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.13.16","@babel/core":"7.14.0","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.14.1","@babel/preset-react":"7.13.13","@babel/preset-typescript":"^7.13.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"bc16cda2053b1f2189c3171cf229634c78c02a3e","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.73.1690.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-ZQFIHDyUo9f+otgKMVFPwPioG1QPj4QGn/DDUW3yoD779ZlDuxMKhd7Uriq/zNGYeEF+KOR3Qd0aG3mdM4KVuw==","shasum":"f3a3ba902c3158253511769bcab7f368c9307f67","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.73.1690.0.tgz","fileCount":21,"unpackedSize":69423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmG/SCRA9TVsSAnZWagAAfqoQAKSnrWtt91Dr1vrTvn7C\n2bNpN/6vcVRmxe9Aqu+2x24xM8wwKn0bTLGJel9yrVsZ+aw/NuKoPN5MJHg6\nff9jO58/cWBK0WChFMLbUyM+JZHAOTIjv8KgTZXlgPIJrT7OuLocJbuYNblm\n1XMeXTPAYoG8t6D4JmZt/Bv6/YlIaSdo1oLPtRSnpxp1nSuPv1jHfnxHuAVn\nsiJjR6++VufN76Y9SWrC439w8U++/B//tQBxwZ4hBmodtHz7eJwPea428XPA\nhtoY+uI7W3CS5y1o7sbEZUz/KwE/y1umInbBpkMjFiQ2UN74bIj8nvy1Vufm\n51+6U8SXnljQ+msibu2HMguruOtjwiA2PS669aw8HRzeoQ5+ZhV8fjlo89a8\nsrlTgSDKrNuRS21dpGOlb8e1sxscENtTXSUrOhhA0NdJzHv3syC6ftsD+Qfu\nVbNbUeNwBRdalZyV/rLgYuIIPINpLURbSuTlITig33OWU0CknFZNapQiPtfl\nQGUbEpOepg0UFEye2bAqjz1hPc4cW/BFG14Mb3zBrYRgMlnp4HVR4tRhUMx7\n6cWuo+UARD/UIZA2b6X8vLszSrwa/HBKmkC+/R5C78bmOZt4hDDPqO+JoGSJ\nlVMAG1Zmjz3sV+OVrrQnYqqJ6MQqWOf3U9ysWexh18GOUyT3+pBaJUjlZ9+x\nYSa6\r\n=d9Ef\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCPgkbU43C889oicBu9teX7KCnCoOxuTwAxpUyCTexjQAIgcAWwxGkA/uFS3v/SSxsmdW30ipp4fVtNDvzNf3ud/dY="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.73.1690.0_1620602833795_0.7159807928831501"},"_hasShrinkwrap":false},"1.2.43-canary.73.1725.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.73.1725.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.13.16","@babel/core":"7.14.2","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-optional-chaining":"7.14.2","@babel/preset-env":"7.14.2","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.2.2","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"e037da9e89a16d224387fc993b2b86ccf92d64b7","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.73.1725.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-B31Og5capeQZQhh8glKffalz6pG5dEIbfw4jGWDZHPLacG8D0LGi1KpzITsCBMs7n9gYlo6bDDDrrKHLRVRhkQ==","shasum":"ab3d65b359ea120ea4c14a42e0a37cedb09d6186","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.73.1725.0.tgz","fileCount":21,"unpackedSize":69402,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoDVDCRA9TVsSAnZWagAAhh8P/2gr/DPENFfSIDfxtvl4\nbvuQKwGhHB1qsYdcZC26Z2O7e9Gcx5yi23f+RXp0dBDkB4seuPkeYR8CXXqU\nOFxibwhcCaWomnyw0BVw4rIfFyj9APLPmo66phqjRDi8JV9DK7H728UoyGR/\nCR5FsKS1yV5SK+TlDfE3iG6kFZ5D1AukUDvfXVWIBuZGse7COPFptEIWrqFE\nG5CabmKgwstbn8CpGB5b1AmPiL21cYJLHiE00vTZe2naNnZ3lq9jMs/HTaOb\nZXg0rghLw6/XuuUKc2iI0PKbPILAFZ+zvGtcu5IBtLW+KcYoKnJpEmqKOx92\n6hb238i0Rz/pqXaYZHpE/PRrWQjIsiY8VVxqc5wTfTlHizwjl2Uo8jR6pn6a\ndInES0OykGcoy7XU9FWEJ0CFswjxqug7ST4FxIurzInHG86my6ls4oY1+qcE\nFM1BINrj2MFQxlcVB1JHC9bn9xW/LrJSUWqwogux4MLWnXYO3ZLiEipoM7vk\n8u3qigwbDXzjuoVSHNfs3Hta78n+o359SoBJg7msgyHvHjKAcxsNwq52eT8e\nItXefDyrfuTO8UnLYjcMRwp3HyhJ3u2TIziW5wk/rn72j4vHErYxU2QHlASS\nWJ0T3dNZNJP+5DVdjoauUv2VtqLF9npcUcOuFPCyojcVf/CPMccZ5iyjgN9Z\ncJk+\r\n=vZGW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCovhV05Uw3KPb0fN1cbZFiaAhXFXkpb6cNPb5JcRHrpAIhAPUihKKTZ5lWWma/qBDHBkAIbZyyDhoUqBr38k25H9jp"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.73.1725.0_1621112131449_0.8756709674159453"},"_hasShrinkwrap":false},"1.2.43-canary.124.1745.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.124.1745.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"16.9.13","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"a263dbfa134d2d71457f0a2ade0717dcd09bee14","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.124.1745.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-JMWeINMBlueeAyKMW/lXSfb8JtBHQZRuIsACTCJwes1fC7QHMVFcwwdY8O64S9501nquIh5ILbt1TwIsrlcmfw==","shasum":"2080fbd9969d0205a13b03311358e1851513fbf3","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.124.1745.0.tgz","fileCount":20,"unpackedSize":59872,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvTV2CRA9TVsSAnZWagAAZFIP/003dvcK+66mr1o56FnM\nhvEeudb83vslgh8odwUiqzTbxQwSiCKJ/iXGA6wcBDYUB6AKIVaXvq2UGKTJ\njcy5kRm9sJ9nsyKSY4rccyaYR8lJ+6RuO2KFdpmuxfk5MepAS0L000foXdQ2\nUIhXGniJiA8OPA70Yk8v8UaBS+ZU2ycmygv09DnFtRZTibRX+/ftsqJGtsPQ\n8RLnxQfQCbHQshgPRgU2ezXsFiF/ElwH93Je4H5WlLs0AJyEP2e0bYxduSyn\nJ9uUOU4q5i40NguBLXhBIe6onq7PbOc91FBPOprO/IAeFCJ94fm9fsOCJ7Hj\n+CRJAR8mYJpYKfoyStRjDfJY4WoBzfeRPVFQbgF8Tbjnc0UsD0SeJhWPD/r8\nocAdvc0GIOkd6NrwEKYl78+ww1IUCg9xOyXaApE5MLnkyTKnHM2KD0/sDru7\nFtrpERrgOQEST0M+soITRsavlTFkNdNGLQ/Sd9EWjkzEA1L9Zi217ZwYNwWp\nvlNaGhrip9zdmQt5YEGkmY3HRuuZTP7gq3jZ5Vif9yrEvEx5LV1jTjv7vcgK\n2BD6scbOxZIq9NhlLC3oMFntEWq9NsCruc4HctbU55N/yqOjeTtGV+Og8eVC\n6Fnwseob0dWf9JKlN9CbZlCQmdtAmjeRwOpes11oWHhkwNtXZfPJ+Je2M+kC\nMrcM\r\n=7Itq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDRhfqf4xub9xk5P4fiTx6Z3Tg5pZFpK9UJxXaKJA6ViAiBuqq4zSmOCvnYLMmNpp0/wJFJnqk071g2AfbyK9GIJGg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.124.1745.0_1623012726460_0.9678625428030061"},"_hasShrinkwrap":false},"1.2.43-canary.73.1751.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.73.1751.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.14.3","@babel/core":"7.14.3","@babel/plugin-proposal-class-properties":"7.13.0","@babel/plugin-proposal-optional-chaining":"7.14.2","@babel/preset-env":"7.14.4","@babel/preset-react":"7.13.13","@babel/preset-typescript":"7.13.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.2.2","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"763b899a98f53a1eb86ff52cb4f18359488ebe63","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.73.1751.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-QSvKs7JNMs8oYvDx0izXMh73/z4nGPxQ5rgaA3aeNyBzE033wC4eQOYKgMTAHxqNtZMbkNiKT0Y2Cd5n76BcEQ==","shasum":"4858252d363ffb1aee8e3370a98b4d7f8893c7c9","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.73.1751.0.tgz","fileCount":20,"unpackedSize":60492,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvTW6CRA9TVsSAnZWagAAEt4P/Rm+XugYfec/98z5w73n\n89/dWj0z/6Gy77Ul/lvkrDh1sVQHpkzwYL6Ri+PsbyJafVhg43DxayItmNH9\nTNzG5kzO3d8/Uns1clthVmEel7zQf7yIzxxt/0VKJgpzaijzQ+DxfwsgqtJR\nAGXeOh6tCAYua9X6pCrJSRYPAtxy1iQaviq+qH4j8R1yxNI/PCaesMv0nZ+8\np+c/ZVkpO//hfefI5TAD6tofOKEJNMMbjzisokM9APMunq9eZeGwyxbN1mil\niQZ568EsF/o8JKRQMWKS0E4uSi+kek24EtSwO+sobUiUOG7z1BQo/fmJFnrP\nFAesWMAG0Kj2/uUuDAsoXeao4+1HNffKSHiJspkr+xMmEB7oOo1t6ovPH43P\nevkSR1A12mgZj+sTa21E0k61X8WXn1D82/iZP9UJSJA7iDaQVoJmFZ0n2mwU\nh8eWnVtfoYYT7nT09m5zHxIsVlLf/E5MKNzZkTyit3Ka6N6W1xG6RE5sSkRM\nLFxBl4Wyasmk6JF06UYpphlCV5kALCo3mmlNPnJ7RaFezXanEXMqADT6mizL\nDkpnjKFEADPOF4YlX3bdGjA1soRsVenDEgPzZyZBGREDNeMk4AcGCt+KvQ/n\nWIpjx3FRPLs1tNIyZVRwzF4WYn3qOuqATGz8Z4n2EV/7gXf7Q9V36Ndmw3nZ\nXC5B\r\n=TT5l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID7PJHhBOaxBhwSgQdEUfWnXAxZG3imkZvmtoQRvYYlbAiEAiLYJ0N6p1Sd97dCEn86FPWrlWgEpCNIjTazrOIt9lo0="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.73.1751.0_1623012794072_0.5250284102581029"},"_hasShrinkwrap":false},"1.2.43-canary.127.1752.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.127.1752.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"10.29.2","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"e60edf796d3d706f10a682b189fa240744b3fdcc","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.127.1752.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-6OOHA+++ip0oaVJLs6/XC4+Qi5Y2E4ErYbilxdKBEeRRzgpCnAXSuvm7+UIZ3dZ0kKAe90yqBP8mIS6BjXtwFw==","shasum":"d4edc8fb2dbcc9a028ede64f165feb64445da163","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.127.1752.0.tgz","fileCount":20,"unpackedSize":59968,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvTXBCRA9TVsSAnZWagAAOEcP/AnnMwRb6KmOL73i4iA+\nVwYLgAKMgPW7LOmN2zkhgL3NTvhjyDS52Lw1I6yaUHZalKsV844/3wmOwSsM\neXNYNAguq0b65IY62iGkh/t3+Qg0+GWr3aEKEnthe9BXX+bm+hRQ9KlgJ/Cr\ncEAKrit+z93rgvfSk9XV575qTTveQe6SK78VENSOM/k0aRYA774gzJx6VyGA\nW05YKXuWftKH9fqV4chLv+Qe2Vh5bEPjiVI/KIyabXejHbDUQw61xF5jQxqy\nTz6NxqRl8EbMu6vAs5KwpBndz2dirJd5VFoxTo5we0ZEZa+Yw/l/55pTTPrL\nYPBGyoYjX1KC7hLNbiPEru4cMb1vK69lZujf9vZxoKYyfuXxL0btFKBemTcj\ncdByuTGKiQFUDDE0u3J78Z9lTcKZEaSLsD6Iu/3Uo0O8sGQBPmLCSEYsVgQB\nOOOnfWejpPxr8rsIMBZzU8xRkHzy2+c7Wp7FqiLFC1UxLonkhUiHgbUl8a1j\nda8Bbf4wcShmG6nfN1/oJYzUQ3eGUNoum+pndBIzKyKWIPDWj8AjPZYMK3D2\njAKraQfe8gvCprLU27qlD9CYPKrh8KHLYvk11Vemy1rpg9TSbwSJq6t5cZuk\n0HVzTShUoG6HBrKLYMHGK0i1I8y1Jy3Up5MMzetU74RVNImc4rNS5b2d3JQM\nM4Yu\r\n=P4XB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDk5jyqYS5JMAIqSRqoebtEBBAeaFrkVWt9u4jV7xd6TAIgOKTj3drVEt/xSYNf8XOrOQhrCLwWgmDPNwL7vfF1dcU="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.127.1752.0_1623012801694_0.7248458771522481"},"_hasShrinkwrap":false},"1.2.43-canary.128.1756.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.128.1756.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"17.0.6","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"5dc8d8eca84796bace6d85bc45f3323c2c2a2e4d","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.128.1756.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-+mhQYxRIJ2FUE7fEo+VX8AXVA4z3MpoV0eXDVPg1MFlRUeZQCaHPY+yr7c6k/2N6AMrfeDQDCA8ZUO/3nQf7Ww==","shasum":"8d01aefe36943f6a020992103ddd4fe320724b4b","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.128.1756.0.tgz","fileCount":20,"unpackedSize":59967,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvTXYCRA9TVsSAnZWagAAjqwQAKIyn9YW0Um72lV1lbPH\n439HIm41JLWZuOO859cAxEliTXRd7UATGEmZkfX7W5YBx0MM8wHlnVj1GKEV\nMMsrh+QTmAfcSp0q92TBM8kwl3hajMu5p/h0DW+Euasr7yyUtI14V/vXG0Kd\nRClXYgO3ZIc7gdL5XuI30ValDUXXtYOz/zblUWXlg2cPGIEFuZPRo++/thoh\n4IDmLEBLmDHloFcGS0XOvTmW7IdC7IQEco/ngAou4RVYxxZ8iUN/AJEMT2R2\n4us7rRSHhbh7C+rrNW2U+XG1WzM1T3MpNKQMFMQHPjll9dzQWG9arqYe0vhe\nOv6mnvYt1mha4xkgfpvbZ8aSdzb+IDgliRO5bpIdT3Y9Tnr/0z6U/Nvacc1f\nG8iYDPUVeOSTOnyibcJrVdT2G2boy/B0b83xH/DwdKqHFc6HwnaW1nvXHLEh\npihEYzUAgG3EW/s5+gwoNyX0VVgl7n3oqlAWudSLNBCSH20NvVV2C7t8R65f\ney9+zzwulgT3anaNmmUnER2GaKIZ2LsAXfwfEPd8KwkR9fHOUtmTIYgI+L5G\nUWN5hGfRRKZuCcObUeOIUAbnXK5+jEpMpK89w0Tai1s5NNe7dg5mP5bH9kce\nqWKyQv1tUixB8vU4Esaz16+mSSmrwitH3EdXxXBcXD1E1pNTqIx96K3Bml/D\nZmzo\r\n=yMO7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGPhEpZETvPthpLjh5k5vBm2VrwvZW1VnH1jVFNKA7CTAiAxn9CPnNj6pMHOZZ4ig+bJHoSHc750kw8uKH8csGePiw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.128.1756.0_1623012824638_0.8892360407429658"},"_hasShrinkwrap":false},"1.2.43-canary.93.1758.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.93.1758.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"2.3.1","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"c67833cb12b2751709e13753f738f07c0beddc4c","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.93.1758.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-N8duDbnz/eQl09y8qSueA5VzXEvOxkucXRQyGspH3nb+mpoY15Qxls0hgxUXdeZBbN7I1XhFhTkekpvQFH1Z3Q==","shasum":"64b93e8b688753c99dd1f5d9491eed3d05d87dc1","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.93.1758.0.tgz","fileCount":20,"unpackedSize":59966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvTXhCRA9TVsSAnZWagAAvkIP/16wZjtwCedcnoCZu/KI\naym1wuja/KhLWUTYDnGyxlDMRZsS85w9fGAXs5MIN9t9FE9djTTBTyrQIoz4\n2qNtvgZ16MpRpywYw0aE7choVaC0tUrnnKvimG3LoNn7cdGqFT38cWxsGBYd\nzJQAaw8MrlVTsxBrGuY5fetTubl9lBP5O5mX1C+ubJyIlA1r3sbUl+TN/rlm\nx3s/hRtZ86QfIul790wgQH5QkSQTfp7naCLdbgXu3Ok1LLpEBlojXwfeabAp\n+5cCuSubmivDnAUoV8KCHvFVKJ5A5Bg7fsTt3t2gxVlg/Jj2T8qySbrRM6mf\nerd03beJxHf4UGUSAsTKlO6BWdL0u6kBRgkGgxRIvzinsrK6INRyzDuIKozk\nueF/2nd1NmQAEi7Anwyjr5GPNOzU4eFrR6BbTLi3YuIiiy8i0uZznll6IZVm\nt/SMkhaKlD0DNkZGLQ5Vg/k/Sk5eL8lOSf5PmWq/Fz7owviEwjcKHbCrpNhN\nLbpYkHuVhdqmG5KVjNzZsVhQGjcsflDqEX0sYOUR3+ayMNwRztZJe8FK7TcV\n4Sirah8C2DBYSudyVAo68KTMJyhcVp5OunzNLrXqPvvgxwZDqsXx6bFyolIK\nJ40PrdRidBCIa/3y0Nu4fQCOFeP1fkAaFtzZEN8+eUuN4YjXyxUF/maVFp8h\nrtN1\r\n=z/JO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcMosGui7mTYJ0fyW29XZ1wosFF+XTO5WGFt60qCVlIgIhAOkWPR60k3dpT9e/MNWG2JgdXIGq01CcpGLElL/hnoJz"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.93.1758.0_1623012833509_0.5561576634244849"},"_hasShrinkwrap":false},"1.2.43-canary.127.1764.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.127.1764.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"10.29.3","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"155a4e28cdb5944d62dbc821f2b0eb8b0934cd24","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.127.1764.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-hjDMaX6LTk2KuWDcZ0LaMOyg6eAolLNPlkduXyFPJVsLkaYCMMD5IESljMgRIpdXC1ymiBNwfNJuB3Rf04ge8w==","shasum":"788b4663e0aef53254903a17c0c497292f514467","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.127.1764.0.tgz","fileCount":20,"unpackedSize":59968,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyxItCRA9TVsSAnZWagAA2EoP/jHfitkqkScKc0pfBqhC\n6gREfZ1GvWfOc08uZAX6sFbA5n0WnUAMnH9PDRVvkxrvJPiKp1DjdxaRdHCF\nDOlFIUBP2i4+g2asxJAQ1cX+BdhPvhFfTqTJIT7Qgw0q6SkotyJ3Ov3FFcyJ\nsZzTjxALAn7bNyDnEkkVFtjlBStK2uFCe2dw1DQ2QUmKB//0SXtuCZpQfqAe\nD0chrDB6XZm6CrLU5PGgj41zqXpz0gmLWdpG02iNrfTkxhECYm+wf9rtARDU\nqpo1Lbx1MeFOiVcLb2FLOvloSGciswzOMRyLpC+kbVAR7TcAbBrxFaEeb0/Y\n63dKBVry26Ya1O6WT5yLIdBjtk6cH6nSj6pESW/XRKy6lF5K2VDE0XIJC1oF\n5JvQir/WbSLvN6mibfxkU2Is8BqTXVkBwwBkHBv6QVcg0Ll5PrPoLnZuItHz\nG39afZvBPrDzc16osnsgW7Xew/ZX04fjfgZXk3oktAFT/z0UIvcqBKlwpWC4\nb6apTK2nEQFpMW2mbFTTKeJqGfb1A4d8n/atz1Bx0UExOPrAtKB67FcdYzDR\nRyuHHXD99Vok24LiqHYn6L0o8QNv7K3ZI/OO8VZwxb0m1F4LtAJpfYZH79A7\nI6U7TH2neBQajFSE0CbHb0oNCVAdZqKJjj3uO6Y0aq51PsnlwfzoJH64NHwr\nOJ2T\r\n=8TZW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAEe8G1zeFQGRQkaZs4KlT3h/3YB5QzC7uUjEK5c28dDAiBetM+CRU+7WDWncLv/uHCMkCyb5WDxTYvY4Zmept9ygg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.127.1764.0_1623921196353_0.25516225448483776"},"_hasShrinkwrap":false},"1.2.43-canary.73.1767.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.73.1767.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.14.5","@babel/core":"7.14.6","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-optional-chaining":"7.14.5","@babel/preset-env":"7.14.5","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.14.5","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.2.2","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"30f510843e40772ef233cca97b6d96b5143d6090","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.73.1767.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-k6C3YYywamU0iY+Em/v6D5mdT0J8V2OnQI61NsIxIqoUEQxRsHIr+ybNSPIruxXeSKFKcGJUcsbhXKL0fxbFgA==","shasum":"dadc083b19aafb60cc706a50e45a366450a4159a","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.73.1767.0.tgz","fileCount":20,"unpackedSize":60515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyxJFCRA9TVsSAnZWagAAZEcP/iMCTO46mx7Mhy2olwqA\nrVPGTXW7ESN09KJEZfiq6ToXagbOrNoFW7k7kVi7DZR83I3Snui2YMKnjT14\nUtm9De9KPHRJyZMP2h7Vz705mrylyrH8jMEQP2xwJ5YhDRxuzL8bzEtFOzZ+\nF0icuR3qglihu7yGs3VzCOLOa276FRxLWflRLRmnDm163t/Emek8ep+iv4DB\nlclgPxrn20JHc82U0FdMexqh3y5DkjkvSup/AM0rnmakslT2jyYBCV55Du1G\nY5E+ZGQlR4Epmzv+0uNqe6kbpx4AkZAoo9nirC/TtABdIlAVMM6jQNkAk3sS\nmhIYOlySaNBVfs7iR3oCEE8/ntRFhgf9H8KvPuXHnhTikpiD0qA0hiZMIfF4\nZ88W6TWlKkjcrK6qoTmLR4dAQyL6lt5qPoDsMpNEeOu9Wi+k9Hw4kA6o443H\nL6XR9XJFmnxvFnNkSrbiEvN8L526VtyuHzXPbxiOkwTMbg8eBooxxluIJlp3\nqpodKk8UVo2lao9uDpTApiG81qTUayuYTthwFXMmLnU2jrrTKpVE7sK7BPoc\nIkzaezq+qmEAVlpk//KXIZFqLNR6r3v+axUnc5Gcf6kS5gVxzl32WXtB6Xt+\nF2EqYDyKV2BCKxlb8WJW49ADGTO9SxuLQQylZouOlbpLbnphWblMQ7YrG6f6\nzwjP\r\n=1x0r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDxQYdJ9EKfzRDMQsbBsbHLCDtR0LJjHnaBhA9gMCOqeAiEAr3p3Vzen316I2fiyDttzCwKETpJnXuDT/NdvmogIsSM="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.73.1767.0_1623921221335_0.0492013942133791"},"_hasShrinkwrap":false},"1.2.43-canary.128.1770.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.128.1770.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"17.0.7","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"6a59baf8691f22abd47dec11cbcad7bb51de39e8","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.128.1770.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-OBxn4t4T4CoTxIqGCt4kdsdEuqK1/faZqxjPH8ffoPelc2a3e40Xiff05ESbrM2SeASF9SyHVIF0EvtWzI4diQ==","shasum":"5f380a769af589b20f348ce900cd77749bee5e47","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.128.1770.0.tgz","fileCount":20,"unpackedSize":59967,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyxJaCRA9TVsSAnZWagAAu2gP+gIXbjr5Yjb3hWBHWqr4\n6mmR14vrSyj9+SA9IL0gRTg6sG1denC/PKHvA3I7XhXiE1YHUTb0yuopbFM0\njNgEZRRzYkX9+0i/0aUQTPFMxmEykvmd43P2wTFX+l2f31invhMtNrGWlIlF\nhf/Bk+UjCQt92L1Lh7NVjtN+j8drhnFsas6qidbahX3+i7lET1iM3gaxv/W2\nOzeFJfwPvJ1AgQHcbiPqLLdRJiUAtL232HA0bw9vAsu/NuWFzPdgF0N5OxfJ\n1xAECc3ZMCQcGfqQ7KKh06/iXDH2ShW9rTIhtTu/Ndk2fkh3s0m9eq1BQQix\nAoVoVWUfEjtOBozNz3J1U7hXzCiqv40ExiCLI0029KxFYtI10Ky0HgY24I/Y\nLegYwfzpM6mPqxk+wVV6QxDR9UukYnnnkmmce44fibX9UwpbUGGXop3HYUq6\nFvEeU2er3POu6nYwj1Xe/wzExIV9qQJOwWrcHjXDfHeZ0FJUWU+rDHR3w+zM\nxt5+mwUtvy4v9pVpu9PPP7ywCldSVRmJL3ciMxy0aiX6yeKk0K/Ln1Q6NwGY\nvqP0WI0+hQEXANY0cBPqT85o/vtRhzVmPwIFw0U6D6jr6RJ+/7N+QvlTx22e\nqci+4JL2+cqlIir4zNjmR3u/mebZ3TWY0kcrN/fodaGcmLw05Ocw5Si+qzFr\npE8D\r\n=kAQs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGxojQV5AtxG3AAaci8aPUkekxjU0+aATZHzX010bG5yAiEA18jSJuPQ4ASahdZOolKoYNUdonADYFq43cN//wSitu8="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.128.1770.0_1623921241715_0.049027321733747575"},"_hasShrinkwrap":false},"1.2.43-canary.73.1784.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.73.1784.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.15.7","@babel/core":"7.15.8","@babel/plugin-proposal-class-properties":"7.14.5","@babel/plugin-proposal-optional-chaining":"7.14.5","@babel/preset-env":"7.15.8","@babel/preset-react":"7.14.5","@babel/preset-typescript":"7.15.0","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.2.2","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"4554492866f360e9998816a562ba1433df3ccd2b","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.73.1784.0","_nodeVersion":"16.11.1","_npmVersion":"8.0.0","dist":{"integrity":"sha512-xCgtNJPlW9Xl4bPVRGp16FresvbHjIxe73ExK/Ql96wynRUGL5r+cwVck7/zSkPh43AsAJrQ0mvme2c+/4E23w==","shasum":"56178e07383070a015f00e46b9a0eff48557d86f","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.73.1784.0.tgz","fileCount":20,"unpackedSize":60515,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC25MB+V7D7DLKdnTHg9OICmT63GLKKEPaGl1zWqsyIFAIhAPYS5MYzjS+Wp9X0hK2amyGJigENwDEvImhKFx7M+LMH"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.73.1784.0_1634712318673_0.6059593509652685"},"_hasShrinkwrap":false},"1.2.43-canary.124.1785.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.124.1785.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"16.9.14","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"f415f606bd97d279f14dbb73ef9f9f1d3d2ef04d","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.124.1785.0","_nodeVersion":"16.11.1","_npmVersion":"8.0.0","dist":{"integrity":"sha512-kiHQFmxaPvtwQIorstSYIZ1zS5Tx+vmhhvsiWw/zG1IttkOEiFtW8JZF0OoEu3jx/uPlHirWO3hAhRoxYpOW5A==","shasum":"22c38acf9ab56d339356517caac813d93e760f0f","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.124.1785.0.tgz","fileCount":20,"unpackedSize":59872,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBG+rgHK6g2dDwpaf8qdb/kHLwDe/fbf8603PgEpKtp7AiA2aLUFK6rbmeHGYe1mf7RtZoppU13QbpAbs/7RScMXKA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.124.1785.0_1634712322382_0.08118286422932974"},"_hasShrinkwrap":false},"1.2.43-canary.127.1787.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.127.1787.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"10.32.1","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"b4afce9a68601380ed326e7770e4bfd9c39d32e9","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.127.1787.0","_nodeVersion":"16.11.1","_npmVersion":"8.0.0","dist":{"integrity":"sha512-Y4N8POsxTcih95IlnsTa97Ap8X47D5PSK/gMO5zokQmffb+SyA5rERE4BWEWbqQj03V9w0e7FCL5kuh+nyBJsA==","shasum":"81d0bcb2365df12704b55c6583a1db25b060c8c0","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.127.1787.0.tgz","fileCount":20,"unpackedSize":59968,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHSkI5UoSMM1HTxeBIaEBeUAcEAUbixmQDmPaikbnTKQIgKYxEJdi1nu6FLhXqctmOqD7Yf31M9rpwwv88c+3/lco="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.127.1787.0_1634712330197_0.6051572886894439"},"_hasShrinkwrap":false},"1.2.43-canary.128.1790.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.128.1790.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"17.0.9","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"a1592771822cb9ed5d179067fd68abddd2045e74","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.128.1790.0","_nodeVersion":"16.11.1","_npmVersion":"8.0.0","dist":{"integrity":"sha512-2i4BcMqweouqbwLVn1s/eGViVZhXBBAYh9fGo6jrZAL1+HanjMWJxAJbZL7cykZ84/MThVEpRs/G0bUYImx+Jg==","shasum":"84270f4a457d75f5791af7b7c2b9b122f1551d5e","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.128.1790.0.tgz","fileCount":20,"unpackedSize":59967,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICbojGsJ1Iw7CFVIyKN/BiHc5Jd4j2fqsQT4RO2w438nAiB1qLRNHi8jQpO6bYn+HIPqIYaKWyDEkKISHh8PhTf8+A=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.128.1790.0_1634712370685_0.1447446900355256"},"_hasShrinkwrap":false},"1.2.43-canary.135.1793.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.135.1793.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"11.2.3","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"1f7fd30b62e87d6b7eccbee81d8739431a001858","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.135.1793.0","_nodeVersion":"16.11.1","_npmVersion":"8.0.0","dist":{"integrity":"sha512-bCaNLjLLMx7xyyc1SU7ZmGFCGf7oMkWyjj8FdrWSAQpuQ9sF5YwQqn8s2dwN8ZifMNHpVN8p6kGXS2ML/5g4TA==","shasum":"e44b7e05ca3575f44c7d0b8939844729c7a7017f","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.135.1793.0.tgz","fileCount":20,"unpackedSize":59969,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNrvlek21jqwC38a/iW9MRFHsqn9h7pbUl2AZ5zUJowQIgQNW7LFfcRbeglMM8L8Ifj3j74m9bNMgfNuxAtHQRbp0="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.135.1793.0_1634712376239_0.188032488285365"},"_hasShrinkwrap":false},"1.2.43-canary.93.1794.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.93.1794.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"2.4.1","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"97b2ef26efa43b5addb3e50c76a7e11c356cfe8e","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.93.1794.0","_nodeVersion":"16.11.1","_npmVersion":"8.0.0","dist":{"integrity":"sha512-K8X/8w624MoiKJMoUI21nE+HkeiDb/GtJP/4oWgir1BU8YNaxIF7rlewb7AfNJsmb8UoR0ewHfEg9BxSEW4VLg==","shasum":"1773204108196aa4edac474b06d856f8a9b87c21","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.93.1794.0.tgz","fileCount":20,"unpackedSize":59966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6cI1gWZ0E2aU6/DZmJb8YKs1dzU3ubH7YgHejoCF/RwIhAM65LlPn1ei/jm0RIZHh5VeEC6ztCIvZ8+2HJiG7d1hH"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.93.1794.0_1634712436793_0.18081387948601524"},"_hasShrinkwrap":false},"1.2.43-canary.73.1804.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.73.1804.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.17.6","@babel/core":"7.17.5","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-optional-chaining":"7.16.7","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.2.3","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"a7a19eaef343d5ab899a19cec63bc4887d921882","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.73.1804.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-hz07r1U4yt+bvcQ8+QVeKRRIRs1tE83IKB3sUtD9by1qTmEd+7G2oF5nT08B2KDVDN9yQwPJBRWKRSA9kp5UpQ==","shasum":"b32f75e76ad963d858a80cee7c1f8f585730fe42","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.73.1804.0.tgz","fileCount":20,"unpackedSize":60284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJf9GACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmquDQ//c2bos2uW0NQZexP8Sqt24aiCGu4Mpjvyq/7xqY3tsmHeUMv0\r\n+w2jMicFVyhH66pB3rqtk5q5Irq183toQRa3S8ydbIYmUEq8uQxY7/QzVGiB\r\n0R8+J7guzcqPJiLlh/TGgko66SBBu7yT6AJ6uVx8+wZVspJYs914OG7e0eOV\r\nOqoaWRnMv3oDMtAGYpSY09W/GiJtCUoj8cCP4Kf4/Ak2p7/9wtDUHCZPT1Eu\r\nuO09YpgAmzw2ICcai0wU0CZ3X9KlklrcvgpPneisxzov9tpbNWPkJAu1cCA5\r\n1bZvs19S7VVtFWzs2ySu9P6RMi1N2ylkhd+o6q6JhAzj8O4kH/+Tl89FiIxl\r\nA645ZF/3Vfi6RhjZLjKD3XUVwzGNCu7FrPCyyvxjFUbrf5eTfzv3/iKwxUqK\r\nhApd9+Lr+TLtEES+H0ZPiVaqfFh1sxovyp8XY3TQjdaXGtjqTG6AZJb4c7+N\r\nu/qnelT1K1mvXBvU95Kbqs0FVbnyw0wLQYlRi6AFtNktwtt9rWxhdvn1igGq\r\nS/wZnbVFXNzHK7rvMhFuViVOI0tNxpjWF3o4jL35mojswEXNxdOFkzBFkyfp\r\nPjAAJZF2bQXM2P3DtsX00zzRBi9tfxvwNuZIj2AoDEYVGWvaIU+qvI5q+5Sy\r\n3bEZrOADYZSPw7esjH9MnPTfaQX1PCQ5grI=\r\n=/zTW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+gNOvcCH1nW9Ue71xY7jk+N6Q9ZnHE9D7D87p9jPgVwIgFq0A9Ocda9Fn88xyroI2dmnp4L9hjTxcSErfRzUZNeY="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.73.1804.0_1646657349896_0.4552723000829215"},"_hasShrinkwrap":false},"1.2.43-canary.128.1813.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.128.1813.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"17.0.13","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"501bc5eaf6d68a0d89e7643bc6a045b61f6b2773","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.128.1813.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-C0L7Nc1gkhyE0wL37SEd4ZtDkb4ovY2eh0Me1zpksk3LHS3iMQBdrM7kzZRr2vKUSr9I7DtO9iecsoFUI7jbVg==","shasum":"77890c97049cdfde0d9a949f09d4c4b1ece03dcd","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.128.1813.0.tgz","fileCount":20,"unpackedSize":59968,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJf+FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrl4w/8DuySwH5mtCBavglc7UlFn90YpjBhOkVhxfgCmcSoNosHjw2O\r\n7Lndf13jk/n7tf3IU4n6Sch5uf0cghRCep8itqwzwKBs8+qudWMUrYM+yVqQ\r\nm5fsEz4z/qSHBxAx7fM5Jn4mqB05iqbenEZg39eJt0Apneg0e4mkY9W/SYsT\r\ntEk3r9E14H7a/XgR+k0e9dR/ST+gZNdpmGN4lmAHX72N/uw9+SxBIJ6sJHc1\r\nVCIBQISPn9XZcUy9Y839nHmTjCiYN2xxzQmNgemW5bdFqpwO5PrgkgXDB3C1\r\nBPdRG8jq85TvMQPXMDz+FZBnIuhgAmNzTXESK5qB/lIk9fQ3pemm4T0yFSmH\r\nxBd+nDLvAm3Kz9Mr5rJORuGU2XSRj0i1Er9/cfllgVUcGhaIAP0c5OCGUWov\r\niyhDtN78dH99GFw65a4HTVcc7TzCuuUomrnl+S/qdmENEVOurx/jAizciHq3\r\n8n37qUOBux0+1qpLEj/DUTOQ+zV+oVlKDhAgi/8DdPXA1m3q1JAraGHooChL\r\nsDwJcQMSGyPnEkBhaFt/EiLM8ZyU04oDm+Tvz415TX5mGVWW+2QmootNvpi6\r\nPcjciiuuI+gWm3d4ZgzL05vTAQNMJeOcVUtyWBVuDudM6TkDlGpXFE3DluyL\r\nsiONiTb/YQn+lAwM+sByCwDnJM0dkXZhTp4=\r\n=eCnI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2T67DoGHEBntFuc9+ZVG0HvmCz/aglTXZTgquJmnpuwIhAMirU7tIlSLg5RtaqC03X+RRaz2BhiyppyJGdNrtNKCL"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.128.1813.0_1646657413485_0.96757949748289"},"_hasShrinkwrap":false},"1.2.43-canary.68.1814.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.68.1814.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"4.3.0","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.14.0","react-dom":"16.14.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"0fde251034fd8500664960975940fcb54f40727a","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.68.1814.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-stfUyCH9hQuzXr3UedXwEOzSdBoBZNmHf9tN+yIjGYxjihfdiUqP7AHWuPY8MMDfeQi4kBFgFJMjjsr8my4cAg==","shasum":"7d992ddcc0130016768cb2f5ae9ef2cc487188ea","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.68.1814.0.tgz","fileCount":20,"unpackedSize":59966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJf+JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotjA//WPgA1HHcIIyo4/bWr8sPPSkbTAg+lnqq2JFZuwY/Dtk6Hi4a\r\n220egBagzhdaYweyv9tHiq6WB/UFu1eMPSQ84lV7xoAOtJJIRzizD7yS+0V/\r\nUFOPKVZxSQE3/CR6gXZAsax5YZwfV0+TtWxsrwkGLuNZrCC04rf3WMai4P3p\r\nAfR/Al04PhIDhjBqFvjP1P7bcHBZU1BmELcLGqkx1ywJ3PPH+ysh7h1/TdUb\r\nRUQsFvDZgGOetAe5SOkv/UIzHDvAlOVyVDpbSkmqulR1OhuOphFu56PqGNGn\r\nLrMJB5NXJ7ff0lYSgSSBnMveMeL6QvsR0NlSK1fDLe5BtjINnIckBj2LkI9T\r\ni7aK/yzO1Kv4GXmiBiKGUcUP31rU4dE2CWOQjYzX73UdAdqU/q1m/VOHH8uC\r\nCs3MWafKPKtkrhizpG82/q7hSJHufsihDrVm1hQKpn8BhoS6uC3W2OeO+1A9\r\nRugRyU9sgvERaOti8pjE1tRVKbVjim/0KspSBurqyec53Idg0Awk7hCAbic6\r\n9UJ1lT40xMtfAfMTkovfmc++WXmKPrXoGjTyjTRShpOG+Lqz0Xlg1sIWoRSB\r\nfWMeJ7LgoxfSvS1jrlJ96ipSymCk50ZC/v5W3FxCo9np3GufDGBCPR0n8GgY\r\n04kSy9NgKS0wwTo8f2uYn95/8zf8LzcGnbo=\r\n=EVLK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCStTKy/PXElBo3edtF02uuLPFn7OGOme9hmUpo1Ad8KwIhAPwXWP7QKXe9JlnQGobWcnJmariBt8GBbzII6wineX2S"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.68.1814.0_1646657417556_0.6414298750078431"},"_hasShrinkwrap":false},"1.2.43-canary.127.1815.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.127.1815.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"10.34.1","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"e71a1f8ce19064e098e7c43173c59f708f539dfe","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.127.1815.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-wSI2kh/4c/jwP76vmmix1g2taIcPNwYrbjFNVOoMsgwud4wDDJGdsLe7EN9qoJCM39Dr9HP0aF6jRw1SRQREHQ==","shasum":"224b751fd9c55a26062fed4c05985490025ab9ee","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.127.1815.0.tgz","fileCount":20,"unpackedSize":59968,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJf+VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoArw//S/E5vgRUtW1JeVqy11luZeVh0pfAu7mgyoio4u1HCEybLeYu\r\nXzX2Qd54ly+F3Hu9kvENxdx3t0eqG+yeR2H4nc9fS9YDyZ9fHi7QltodoVbI\r\n2Ocr5hMQdW2MmF+xkSWthQDhzN+QbfblTX+0IoFYSrNX9+LVCoE4L6lefeSS\r\nxLKWYYe3/G91fVfN2Rt41KjnhYsS5IpNyRRCfX78rJjcNzHvg2399ob1Xj44\r\ngFf+kAKs6gDEEWFj6Me7mP2aSt2Ai+KFuneW6RQZPK4ztXUNPqC8u3qnpv2P\r\n7gU979NhDySmWhGOjkGYBzNqw8GbCZhuIZporbUDongt7EtME08BNFtsAoq7\r\nNSfA4ppGkb2uAuXeNjkPwlkmQguvJF1CEJhWytx+SQ/Uqx3jJ2EPtsGAO3fv\r\nS2xm8rb59nyG9mKFo/8sTqd5p4p1ZJMLQKIGGBiN+EvMuEMv4BzRd5XzCqwN\r\nXz44slH2vxt3H7TPZyxLLjUrK841dNymIZWMRd4Humiao7FPJNhgLrYIy4ki\r\n9yRwbiXiRxg1Xp9xKegP/3B7DZPKRehQJfULCdFv/qLNNkOqhflrAz6HPB4N\r\nDKzqpN+AcMSohp6CNU88G8u8G4k3Pe49LgqyqdT3CLJC83VM+6xYstYh03iy\r\naVqxU5e9ZEW4TiEtiE3F+JxfG9QAUAJpKjU=\r\n=zoU6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyGB73INdPcgyoroP4LonW5Zgomu8QGBJi7LSkerW/zAIgeGSIaAyF9aUZc4SmZ8U1HvuOMGKiTqlvf+qRzHEOxvg="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.127.1815.0_1646657428873_0.2629350419842045"},"_hasShrinkwrap":false},"1.2.43-canary.131.1820.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.131.1820.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"8.5.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"3b53b16f491436503addca87ffeb30630792d701","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.131.1820.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-GffcS3Gp1i5x60kyND8+27FAIJqVJR/gq9BdO5/OJTssFj2klt3IDvWnChfE2bgOLCWYegAiPwaAwma0xgDHFg==","shasum":"32b02fa56ae6278d3c274a83182fc4b944d0d0e9","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.131.1820.0.tgz","fileCount":20,"unpackedSize":59966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJf+qACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmplAQ//duHxM20dgshOBTGDeVEHGNJLERXY9kI9Y33KR08U2XH/WBFB\r\nZKeQ4uauFWxAvRECXDsqpmnNEwPNFVLKEm/ykQ22yJZZh+iM5ZredaZDJW2y\r\nnTI6FTO5eWswAyoUA467zMEs5cyVqCUMQlZbgLqFxgzspYRKGmZPiePA1Mvj\r\nPQ/UiCzZMba/oWcwglC5A3uiz1+Md7utdRVpXn5nnCQcXKbz1RHt1iAOPxI3\r\nAw5o9nHJUXVqTfzvCCAeyVHPcOSV2duWBMM3hcIIWg+b1lUrxG3t0CKAGYGO\r\n82sanexKEEdJpNLW1kbnWnlkzEG1WOh3X/JHc7q7dwjS+1aKsu4n5uiwQwAq\r\n0DM7rttUSZZ+uvJpIhlbcMI+MkcaEzTnu7w7vpcL73BRRv2644Vo5406kFPn\r\nOly8e+GpN8gmtnlEAeYgBpiLwNYIeo7G2ocuK5I0VUDvagZTcVQAuTO7qXNu\r\nRiEMnsYSCkziMw7+aXbTjc2GRtVBDbWIDTpPNGQFX7vpppm4BJxDWMslu+p3\r\n0kX8zOS97LpwWhbct7NZGu0QisSPoDYjtySN1m+aqIZ19CoJhh6lgEN/y51t\r\nspguj4JswAjyQDzHWHDt2e//5l7/zfuT9Gzl+6AhoQh3HVjIOe2Lx0tEO4Sh\r\nbbw1/pHxadiDTgQI0xMcqifbghC4jBgGCts=\r\n=nHiq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBYUCeWDTa8SwQDI+6vs6CwdG1U6lTJMaAUIjHFUT1siAiAC4QaNRpxUuoIaxyyyz24nJPkPW+RKYYLasDY3uMY9tA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.131.1820.0_1646657450385_0.8431991104071692"},"_hasShrinkwrap":false},"1.2.43-canary.93.1822.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.93.1822.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"2.5.1","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"e59ca65e0a9255bd90d1c7613225b1c63524ff94","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.93.1822.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-thco2L/wp/sYdanKf3PmHxKF+RTXjgS/SdA7YDkmybdD8+C7mRR3KYixr6Xgo8+2gsgCBQSrriOyyVUQF8SrNw==","shasum":"de1456c08aa8df0bb71d174009a54c750dc67484","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.93.1822.0.tgz","fileCount":20,"unpackedSize":59966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJf++ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4Lg/+IL9oujRxPLTCgghYQAgjlVMRI+YMY1zjYNXQUDSshIPXnu9L\r\nDZKIhsOZZK8VB4Xvv1Zrp3sLVm7x3lL1nm2jDlZUXBuaO168n+G8DFQ6tzUx\r\nsCBuiDUqW8u8avyzoR6YJdzdzq/Km8TX+Ht+VcMxl2HIpiRRACoDm/FZPowl\r\nEKzZkrDxe9hexx0yT8L471cgdCeeyXbBzdGQpOsMx8YezmGY0FfAUA9Ldqiv\r\nPr5536UtKnum8AHN5sGM+jHuT06W0P3ZorKsNsOkePvbiLpP9sP+JJ4LFkKe\r\n3DpIeHBlLegJ8wCn3lAsVvqbLLr2iI0fbe4y4ADHExAVwcUZeW/3y8AEJxeN\r\nFHIy82s7M0/U+mUgpcE9esZhrqfh24C2fVv2o5FV2cX+FWR0UbUhYgzaP/0l\r\n2l7oTLgzeGIPdq5ma1pDHbIaEiDUIW8x0sD6YxqZGfCde9Djv1bEVslUQjIo\r\nVVT2RdsmHR4+1LdFf6eTjOFjXlDJpX+HbaXGpqXP06UfrEoUTQh/b54mVB/c\r\n3kOpi/X2ZA8BJ9MWq7K6j1JGJePSgz6I3YdbTSfrjBdSXVD1DlmoIsgzWfw7\r\nipHvI/ZDKJsLEtq+/VLapqnw+5tiQ5X5PegGWu8u3rKLQdXkibLsOr49eQOK\r\nQMhKMkI8mIq7SWj0gBSzKc22a0Ff82gVkpA=\r\n=rBr0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGGIsyTKSyYwJX5BFAg4O9KBbDI9hhDgnceP/sjs70s2AiEA7cFp6GjwFi69kEbC6msv6nLrZ8ytpuhOB/MIHS35gow="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.93.1822.0_1646657470594_0.38988965192606995"},"_hasShrinkwrap":false},"1.2.43-canary.73.1833.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.73.1833.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.17.6","@babel/core":"7.17.8","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-optional-chaining":"7.16.7","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.2.4","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"1cbae1251aa606274ac1d602019e31edd572b654","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.73.1833.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-J5w7DPkIjocLUUsadwwGBn/UbtHVUOggx6WPXwb70xtE84ijUKzQpCmGrgmXBVLTtZFhfmnaZR3f0ITbmw47bQ==","shasum":"0412aded003511f11ff8e091cec2e93bf3e1014b","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.73.1833.0.tgz","fileCount":20,"unpackedSize":60284,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPx4eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJvw/+NioKBm8IIKimJl9ORJnJUM0gRkVTps/amPkgZZ+bhRxxA20R\r\nMZ4eCzBbcqtJ1tHWxOUuaBj6me6xQ8TKL7D9KDUo1dS/bESAN0dCv9xaHANq\r\ncK3tUqqMXim8fLegl3MrA+qoRwA019WGUJaOhqXfmQMbAcYA3WfDI5ShSfCC\r\n29YvELRr74N1cRQqou7zlFQM2KHV8zz5hYIuKWwVnNsjD1jtR/NbCsnwNa7K\r\nzKsZN3RumLHovtgLqX0dkP7XJJMWaVTWue9Msea4oCf+9fZqM8CfvUlKzQQS\r\nTk8xcHS+t0UXV3O0CUz52Aenholuu1OdEgcnDbUC3mBJW99Lc9/f8Fu6f9wH\r\nMx8MIs3Kq6G2xcyV+NXsOfnFZvYsL7ICW3oCPTdEyfokJ4EOt0f/G3s3jorB\r\nLM+FzsA+W1onCltGnCKSB2jZOEnLeTfVIXFxRf68Ke8dzdPDuVGapygQNpZP\r\nLdJY6S0q+QNX+ILoa08+MTY7/wf0KyuwfDVN6EFv+o7RM2Pd6KmjaN9GlqwI\r\nM0zpUxvH9R/vOnAfTtLdb1U1vgoEfE40FeLqslAky5rlcMZP5RSKlwx3sjKJ\r\nFBPlMsa/xZX4JBUREWxczK8eTvJ/uFsg2pyoBwu7E+42LRonv3bhbetrekTt\r\nXBKnLEEXNzK9Gw3QoQ3Dr+tb+0nWvP8F3JQ=\r\n=isy5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpuiQtkitGBUans+0qn+DBBeujbJ4fXOhWYUo4UQIJ+gIhAM7nH5/zXhrGHYvjnTU7q2r6hn97dlU+D8PktEN8vH+i"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.73.1833.0_1648303646584_0.46958293477992186"},"_hasShrinkwrap":false},"1.2.43-canary.127.1836.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.127.1836.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"10.36.5","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"ccbdb03aef6aee4378e895a249f6be6590223feb","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.127.1836.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-KOvLxgMeSLINGlmpcJd8W5MSKBmlaRUjwUcoSDcUBENrVRvO5ipmpy7r4BhYGothfxVfNzlQeRjJ71ZmJgQ+bw==","shasum":"9006a9593ccde8dec34ffbeb178b5dfef8a39767","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.127.1836.0.tgz","fileCount":20,"unpackedSize":59968,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPx4zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7/BAAmF1chkKatyAVZAwJoTbwLn1CH+M3FDW8BthjQ4QbL6QrUXOD\r\nQ+r1IH/fSi4p8miH/OxOGnaRut5Zg/IDvMRb3qQ7MYErwBbe0a2Rxd5WIw+m\r\nr8wDzBFHAB8LLpVdDWxHh4lZknVDAQLrEN568B4/n4+ACh+tl0pcZxcFnhoO\r\nrN3jbfhpqRKnp251m+19E+tMQSucXi3KeguV5HllKEISOG4rwZJGWrJAlEpH\r\nYmsMF4I2KE1ZOsqNXf/N+ncufMocLM6dRzPG8hRA/6ZBGi/8O2PfdaWeZnvL\r\nDskLoXrceLbh//QYf9hFJqcawSNdz/wfzoGUTFxNZHv8U/ec199jNcrdKjWG\r\nuNm+4B7yvvU0aZQ26a0i1kr3AucjFaIxKBGYDyF3Phy+75AS9Dl1Dz9OOs++\r\nceaG8fmuhgm0t4bptLwpXr0Md45JudrsqeGyS3aj6/R4vQvpnkKRmY0WCJfD\r\nUk9ZBT9Uq6M0A3CZVuwhGPg9EEYSr/M4evW2+9/xBe4lZ6ihj2xUukumPfXP\r\nE5R1rzbmvArX+KDrKfVv4MwMYaLcDd6HSdS+RpjgcWnWnBLvVJS8WMj+tkbH\r\nd/iGG1pjxOKv2Wb0GBUFfht6vx6C06Sq6keD0NZJqnbJsIrZylJivXhfn3VU\r\nRjywwMtI5K+lBcUNL07QpmC/lDY24mth3rA=\r\n=7m+5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeQMz2u3pTrzi9ybFXqvJC2uTvMiTib+3sha12iPA7KgIgFRoytISBQVO7y7DQa1X+Jjpk/8mGzYXlcUiHkZwWK5k="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.127.1836.0_1648303667837_0.8942706708163137"},"_hasShrinkwrap":false},"1.2.43-canary.128.1838.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.128.1838.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"17.0.14","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"cc41069735e5265d4c6789177a915ad1bf2da88c","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.128.1838.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-Snr3Fs6PpSmWeE8cIPqDXOnCvZRHkLYqdh+AaIYIr+qyCEKw/QUfYbjrjf49RwytXOk3GwaC0sdw9/rGUt01jg==","shasum":"c2720d8b1b0b04b13bb41b06c2584a4601f45654","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.128.1838.0.tgz","fileCount":20,"unpackedSize":59968,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPx48ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoVxQ//SOy1vqTk36HTRVhZCCdaO1BqRPaDk7Lork9JzVHFenykfmSW\r\nSshd6M8EKRc3rX2i1ctiI4Z0EPz3H3qbDhNZtyS7TptgoQIS/JN9JLFxrxJK\r\nXiU0ET//YCBsfnqimv9dRhGfuPAEXDP0tshPfbZ2AtFPja1WPLd6RzsQL+Q4\r\nicocgFVFASXTtIvKsbb4KVTerb6lsG2CEcCh0ZNCf9aZo9tr1OSV+CdR6+ws\r\nj922qdzHdizCHoq14UyKjsLUVU7n9LAL2J13/Cq8rl8N1KWc/iyR2BTVAkii\r\nbxptRRJIsej5ieY2MoOrBHGgwtL15pOyDGSjaVqgBtdtfIZLu9DWxDpFbkOc\r\nlStH4CSHlFrh3u908bU3cNX9fZasxEgS9jPhF3wSkfGI85294DlCazv6in/D\r\nHuTEphaRd9lz7YBSX22Ud+KsT5aDP2+Q7KueEIrJTyMDTA1DuOQ/5el2BlAy\r\norOQAie7LMnq6tH5csFF72Re2li8I3WGfw+KCJsTljEvN49Rudj7AsOeaHst\r\ncJH6Hstxr77LZitBX/vw9sK+V5moC41adLsARXu7i958zjPkq8tYG2igbW0z\r\nqH8jYqZBwQ0GPvaj3t8NHu7sbknCPW61k4keZi7HybBedy/bAOiDHBzPqpTB\r\ni7Gxb2TnsBZ/+rS+VaV53KoT+7Uth98YUKA=\r\n=Q2tA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGoHH4eiDQLx/L+UClCSbg7cNVUijDAg3SLW0xu0SJCcAiEA1aP4kfgDDxEdfRjaU/cJVAPqzqv39r/Ph0wkdYV0bCU="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.128.1838.0_1648303676691_0.21756405325431194"},"_hasShrinkwrap":false},"1.2.43-canary.93.1841.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.93.1841.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"2.6.1","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"8c12a21b42ec3f875671b9907bd9563ad9328273","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.93.1841.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-UJ962go720tF+L5BmZyT8rRlGBrMtAaZdw4t95/oUTvOtPcNuHnwVoHrNl36rQ2XVfjQm77pkWnrkVsR7vTA5A==","shasum":"41fcf16151b375bc1275f9dc9df4d38f8d68c4c1","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.93.1841.0.tgz","fileCount":20,"unpackedSize":59966,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPx5iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+kRAAgJRW5PExSv2HD2kdpz0uJPRsHZgVEUbCGViM/5esNCOzznvX\r\nAqeGz5E5ZRcsP96bLunRj7PrfwZtcB2dCnJDs/JbXomexL3kvCln6r2+PtQX\r\nGyus+ugCBNVCG6hPuUFz9QZ6vIUdmpOvdbicnbFianuXqMZoKU+l4OToXf9L\r\nTlVMruzRJp6s7jkyM31FMP134dzpjLJW+ehEe7n/Dl4ObOhfCpu3Bu4tTLyH\r\n8kZwnOwbdahlu9F8uHpfADN8682u3w4ToLW7qFHRu0K+lwkzxNjN45bobiM4\r\ncWsceMclCSCU1YCAuRCZXt2j7Mp8Z60cqUro+bkgA69rk6kIHodxwo1bmg7P\r\n5vyAjfmh2ziTeeGtt9/m+P7z94bNh1cVSI70zhQG7gYAJm3SixuRQTaaT3pb\r\nZvB7dWwircv/h0ugaN4CxMEHtdIMOggxpS5VyZxDbahqFxVAJaMWB/5D7wJu\r\nGn0MZQQ7eu+vgEzKKc7MyKRiKtBOioVqBvjPgEYvFIrcWezj4w6qDrkQr0FZ\r\nTmHiMltsqQl5dRDFwG7N9WahuZGc+UN1JBXu+v0AWqKNxwLdm6Ggf/gHCRET\r\nwRy9DdW4f5jFDPB+5lgHlWuRdqyx5I3gORSw6GPS4SFsLi2raZ1ISk4gF1xg\r\nix2EQq4B91iU1gOJS4jrayuBvtsbF2KKDkw=\r\n=fNeW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDoH2H/LKwaTIKZXZX/skkWUoXoXpJqMPzXpWbtwEPQBAiEAkkfObHLbKkIEQ1IOJMVvqjfH4NeIF/chwpWsyzdUe8E="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.93.1841.0_1648303714501_0.5011887991542723"},"_hasShrinkwrap":false},"1.2.43-canary.73.1848.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.73.1848.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.17.6","@babel/core":"7.17.9","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-optional-chaining":"7.16.7","@babel/preset-env":"7.16.11","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.2.5","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"98e5c42b8215fa911bd590c438293ef6d1e8e8e5","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.73.1848.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-cOx1qQ23LqbrUKLgoLaOhxWHnRtEoOyLGb0tLWVvcwtrAmQQ3Ee8RiJwp2dLGRvbGIJ3j+eSn/xGzpoTzIl3wg==","shasum":"8c1822aa640220858be9fc4ea72ece09c17399c5","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.73.1848.0.tgz","fileCount":20,"unpackedSize":60284,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHMPgVeWwreHscEfA/39iSfDd/Yx7ErYuMadtdmpYwuhAiBWOj1AyDWWVptQ7HTEUM0qneZ3BoDScCI2EPLq1bgl7w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZZY5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoiJRAAg1KXTtHRXjZ/MOX+sbWtV7re9FXcZDmoNpNPKiz23d+Fjybx\r\nG27Wo65fsbUM2o6zSxzhSCWuAPcTmuUtWJz+7mEv+0vmLUBbOYGPKLGBz9Pd\r\nvfgfnZVNd0XUdL3KmAOzYcHE85fx4hWu2RfK/abyctZu84Lli1cmPDPK+JuX\r\ngNOFXzz0fDMbHiuz7r2FtNd+HEqAV25dCAyG7mD1EyTwU4ZoO4FcYH2Eye6N\r\nwx8QoakuQZUfNiYfwdrssnYjLSCNGW579henRnljOzzigNUpMdHIgyEskAEa\r\n9Lu/d+ucX6MPE/5bGDHIpCm4QNRYMoLM4ElxFGz237gGG5ClsmT1iQTkP7i0\r\nx6fE8lYhqPCyUcGJT2L+YEyUx5gZqvHnMrw9lXh52VtqcSIc5mbE/N3skVWR\r\nweromIthayNiIHQBsdiXJyYM5l8H/DigOgnQdaEj1vRy26B31kl2XFfY9glP\r\n+E5aINJP1jkEBTq2sNCYw9NJGEtq9qK0fFPc35/Wo7vO124E9SyzRlxnuiDh\r\nTChmEU7e4oI1OypGapmUQPr9e2veHLoQRY9f4Cj5R12JO7SMVZ3AkqohfJae\r\n9WjN05aaawhgTkbn0iVZEtb27ZurdWsDutXTMK49mHmuWE7LUsNVFH+RctOp\r\nPueduL+cjFoFF3/d/pwcDiFYoW2w9597Rh8=\r\n=f+R4\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.73.1848.0_1650824761150_0.06614719062842345"},"_hasShrinkwrap":false},"1.2.43-canary.68.1851.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.68.1851.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"4.4.0","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.14.0","react-dom":"16.14.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"a9ab1e62dc954717c163f4f68a589f519d1ac0ab","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.68.1851.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-EQ5CV0A259VYiyJ5vyhYIIeuDHnmP39CxZfL82qCsvGiMNWd6ATAZaFd78mEE4WBBtVJVju8geH0O7IH+d728Q==","shasum":"4db5e9e79446d720e8fb379ed44670d21b7df1c9","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.68.1851.0.tgz","fileCount":20,"unpackedSize":59966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFplTq/Ig7Ijmp3VgRzY3eshzIiXdLZgAEfXYrF1SIEkAiBuj0KSgIq+NWqN+bnCAQ8x8KtX+3TNhvpdhP/2ADFMeg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZZZPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoo1A//QvCkyNIbJUE7V7ikzay0PrOBo92fWQSU+fyX37dQJyPUH/IC\r\nv7MRyzG99mR06TUR+YG4+EKjlIzGtdnCf0x6Ng3mibWjsPRBI0R+DmzqUaAI\r\nX+bpoUnumm71nkflVN7YDFG3BSnyeDffVOokvoHzpJaYTd1yD0+pOawp7cqH\r\nm50es5UiadpTi41HHYsPRsHc0ny6ggEmX8jG1lYlJq8AS5ly181lGoKE/6zL\r\nbwz+NhbOvIG2VXDdOJ2en3mwcfBGEoefhj+Szxn3AkFAf50O4KGJr7RyOs+F\r\nbB9cjRPkAD0pfvQ8oOr4t1amIeC3ulaIbVM7OhhmbFho9+p8Bz5V1bD/8Ll6\r\n1DK5vtWBR13zbwbUXx8JBT0/5Kx21x6u+CWGrUF0PcAj8Lvlu6FNjBfr2DAQ\r\nYnzvr84hL78VYeATYpMLvCtrgQF6Ul6yZcTaV7WDtQuZTQPbmkyNyLpxyQQa\r\nQjQ7qphPO6DkkYzFVdPseOoswo6UWLnN+Rb7Qha908/0tUnG4iKu/daa4A8o\r\neXO3quk7lennCI6uVqU2n/Cej9g5W4w78qfHNhNGnIUJeJjcYznE30NZ+kbg\r\nK3OQc0eVCJTtrlZfdFEoofvvAe9ndtvmpL0LrApIpe3TV8Mm8OTrlF45kdcC\r\nEOhDrICFNCvbXPHx1489E+B6sUDDvLaBomM=\r\n=KgSw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.68.1851.0_1650824783660_0.10648254221993136"},"_hasShrinkwrap":false},"1.2.43-canary.93.1852.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.93.1852.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"2.6.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"bc398c575bcd608dc1d62266baa94c1ebed23008","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.93.1852.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-ZJXmc+DiZdOS2Kf+3zzTn1pYm4RapLOF7fzfA+qiIY/+lFRW+nwaYkAmQOtMzdOVmM8gBc+nudfvigZgTURRzA==","shasum":"f8afe03688599a91bbc02df472a7a125944bee8e","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.93.1852.0.tgz","fileCount":20,"unpackedSize":59966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFZEGk5ZQcm8uZ2ORaKRCRc5/meACqsAcKbN5AMEmNMHAiBLybZ+YXjbW0ylx2dVqQv7LhPOPVEtBBwZhS9L+tpFLQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZZZaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpcbhAAjfhEwvtL2PzHvuaAScCqDqGJDlrXPQLHj8p19sVRWfrATOA4\r\nUarjfk7MmkfggakXjmRmYPfANEovUCwL0U81+krDndRY3kdrysrLCH2yO7KQ\r\nw0LBYLPatkrSY4k2jHbnxUzikQRPETBKfnjeGjrbi8QvnroVYmmp6pas/KcT\r\n4hkzFtZ47RumUUSCy1ZYEvi02ZmbK8kyrw/yVsCtLgAXZPN9Ugmd0B90Bxzn\r\nuL6KSni/5DJ7DH8co2lvp2JiXPmYi5qEMPnqaiHGpYDE8BwNHqf+rC3E4MS3\r\n1CH+ymoLxQbERXjzoqzzui+0u4fRaP31otzQyEh+8e5lATtph447a+M5wyyF\r\nAEfMYcrjqFLAwLih/Auqezv3wQR/NhNg+FsI3MET+td4b642WLCbi5Udbqk8\r\nFJAkFMdFFk8Cp3LcqeWG3ebgqcQnhVcgfZPln6EeUyiLWzN1nKwda/sRJ1H8\r\nobAHjzMOj5gHTnES7jc5zw0XVWhw7qvhJE1GQ8qYfHBXdvcuKXCBYwBZGYjA\r\nCJO3oUOvtLYs6kuftPnMFcaak1gfV0/F/FmX/njNAYfFVFgCoW7GUy3kE40x\r\nwQTG9x6E4/SUBfQ3wjA0y6N7LqzOyHXfwLEU26uE6GrQLUhQRudgnLTxv8Ft\r\niZx5v98zX6gFPvWxeSYafzRUfm16VzT4H1Y=\r\n=OKYs\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.93.1852.0_1650824794386_0.3572786412486322"},"_hasShrinkwrap":false},"1.2.43-canary.116.1854.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.116.1854.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"18.0.0","react-dom":"18.0.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"cb69403493ef50f440e2b501eaf91aeef74731b1","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.116.1854.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-j75hU9AXd38kFyJIXORU6oCpjtwlPxOie8hZQCl5+CMnO4kEHi5IPGY4PAse9rE+/DtlI+xxaEAlPn0Z7AGdpg==","shasum":"cdb05999e2743f1510e95347aa9273ad43492d5b","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.116.1854.0.tgz","fileCount":20,"unpackedSize":59966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEOFNEYtnMDpJm+48jMQr9e9xJE9igyI9FuZB4AzsoePAiB3/ZxQdfQXPPQIcTSF+IbhY/hfLaKDmhBlbeIFNcArBw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZZaXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqgxAAjfLEMDpF9ETs+LQMh1UAehZIvmrD7eq8o9uQ0zOSzCMsYleF\r\naTbYZwP49XBw1STo5wwNHedjvIqJT6ZOBWmLEextGuus35EbAnBMxME+QjrQ\r\nnSSW9PvwVtmapiQ0tBjOotv2k5Nxoi1rgclI8JkvjEnJNEqMmUFARzPaV5Cj\r\n6+OifZtDfNci7tdo2CK8z54nN+RSkOL0ZRh+JbCjvBa86Ef2rPwBHmmeaxOl\r\nrXelKoGNmCsF4tpsU5ftX5yXpGI4gwEQ6wxoBZPKR0JC6+aSX2yvPUwGVk2B\r\n6Bh1pI6NWyfz+suspGtbjyc8KD1xiBC+q3E/f2S88eMRzBwZSXJbH8R163wj\r\nwi7LUT+JVLWfxr/zFsmU2SqdjlBroGwbwNsnrTBMsXiKRJbZHkZ3ej3ssJbO\r\nrphjzDDher84iTMuUd8WSfuufetwtm7JsLy2m9eCrUwLsGyr518SpG7hrPnG\r\n1ZRKd3lcFi1Ip+NTKrmXvUBymUzfla68oRZM6excm+JNcvERz97wmg4zNdkI\r\nImH1+tWTNTx1WdYNxtKqs1+voWZVHJFOXzyHvqbn48wZk39WRD88m1yAGEUL\r\nANqh5edZ6ozO7pyJd5QKgvHL9TeyoEGopnJ/uBYr8fxvePQlUBtavQqZksTY\r\nrcgR6MwvtuBjyHcfPplZ9K8ES9ESHYn0+XA=\r\n=W3U+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.116.1854.0_1650824854918_0.1867588858278877"},"_hasShrinkwrap":false},"1.2.43-canary.124.1861.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.124.1861.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"16.9.16","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"9810d3bcc95ffeac4307a3ea084496cdd472a93d","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.124.1861.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-rn+QHL/QjcVzMtBtxyjwLUa136AVQTBX0sgYJAsM0FcUWLUHFFtr4scMG16uWHhBZQyWa2atMwJieG0dJ+9bvg==","shasum":"8af66a7c7431457f837dbe79524299b18a4751ef","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.124.1861.0.tgz","fileCount":20,"unpackedSize":59872,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC4Pvo0K+rMC3M7zbIEDEqUWOnXVzp0sLbAvmrkI4EVEAiEAgnErj1VvZ9kvDLk3Sf8CEZuhB95rCDdEj9ajNBUviKQ="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigaRuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr57w/+LTHQ9vswqXDT/3C3itcupCHtqVY5JT4HmtYQpo4f5M11D7eY\r\naPhXgEQrnSVODvB099t8VWfjaSRJSxAYbzhkpQTnES5dhDvtGXu3IdjLyKEZ\r\ne5fX5hSH4zaEzVvhrTdHDmVgjwA+luoI3RuZmmUoGir1986bfGApbc+d1h4W\r\nyksdB4o0yKx/HY53et83uyL5KDazSmpCf9GZHCtpgmS03TPWKU3QAAIpI/6f\r\nvwUfm5qDlu6wLlbeKw4vpJPNzhvKKK5fkBEviYUiyrl0hmrhWKLW1Zauk9Sx\r\niiW8Of+m6Og6YK3Tlo/XsMpcaKkt2O5Usigcc8N0BQNjwzoJtHr9pZeLmG/Z\r\nXapz6dCYU1HtWlJaXmMgl8rBlDXHQeDtRzDFw8PZxoHA3cmuRivrnSEBn2xX\r\nMrjYciEV89ovYxzK2/ay3ctbSVGg2kVNe4AdynNdX9UNl9hgmGpTygA5u1TW\r\nuQowVUFl7vY1j6ppCOZbuavKIBYmSjRgD8P1RzFLXsPs1b4d7u/sqHHtnFKn\r\nTxu/xAZnnEljiJFNymUq0fcb8QBhaUg6+dtrEG+DjUEbJlMRi81uj1Qokci7\r\nhYqOmhIFBe0CydX3O913m3VKO/Ha79D83M3xeDpihrNkrdSVoriPOGX1zcV6\r\nLuZzt/a4mjZbWEbIp3qfFLyDgNxGmzVowRs=\r\n=ozp+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.124.1861.0_1652663406149_0.028921361909863608"},"_hasShrinkwrap":false},"1.2.43-canary.68.1866.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.68.1866.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"4.5.0","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.14.0","react-dom":"16.14.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"80278d096bb313d4b005b03d97fbc9ba6164f2a6","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.68.1866.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-wbVaY00o++LjwaBfrIX0xto2JlzDO2ejdN395gcXF/ObORSEj2DRjPder7xZTmkoAKWap8RPfJLuz8HcNe3pOA==","shasum":"de96c9a0c7d87b729624762adfaf57a61fcf277c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.68.1866.0.tgz","fileCount":20,"unpackedSize":59966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmbNLHXhmObXZCwTVD9gkRddp58kTgbnFp3rCu/Zb7ngIgFjSeE5oYqr3I6LTF9UsK8EiJkelq/Sf8iA4uXtY0ulI="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigaS+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvQQ//chU1S5lC34TzIY/tTtoIFbrz3hPaomEWumaUA6gDlBJdaEVK\r\nIEMqrvrzpHXdKcn1Z2kZLy4cdBpsIpkMO2IuqGoB0d67e9HngURsUY52AU/q\r\nSACu4cPPOvbsTT+Fsu2XBRehnGL1/YFZc4PxxF1x84rCKzqhBEfWCldjHNnG\r\ns/R00KfowNbzBIEwg62/FUdOL/mOrFOCtOZ1A3fPQWT+d1Bmf0EmmLAaWB3g\r\n9n8wPUznP9WDpDJ9smum7vs3V7HbzWoGgjmhId7jcwko5h+xfouPxZHCtBOp\r\ndJaJazp5fjKRZ4/fsaKqJZeYBp9NS/54UUcaaZ3CprTEDxnaUyes3O5rcoX8\r\nJkvbmRBr1VNpmvNY/LSFOsPnIWDp7DVnsQT2NB8/vsid32Kd6KreIzI16N1p\r\nWLnv8v53sm4VvFXo9CW0w/TxsjmCFUtSg3PF4BbOHTG8cdO9NFZm2jTUOxAs\r\nfylQAkMBMIR/oVHgsuKe+5S/FjBwrJ3NA6PrPdcN7jqPgALfAMFk6IMXxOAI\r\nnTozy3biwHaEz2f2U3nJpyj0t99KtCJ91CXNEd4/Iwj9ysRS5yAdwVfQaCz1\r\n8GnlJ7UusdTYizgnVbQmAQoJpInTLvSI4Ve0urvf2X2wdbcn/QEwr1CafMk2\r\nQDyn/9jFCRc56raDJvlBnglpSTPzLZtuRs8=\r\n=ii4N\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.68.1866.0_1652663485864_0.33200151850159343"},"_hasShrinkwrap":false},"1.2.43-canary.73.1867.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.73.1867.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.17.10","@babel/core":"7.17.10","@babel/plugin-proposal-class-properties":"7.16.7","@babel/plugin-proposal-optional-chaining":"7.16.7","@babel/preset-env":"7.17.10","@babel/preset-react":"7.16.7","@babel/preset-typescript":"7.16.7","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.2.5","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"9adc40cafb7d50ec13c24fc79df6dbf4fe1abf78","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.73.1867.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-/UDyJJtN6bfkoqgdfHSxAHbxbc5bbVEJb7jZK5nOCcNKAlFh1ZcDecmJmtfJgSZCBqqwh03v5CwLUV6DeDvurA==","shasum":"ef706d2d33eb99649dbb0e7b8475cd319a474729","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.73.1867.0.tgz","fileCount":20,"unpackedSize":60286,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTzk2lfSqqcRB6fqK7ilZGY/Oq0bGOaDrOE2RmFtmMZwIgJix5cQr4Ls6YAKyEDAnaYW1R+HSmwQ2Km2wMbxZ5doM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigaTCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpMCBAAi59eWkbg7zqAsnB/xcbM/GJ4L9Nxx+TJSJxIEaB2q2DkGUrP\r\nMdveK5qmta2E2qynFiA8M31diUX65HT4J2sRME3KC6zvfr+vSxDkGjhipe03\r\nbFfxq5xNW/yUxlLD/HR14OqUIalQG7rx3MKS58oX1ttxI6frtma8NbI4LKFG\r\nsiA4VbwSKVCAFXu2MA+FYya8QlPEdXfkK+iXszeDeSLL1LaqYkOBmdcLM4+9\r\nGA83Jehr751dQgX1ZGc2afEZaGzLwbUxsd7vasL1i6GzNY9+hgMa0zEduTp5\r\nHandPueyNPny9dx5OgEbZozcy6ptS4GKoMeaeBrFwMhab9qFt3fUxs0wg2R1\r\n4bpg29Qy4lOvzhrQYN7/8DyjcJ7I9dc6nTk+U4WPCGpNI3mYsO0A3js6Du21\r\nkEsSF06CbFH1ws2lBI2+/VNstutNFVDOJAj/jYKkwmDM/umSr6JqfkIK+Y79\r\nM8Ux0ciDw6qC51rW9xZQt1YBHOW28OzGkqv5wHFXKauUKcS2EFfFpqafXrBu\r\nJy06Q/yNk/s09wdPl3dMA2T9mnS2hu/LqRjIQesq8PQ/nLPOAF2veHy0LiLA\r\niAZCAq31cTDOkXjdtT6ggvAPyfxRFLafYk/cFTE5HAg+9jsm/mpx6qaYaSyb\r\nIos7LsdIIp6n/6lqGJYJVa7Vw/cdhUCGyU0=\r\n=qJCk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.73.1867.0_1652663490233_0.11992821579492707"},"_hasShrinkwrap":false},"1.2.43-canary.116.1868.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.116.1868.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"18.1.0","react-dom":"18.1.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"de5ffee2edb035678fb321c3be4ec64ec04957be","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.116.1868.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-yvSd0R9NPkdglDaYCCxNuwa44ixcNu+AGQiRK3BB06Fbpx66jGFy3zXU/1/KxGW8pXM+dxcLW3d7XnsSJ9MaiA==","shasum":"bca0e739344740eb1699fc3cadc72f0a7acbd764","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.116.1868.0.tgz","fileCount":20,"unpackedSize":59966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7BWprMPDejXfeHgB4XoovHzCJ9jF6fWUtCZNL8I/r6AIgaW6VJaR8UbgjMGTp7CVKKx5f3VcmSRAC/yrYh8DWboo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJigaTMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzYA//TWzkMwEh+trSzzy4/MK6aOpnnvn0QhuSmNcCG8CW3F1rw5/V\r\nN/2m/VbEiKunNup4/97g/vEMN6OZccZftH5iZWI50NZ9dnKbJpdDPLcXwHx7\r\noBoWmqpdzilw0l/tWJ4U2VFLKnzKXOnJzqNxWvyX1qkMuIDOc6cRxkAK3VRm\r\npPACUVRoHMOM7hbTgnDvDCHyK4TGRdBKsPqHXdMhXKJ/Y5W9khSWIb5UFIkB\r\naag62BGabeIio7nNJmg46VnKg0cWMEwGbQ8woWvXqygfB2Y0ZncKtIlbjfN1\r\nW7Ju6qElPfZ1i+JCLiExXDr4FI1tRaNq22H/WG8a4bB2hAT1E52vaeu0fZDg\r\nQ2L3/A4RAJuhMH+HaDybBHks8tGdZWQOmIJRt6x7Ndx4wO3DQR6FrQyCw3Bo\r\nCtCbrWyxv6k1iofwAVXsXdvu50/CXVWa0VXGOZJLhDCJwSSn96r5Vvbdan/l\r\nuDc54t1yUxhL5QMVs7wKnUB9iPMQdEwrk5yHcIfHEptCFCHg+XIKS40Lmhqa\r\nItbZjJdO/B3M1QzNAWWeJiUriLH9eVoRlVNSEu6Gp7bw2buDLmCpRHhONfwh\r\nzL1H1UnjNIDC449Nvioto5HWcdDQTNgwahy4A2CLQ58c0BalLmNq8v9mw1bS\r\nE8EpC1QWo3NeLr7Lr9R1T4jrrYLmDChbF2Q=\r\n=hxUJ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.116.1868.0_1652663500268_0.24512476295846009"},"_hasShrinkwrap":false},"1.2.43-canary.73.1875.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.73.1875.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.17.10","@babel/core":"7.18.5","@babel/plugin-proposal-class-properties":"7.17.12","@babel/plugin-proposal-optional-chaining":"7.17.12","@babel/preset-env":"7.18.2","@babel/preset-react":"7.17.12","@babel/preset-typescript":"7.17.12","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.2.5","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"51fc1b77f27dcaa283d4088d15e025aa82f64cb3","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.73.1875.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-ok6KwTwbXJlik75qCwIDL/cTzhzr/aDj13s+KbaWoamUYsVfOnf8hQ1l5aDpK+j3H3Uv4z8OdkVqTih5ttBicg==","shasum":"1be93276211e225efd430c62cf7c0f2c74c8ed23","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.73.1875.0.tgz","fileCount":20,"unpackedSize":60332,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHkCwqifW0LukCdWMazF+STQllvu+P/Et6uOGQhhnvkyAiEA3cutjob/th/XxDE/qqbh3G/G3fVgbV5r+y/eHLbRSqc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirfSvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4Ug/6AhvNHA48H+PY0Od25FbcezqphsN78dDjnoWo6Ykmf7o1VIxO\r\nmRCdCtAoRxZi407w0o34t3CceVG6x9tYnwjeFLO2T9Fi6qkIFLNA0ME0j8bn\r\n0FhpTc4e5xHyOxtEIsmN9b6YFas58CEzVcKL1TyHFFqbBS8177xE2YYHMgSr\r\neJx5Ms0vzBHr9H7fjd428MuPycGVB3rckbuIFUffZAO8b24hbUbGTpa1NaMo\r\n1+ISYPmwdJe1fgUc5a337T/ul39y1l7KCFEp2eoMImtdMrcNlsBd56sLWPLu\r\nmjDqSZ/ey+YlIpBXA7FaBUA7af+1X+Hp7Dg/boBtzEEXIwqmzVJAVAVT/DOk\r\nkDrwryOpgZBY1amomRNhBfi94Rk7C13u5aze7KA3kP2vvrWlTSW1YnsWCOrw\r\nr9Z1hHABSX2ORm5aNfiE2MM3HpBSlO6Jz1E1gqbu6n/PVMp+rc9akYe43gmL\r\ncxBpdddF4aYi7fY1OKdWfGu8HwVkKObG39OgZWaPT1mPBDqDOT6vGn7vVdU9\r\nLEukvEJnFGHdtHzNXgeWzcFmjjhTcXwIK+0lLUVitF4uYb0VB+53rlu1k2Tw\r\nqpMOkoDNQy7e8DS1HhV2mRlIb3vOFF41YNCHwzoeMB0Lds6FOyOHzWE1+nqn\r\nED+N2xZn24eUAAd1WyFMdmciTk4dyuReugc=\r\n=3Xqn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.73.1875.0_1655567535758_0.08542610835357567"},"_hasShrinkwrap":false},"1.2.43-canary.68.1880.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.68.1880.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"4.6.0","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.14.0","react-dom":"16.14.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"184aab97487f7e8429cd8ca198d2ede33de5dd10","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.68.1880.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-oj4KKffWlp2F0lzezLqywZvjsy9vCe77qpSrTk/nRk2khugUVNQLf2wkz7fBd7rORLVDajHZcWmWRXU6/m8HxA==","shasum":"2d22818314619367f09dd978b2f2ae55488834c4","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.68.1880.0.tgz","fileCount":20,"unpackedSize":59966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzTanJzEjL6SzDew57HElU5AEJgkheeJVhZFOQ0MbHLAIhALzrnrgnUDyetWMz1hT2pHaQ3ul5dLefNCWpgB4bM84Q"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirfTUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodzBAAjQthw5a6CzHmZFFarwoznoYo/WaqM6UanIysyqU/0ifeUkKA\r\niuWZODKHRTXM/PTzb2UmRlSz5vcDWNkaLbBkwgaYETiW9z1RzmmRV0WIYEEQ\r\n6AmKRw86cfCRajWFaNT2oJ+pP2I/shEHyI0oah8qvQ016JkqeWL5/T7lEuHn\r\no/0RmAZTzeAyWNvGjB24c8Ij07qW0XgtEON3YaP1aJUq20Tn5DjHkLs8HBu9\r\n3UjpJKZe3GlAVveyfA/nvVAPXl1Gg2lrD6uYBHHGsjuhWLIJ9B0RBqpi55np\r\nnpcPxegYAJTKKxmUMPzLRwJkWJ+Z/OcdIGYvr11HeItPTCmf68p6Rdy+UlKz\r\n2rHnVq+cdb1poiOYijzUQGusKDw7HwnGf84WdAWBPTWPmYJUrEq01zbVFh8/\r\nYxz7cq9znU+pgPjs4fF7oM9EzGDaQm/llVlE93gibqK6Il4crehMlArkzuMb\r\nB8soaC5Q9HatbhD5Sjcar4XjWH8VNqcu913/pzqjvJvJNC0/H3RJbwGPiV46\r\nOjT/yRzuKNszFdAfJxNVTnZsoL6RvXGGjozsCV8GxXS5fgwjnKg4nMYxYwX6\r\nE7UgU5uLCB0h/ETmRh1OWDSsE3ysW3H9oAgCYIIwpQnzuHsgCDatOmeL0eTv\r\nS3PszEldyOp1Il2TOOLeaDbzONloaWF5n78=\r\n=fKND\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.68.1880.0_1655567571946_0.5837845749150545"},"_hasShrinkwrap":false},"1.2.43-canary.127.1885.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.127.1885.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"10.37.1","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"071a60c62df039eb5f31497059e6a2047369dee2","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.127.1885.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-RT9FCMsz2o8Nx130Rc4lfv2EjP2DTvwgH7eWiyVDwrrtVuUeK5fMQN2nfWm3j4i9vgcEcfHHOCwDcnKRuEQ/Cg==","shasum":"5032edc28efbbaf52168884bc43fbab2e3659835","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.127.1885.0.tgz","fileCount":20,"unpackedSize":59968,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvwSeP/ZS6ZQOQBhtuDZ3GRgFnZVwoDT9FFYyMqepUJgIhAKMW1fTTrAjPcQKrQ2Hu5JCQTHd4RrB0Dyh3XNZWfCoZ"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirfUWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOUA/9GILjC/DT0SEV0+VWAT/EByaj5k1ymdiTEwSebIoTPm5JOdKE\r\n4azvlB0WHZ+hjhE2E8t7c6CNF99xnBGjaO59X2KBA29QKTJBZQKXRFBO6iBU\r\nyc0SwLsGdXQUcRDSNM4xmH3Lcsx4a14K0soXsWI4z4ubZ9aGP3Lo/ZhNimpW\r\nk4qBGu53urNxYz3eIGTm4sSfgX3U2/bpJbnqE/le3Lui+3KR26fJexBsc/7y\r\n8pui9Lq5RbmYF3FHw/taxZBGzywh9MDHSjTaTktpyH/NbQOKqKyn3ktaQX0D\r\nARtwkILbV6iWrN/L+zlPV8Kpo4+QNcgcTPhztu7HVFz2SupK8danpRajt1PJ\r\nBPQ6J1RAEdUxjo5X92Tc+AXeZS6FgJco2u819JJcNdsgTOt5a9qqEMSNiFgC\r\nN6q25E6mH4oxcqtk6XOuVLnjG5WZlr/lo5i5lnOr2XU9f5hOi3Yhvc/2ZvTY\r\n28d+0RGgLLx/nCAp0uq8AdFp3Q1tay0Ga8pPlk4Ad0+tQgDeRcKkhUY2XZ1p\r\nMe3Jpgvl1Mi/BKDqjehvivH8l3hZ5l9fw12ph6+ZNKeD5r0W42JTvpao4Csq\r\nYdDwaNj/MyL5kyRuYr33KH0E19rGO7RoSuoMDvydBUp3irotNwJHR0rXJyuS\r\n65PV0HdUZOqSrXLBVmKg6DUUWHPSRiEbSPE=\r\n=UI88\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.127.1885.0_1655567637873_0.5409326715443525"},"_hasShrinkwrap":false},"1.2.43-canary.93.1887.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.93.1887.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"2.7.1","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"e6fe2d53a5066319bd2790c78f27d4a779b8d41f","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.93.1887.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-jlCpakGIWsE7TPCNGtj4WIqU3iYNOcow0pGg0IxHp9/ULFWZkqameS7QprlRygVW+AYZXAft8VGGexM3CDyaPg==","shasum":"6122a13bf06e0338151f728d0d4db25472397f8d","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.93.1887.0.tgz","fileCount":20,"unpackedSize":59966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYsrktJirUvErFJRNAfAfjZTBcQjVfFxlG9FGv8F3d8gIgbiG44GD9t023POGaPA/6cOwXT2gom8flhF/qOicdhhw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirfUkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBgQ/+PEh6V1oP5dPvFlcsCbRdI2mC8IrvHgZnJjtIhNnOI4xs/4GU\r\nHZbuwYkqBMHmtARGPdbXRPTKlsOOeLPzPHj0FicIgWtcRaZSk/Ci0yIq+ScP\r\nqV+8LsRaVmQsZcW2rV7U43Ou/Tjcsb+DJJBZZss/+0HM123D11dXMZBLLT2C\r\njI/LRtKlMYvM99DqxeCoFE+ahGUYjGPnesJGmBTLMSuvMmTXaKPYQqTdYPzC\r\ndWoFRJkIvoSd1Tpppk1yHdOnvEZOccvwMwO4CConfsOd0HnPIIGIf1i3/AiF\r\nSb35V2JaDWbTMiVTVWJ0c7tuXoat1i2T0t8IGWKeKgSb9a82nk8OCw6hiSyb\r\n42eFyiR4gpURdm8IgeM2GlDb6r/fwYAM1irBf4Qfwt6YfbPo1jUjNt4V3y2o\r\nBSiD4jeLrpl97QeNy7v9UmttUrV6GJ4EV5L6hg9s+lyji6blCfbKC42OiXZV\r\n2UYauya1HDaur2dwpjn6vRt/aDb7SrYKjBfhPMlXBDXzcHjz1T5lMLprpxdl\r\ntxI1z3V9fIoh9Uz1BosM/x7J66XtsrK45cgSzG1Vae/6ShUC5MCYNz3Ga/FH\r\nSGQIBuk2DX5NaTzMOoXOpJbpsUOiFmoY2aY56i/b5qwxlsLVuQA+X/d4C466\r\naVdsOQMoNVeNW3PWseCDUaurauhKjAR3J0c=\r\n=4nPx\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.93.1887.0_1655567652020_0.7588850398448359"},"_hasShrinkwrap":false},"1.2.43-canary.116.1890.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.116.1890.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"18.2.0","react-dom":"18.2.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"233d1b688b86b88116d12593cdcf3df5a9460170","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.116.1890.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-xvn9btSiEQoM5MnJT/Bd3xY0CE6zAZafh2U6qbDAVgTiJBNqsB/D0AK1uHW/nwIkyOfxPRQkg/UgAhIxCGfY/w==","shasum":"da4b13ea6ec618d795b964bcf789347909dd38c9","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.116.1890.0.tgz","fileCount":20,"unpackedSize":59966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDMAGVeVBXGBpUyb+Bbtuy2KXY0iSvZrvKzq7t1EKpWbAiB6+O+LGC0KJUMYvAulmHIchUnsZLwlsh9cS4kPxKjsPQ=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJirfVdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrzww//Xsk1v0GimBIvulSQwHXEdpR42KmUG/WUolNMS9FRUB+J2d5x\r\nWViswcTu2DzLmsUPQXaO9TvKTYMXDapIim7T1bS+v3wg4LpYXDa83/PuK0SX\r\nnZzyvppILVa7jlhgobE3qxNISAONTiIyGQ17KUlY6hCG8AlmEKvoZdO08XMB\r\nrOXKNvDxClB2zCSKkkL4ywjNZRnbmqWUC2JKF2wxTibJ6geq0hsdRBMitN2D\r\nxZObNplEY53tlYv04YtmvoKr8PJ5pV4Zfd8c1E0mtCgK+r81UCmC2SJfWce5\r\nXlrqjV5KRKzDR6bbzs3Xk/kt4BvrsAX2AXQe3yl2TbLOIaznicBA9YoxPhkC\r\n6ePunt6bwg3lMXlztEyXhacFF1gceaiudDeZWNTf1TvbE2+arGqkgJoI0jAf\r\nEa+wy9aBG7gy45uSWZpv2wj6lHcec+2eusp5/ZovvoPdOvoUPJoExUC8DnbU\r\n3jmaW7g63rbMCI1VYsAn52IRrrhIf9k5ETKl4OM5P5EOP4fD9bDQEe3vm1N+\r\nXZwMbe5zMPXiaNnKcIicjaLg1z8JYWp/cegRc6AhzT8t2ACFKSdrqIHPSiBp\r\nr59F4dyE20jk1Axo2OFz3n9EAeZ0ybUQM6mCCSTAjlh+FUrLC2jiLgp6LnEk\r\niyy6JnCOBFI1hT/hXVb0C5qw2/R4e4DXxcQ=\r\n=wdNw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.116.1890.0_1655567709155_0.7687338629677634"},"_hasShrinkwrap":false},"1.2.43-canary.123.1898.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.123.1898.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"9.61.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"860641d12ac04361910ff82dbca11c2f32566e87","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.123.1898.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-G1ngaQ2Xtd4GgbqzT/9T2APy4Z+tf1I1ySHBRqk4udawqUEvXQ9ixxHf18FJ0LUlIYd82YUigUP6J6ES4OK0+Q==","shasum":"1bf2227fa40dd5f249518cad04decbdc24aa945d","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.123.1898.0.tgz","fileCount":20,"unpackedSize":59967,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG/XYY1b9WeJ/Z02HMOiiTK6SgXQ/dClTF3RqPAYLmfMAiEA5zfvknNPsmap95G5WvkfXEzRkTxnpv+23cgHILTNJHw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMFhfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq52g//ak0DflxfKzk+9fWSbEmgVWVURD4SCxZsllwY36iplhqqv/me\r\nR1/FjCb6Yf2ublTbUqqF4l9B5MKC98vf+woC4Vufnie7wmPkQpVYg2ea48/m\r\nGjLEPuClFQ7KbheLsM1GWQs4j9bVjzIMFsGak303a3nOlcc4GYbRmTWF9bND\r\nz6pgPA+hFr4Y+cNPp11wwUZiKTZFRbAqQ+SYXf5JOaGIChoZbO60FLKroRyP\r\n5B8mKFwikwmwu/eI7NydfjHvujNLkIHdWVVz9W/4qREUl/mvwoZkxuK651M5\r\nIZUO8YU6CUJ0HB80Qk0s6qfyufNsYe8+tLaqx6E+rFiC1NjqkG2V2kF6XVmV\r\ni+K/I6N5YIEnr7qe9CFQgbUlCONWhAuc5mf2GYlUEFVN/0BDs7BLbuq5dgEJ\r\nLn3LamTsavUyXlcZrNZi2Z9pRUVCi41wuZIYF0HTouH6otfkmdqOnWU9Tezt\r\nz+Vv9ZMlBXHPWDguFuUcuJCT6mkOjMq2EvFs+UzJ9rLVa/yVkZlAfLnGSkJB\r\neR2b4bfvTFDjCcw23CEs1jhzFQN1kv4T5Xl/qUH/uCdav0I7N7iXO1IPLSZ+\r\nnX2xuUneIk/EsGBHarBMTGiAik+XKE4a2pbwdELzvH211QCQEs5e92dXhmGc\r\nuf0izbo8dkhrdTlW85xofTJOngN+JVKivvE=\r\n=/BNk\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.123.1898.0_1664112735228_0.18785118597148864"},"_hasShrinkwrap":false},"1.2.43-canary.73.1901.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.73.1901.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.18.10","@babel/core":"7.19.1","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-optional-chaining":"7.18.9","@babel/preset-env":"7.19.1","@babel/preset-react":"7.18.6","@babel/preset-typescript":"7.18.6","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"8.2.5","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"87bd821f5c68a8d013983d52f6665239ab15913c","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.73.1901.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-hMvNjsS6AlkXO/DaA2vShHt9jKZvaKiJ3ItLJ5Svd/cI+rhDLXl8fP1quIoYXSezlTfBoTeAnrIMMN9w5iHI4A==","shasum":"1a06cf0fdf73d0396689ed883a7532797fdf7215","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.73.1901.0.tgz","fileCount":20,"unpackedSize":60328,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCF3+cz6zziRhrMgwXni4dfpz8yxK+5sxDJSBf4he4OPgIgCs6ihRM4b+Z7QF8Q7JiyKuinJgVjyx1z7VfG1+jjlso="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMFiQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroXQ/+MjaK8Vl85G/+bAd0JeKqjtao1+mQxtzgFhDYNjGEwN3PTa15\r\nrnDPw1HCaeushoQAfQNHU6AigwK8W1cn9YrY9lgM5L+oGfLcs9VKA4da6GyQ\r\nNaL30MD95ucsNRlb12QD+B+SHaoPtvmnivLCWGI39+UiSIg+TBwSsoI0UU0P\r\ngkcLqahYNmIDKDWaj39jchaIOeGFsndYQZwy/5oLr2EpM0SnxL2XWPvAewG7\r\ndWasBC/O0S1c8FBk+FrNbDDBTkeYyaR0Co8CvmY9DQ5SJHK2HJ/Slk/H4Ggs\r\nenEvL7yZYOezeSu/rHzeHKNQLuSwc09vCdxxgPNctZs+KVLol/FEodnrzinG\r\nRF9vwpue0DVAqOWXVSPPO9j3MO84mExJzNTrg3IiiQHybYIrP6ISKkPwaejW\r\nOxUBpnMJLzdXqOXXkm6x2QFM7Mq1eAyCllyoV0EpNDBZHzQ9bBGRQET+Xh15\r\nnH4xGa5/dppSHOxehniCMrcWkWvib9JCVBG1E8Z7bbLzdgN1CePjWLkn08VL\r\nlR8KJvpvjIAknjrYkOKUgmjygm1be6FxyVeVEQ8qMKDXCxGWD37Gk9wZAb0w\r\nJI4xbQsNMb0PqBUAcCkgVM20EVyNJjMCbn7sLbp+1eCy+no6ijDHBALaW9TX\r\nu7KEfnOiY0KkwjAiRCu29qkl2rpNbqqh0Jk=\r\n=KTWI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.73.1901.0_1664112784233_0.712919212978482"},"_hasShrinkwrap":false},"1.2.43-canary.68.1905.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.68.1905.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"4.6.0","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.14.0","react-dom":"16.14.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"0b426e5b5c700d2f4664d875e66158a52182c41a","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.68.1905.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-ykaZAAaZVuR/gdIGTYzYSjofcLWhLvWoaPDhXDC7PI7exWEzYZcn+C2YoSTWuzJr1USdtAI34qM5E1pMTT86Ow==","shasum":"7b7dd10fec1f126376bf3739d9b0c65d08fe1df2","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.68.1905.0.tgz","fileCount":20,"unpackedSize":59966,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChpskDFHpJ9HuW1H1FZ9A7/pVjZbRbuih1lddz6y6i7QIgKSCGr49TUvGpqIsXIn3ojPRA8djXoQoF+6kg8AXoTLM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMFifACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFyhAAjZ6ihuuhO5uxlyGU81bwy0P9nTxOm0TAyO7hHM7U6HgLgeQW\r\nvjxrHCFYFCEe33uv+97AJWRXB/gYO0BKjFBr7Olg7uU9Aus2Ky7eAGj2/kF8\r\nAdE9G6SqJhhwbhB7ZnU6u8ntb24vYWkUlZN6c5NFuMuCsNj9YiykhyR2xIwK\r\nboZXZnbA9JEWr4RRVD6Y/hGrygz/H0G3wVu7pJ3IAQSuBSaCMxRxphV8EgG+\r\nR+pDDfj0usQqxVb0MDyUpgAviVXIR7sH8P4+otG3yqqNRSFlKb6jTaZppGFY\r\non3EFl12SK+Z7P6OUnhGGnUgTJVMjAuCqued+5Mue1EzidP+6Jo1+V8LiX21\r\nZ+r81SHqO+oQrF8ZLm6v4lh6ydTpeXYDRlYGDfy6nDiaC6pxHr6mnbn+zlF9\r\nJjNUXAIPOTajSvBWg+h2bK6Z3Vu0Az51OrxOKPLUGkbkrihofLyHtb2AmdKN\r\nphVzsHoIF/K10gbFY958DeJYrEFS/Og8jxciYk5vvQ9eVRmNQLPakr7Auf78\r\nSWrDvR1RHsiqhl6i0E2aVTyl+R/NtEbyAjPlV1TKCISu9e5xYiC+UMV1fk5t\r\nvNnEWzCkZTE0Po4oJ95Ens5iKc4FE7U+oBvEZCmhDQzKon8+MzPTasLUPKMw\r\nmjezyEqrXteU0vwtriksV1faS42snii3e+0=\r\n=FD38\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.68.1905.0_1664112798976_0.6646375200563408"},"_hasShrinkwrap":false},"1.2.43-canary.127.1907.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.127.1907.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"10.37.6","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"7521b54b242a624b5b0c72f2a38bc91d77d2ea01","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.127.1907.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-N5nbdPlwqiCTWKDQgtMzn+B28SLSGGKchHoySGfEiPeYtFMwZN90bRGYwa6Uqoir2dNubx2r0U1wHsnNtXsUyw==","shasum":"b2f78d4b6f1b23125e99fcc0b73ff109f4e17f84","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.127.1907.0.tgz","fileCount":20,"unpackedSize":59968,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDk+e9T6qdQeC3B1keUxMcSvXYnrWg+gHWsM05migv9iAIgCu7E4M3yC71eK+KZuEEttVAdDsBevJQZQZk8upCzkB4="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMFiuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqp+xAAhpD6Y13EQvHsxxY2Cs32gJFGNeqBdNfPlk6c9jikwr5ZdVZ0\r\nO6DIeGiQwN/2zpY/w5oSPuJmhE9NOU473kYb0OdrYKphiRUhCOqjq2fI/4nG\r\nh8SFZo2midxVxD/kVTwcY+b9YaCKpSZMANSC1AK3+Pk9TJl6Gua7oEvtKXvt\r\ngrD1rcekCXQYF3j5WOpVmm9YlH+iFO9cqUrPLnOVl87yEbmuACUHd5dvkSi9\r\n1fS5tPjNREjV/w8JZUUT4ysxSSEsMUkY2oFas/9q9ZMo/Q9XbmUZ7+njbZNO\r\nOPDNab2fxaoH95TplZcSzEUyIzEpLhJIh4E2IYHntxfT3IbbDFmECkJ1cp8M\r\nBn+ecoHt3/szLbTS27P4U6r7IWfJt9TXaUQq70vyomwAQk5XnI8pD3gsxpOS\r\nApL+mfISSr5VCJE6/IF8m0AX/sLjIbYsYGxHEMGMc6+2BKETlui4JsrrUkci\r\n2qfE8E8Hm7gbuhbIT6jiBd2NeQmUYr37cYfxTVq6uyNdqLoKkiSxj0GIhfGt\r\nPE0j6yJRhmkBAxhiirm5mxEMVGK8VWhM+3QyfIomMX8I3cEOWVm7A5VhDibi\r\ndfFvlCtfiR/vT8zhOZ6mGDMw+WFQSdZoOcW1p0+HwfCFFP3Krn47l0pejBMt\r\nAy/JvE3+MSBVw+bQ49plPyQ6SyUzwUUK4Ps=\r\n=0GXR\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.127.1907.0_1664112814425_0.0027853642042459104"},"_hasShrinkwrap":false},"1.2.43-canary.73.1922.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.73.1922.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.19.3","@babel/core":"7.20.2","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"505373a49617bd4a9965b1e59a32ee3f6b81d500","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.73.1922.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-O/6BZLLyIwF3WDX0f10bH74EZbsUOvYR/BKgWZ83ofpYsKniFG6ZnjXjtqVgX+wK0MTTlQUHYkPYPDiNarsddg==","shasum":"4a832a59d499ed01da8cb2d4e5ba66019257a41b","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.73.1922.0.tgz","fileCount":20,"unpackedSize":60049,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2VXNOjF4IbmS6dUqoO83nnSHrs1hxXAoLHHAJpwQF2QIgMaW2qiqv9dG8bghgCP5+2ddi2ws/+dUbA1buMi8zkHA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjepgdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSxQ/7BGBFkxvNtjMkf9lWOyuqdl7aSEm1fdwtC7q8AUvw/3Xc408a\r\nj6Wh3XeimlwzqIqQ7wmPSyrbdOzaTRg8WmNDQFnVrcV2Accv1bgr5XRQrwNb\r\nMrkvCMDpit5jkUsPDJ8Djt2H8/m6z1Ha3eIqrfxNgxQBBCLcDWbuOtVEZCOI\r\nKk8hWJJkkuGauM++24Ao95/ZiSMAouH+ZhmHOaNKCuO0LU/uvydmN+IhF0Gt\r\n0Fy9nj67DdBLs6yPH+5kSDhwYWWi5Ac43dFVQoHZFSME6z2q4AltwAAiexuT\r\nG8kXxsGwlLsr0dofnQk5ElXNA1KcJoGRTbO0nYe5xFGdf0iCuI9PjZ1CsmEy\r\nIvOZT89Q8eTDKBFLGOyVl65v3aY7rTEPz+hgMSSFqg7njE8uu8cimkluzHx/\r\nBBul36dg+60sRY9XjMgwXqlCj6yTxMq1y2T5Qf6uBcCtj/QVDotIken993wi\r\nk6pJsxC5VVdsfo75y1Q5NC0oS/E+NkFy0P/YzFkAX3PjnqkNXa+5YMsEZ9dg\r\nD6plYlxLRehLzARGsdGB1InQaRoMTaDvWAn9BaOtgmAKcoFvN3pvVUUt4JHP\r\nIEHUZ5zhCr5fh7yFXt2vS9aRoBbJxvdcb2rFypFRF0wYJA0liZAUp2IXvwN0\r\nksw7fqLzZIE5npV4U0w/F4zTMM411xnB9yg=\r\n=CmC9\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.73.1922.0_1668978717263_0.9677901981254162"},"_hasShrinkwrap":false},"1.2.43-canary.68.1926.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.68.1926.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.14.0","react-dom":"16.14.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"8717f432c83b98371d6118c3f66a07fb63256875","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.68.1926.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-BlTiSQSV/yed8S1xabGGXnIg+fGeUsjr+dxKEhK9Tr+lVSMUuI6XW4AvgElP9TwfqpUmr0V+5V4+T6iW8SkI5w==","shasum":"4ae20ef83e7661da0ea1184429f83c691892846c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.68.1926.0.tgz","fileCount":20,"unpackedSize":59967,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpanTQxruB4JLwO1cqGUDZvEyxNlumdiiii/Nk2HEt2AIgFUtgCTbj3vEZ3bAxnmoOiopbzG7FHz2qXsg1ftUlQPk="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjephNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpG7Q//ZFgpMDgcJUfpxx4zKP45HgsuzFplV7kOGfHH0G7OQ5i9/9iI\r\nqiFZES9F1iaJ53I0poSL8sBCdklDvifEWGgMKv1VAiW1K/TcsC6Oi9Z4sBqX\r\nuS+Pac88byrxxgiw4MPsZOFdqUZhcRB+F9NsnlQppOj9a91z7DFbWCu8iWZN\r\n0XFETeHiJDElxbF40wBkX1Ic8ZtV4/HLcA1ZAXKPt2j35Ft85ix241PLo4GB\r\nKw9Wih9GuXvkT2TRmSCLCzK9EhpIvk5VhabtuIBL8F/3W4ucN6QJspRL6Ts3\r\nQIedsXe0LNZTWi5tuyT7kf1NT4akuI+1xZKe5VF0Vc7JGHZrGPGwwFz9SuhC\r\n5bDZSE+2sKGp7fgriJUwxCigOYMVfT0wSaBKsxfJD5+WYGGisW0X2cC1+wDX\r\nmGvDEYZWKXvlDUx2XtMyNhrPH+hpp1+eNblvgAo53mwdWzfS/dMC4pL4IfV2\r\n5RXGnC7EPBMxbUESXW+wmUuS5E7xiP6sLrq2cZ3ihicUqnI+wU81D9M6PHWm\r\nodUZtjMETYPORR55Q+VuWizZ4Qa7YcwsJOYT59/PLG834cTjxdB8oszsj+m2\r\nUdat3b1+ONe4fPUtWERGm45f0NeBpUfQn4T8i1OKEg7qfNJzC0+yq4NAoi7f\r\nMBzWAr2j91PXtbZ72xWPGF5sirjVNvtsuvs=\r\n=qPvd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.68.1926.0_1668978765130_0.0010983002527160668"},"_hasShrinkwrap":false},"1.2.43-canary.127.1931.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.127.1931.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^10.0.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-loader](https://github.com/strothj/react-docgen-typescript-loader) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-loader` that will omit anything that comes from `@types/react`.s\n\n```js\n{\n  loader: require.resolve('react-docgen-typescript-loader'),\n  options: {\n    tsconfigPath,\n    propFilter(prop) {\n      if (prop.parent) {\n        return !prop.parent.fileName.includes('@types/react');\n      }\n\n      return true;\n    }\n  }\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"b377fa19b1898203e932649335298f11b7cef7e9","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.127.1931.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-+L+oE+tyIwHKhuCaEggTZmlVwSeWOf77ZEBOkEB7sfFxmqP7hWWmZ/b5ik97N/HjVR8F+si194V6TZXOrGVP4Q==","shasum":"8dd7baddbfa6c3f191d22798b4e1ec2678ddbd62","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.127.1931.0.tgz","fileCount":20,"unpackedSize":59968,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBdcYrtq1uoyYTfpMgQJhjM9IIYJpmLpQvPyHWJsfgj5AiBIXOorlWb1FvW7evzXXgknwiyWRqgdbUKWKo53wjIpnw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeph5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpEKg//Sj+SpWSK9mHD5510QCOjoxhBbpXCRj1+34nQdbD6SgBc7Kcq\r\nsrVUNXmMv027ycB5ELwZlVBNdCCKJd4XQvwmdGMCjQ1R5nWZEEmhtYhbngTc\r\nISIjaMZtXQNSSIQK6ssyi3AMTPr7C7OyIdVEQr70vHaFiQqTWk17hfOJm0ui\r\niBYIYauz8k4QmFw3yQwIeWrnRGUx+z3ymbsrCDk/fTGm23hAhQN+J3w/LPeR\r\nXzF9icNvSGQ/l2ngaAKWloTPlSbGOsw/NBAJpt1/AHOeRUqqqlqSS5YexAMs\r\n2sT+moO55u/kbqTvX5JqB7LLbF1zgP5A8nThj98ApJhJp/vrOitu5bbFZ90p\r\nftHNvB3Bfg84zB/4xyUcHfTebJqn3CjOuVFx0g4i12bIKdnnpBgz9avQ/08G\r\nGb1f+k2Aunqcak1JzsR/GuaRI+hI5hE85d1lFrYpagoIysMjMmkzNBOGW+mj\r\nhGT+NO+pF6sTlt+CRwMJY7wMRPhUe1omPxLZdXXB4RZ90rLyjn3KGq26GMKP\r\nplgRx/SESp8DysjD5XWy7Q6nj3VP8qd+qvl9jQg0kyEzXaNKHivmiCVmjerb\r\nHpMhgwg6CAv/yPVDaU4Zs/PRPnoxsqZ/R68kP5pa9JTULPVTtW3xdyxS4356\r\nTe1qaL9vHAhPOabj2R5POc31JUWUkFy2G+U=\r\n=5JWq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.127.1931.0_1668978808909_0.8531871438225236"},"_hasShrinkwrap":false},"1.2.43-canary.138.1943.0":{"name":"storybook-addon-react-docgen","version":"1.2.43-canary.138.1943.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"ec44220ea6f0dcea2c923bc929489dbe9b6d6169","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43-canary.138.1943.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-wW3q3nJqkyvIQ9FXDtv/k4K1AxB5AJQCNAZwMjCENHEArKjlYeJ0OvwyQtXxmwY/j5vOhO+9u4rOKrMFcCEKuA==","shasum":"a008b7f92651789eeb23d45782d1b4ae27c892ba","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43-canary.138.1943.0.tgz","fileCount":20,"unpackedSize":60316,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICWGKvVEY/bORLL2PiE1nbwOMFi5gF+aLd9bcqtbl71qAiBfBIjl8lHwQq/D2SmWRMcXImETt3RpriZwlHfb0VY7MA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4S/YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/dhAAhIFnPoguQm2RqJ8/MwRF4mN8an1Mb+F4tZQxdfYRIgg0cgnX\r\nfGWr2v0c+OdoR8xfoPG6JpccDxJGPqY9WAb6/SJdYmf1zsLsYDjRnAvByEZt\r\n67Up5I4mnUuiI33S2kNGTasla8BROvjXgboq6duNyEK3Yk++2qmQM+Gg6Hxl\r\nFxmq1xyoWV+FKKw8awllVLBIYQbjhAHpDDfwsxaifuKd39QJUxROUuReJbPW\r\nlRfwkjMVgIaVmiQ0ofoyatRT8nfXjZ1j/SyxK4T250ja+xEW61bF6TvPhIx8\r\n9s4/ID+qDRruHyu3j0g8ctDwwTHyBIQQGyPr5qT6Yc5i4HxGvrMuewxc3aBo\r\nD+cuR/DCYjzCHYWgGr67jQooonORhI4vpdTjutT/b+ktQy+ZYma2FRkukiER\r\nEoblf1wTEH6alP1nqZE+gtyFTl+ahkttapIJfNfnVwF7I47H7lcgetgqFUaQ\r\n1zzn+Eq8oEJYsAnVXyamqIVPC8cQoh0nHm9KDSQum/lYXVPyWgesFjTrize3\r\n7xgfzHVDJpJ6UiQwJEbz8ZiEdyDbFYG66v4EAnDkEW+fsasC48Y3pRAV1HUQ\r\nLwhImxk/OYmcQUsdJuFBrXzFEFlwY59M5SHHi1R6bj+5Ju2pnermg4BBMMsa\r\n2L5Wi58GNYEv4wMO6FGNNVL8eHobzyEwTog=\r\n=SAdQ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43-canary.138.1943.0_1675702231995_0.36848677123794693"},"_hasShrinkwrap":false},"1.2.43":{"name":"storybook-addon-react-docgen","version":"1.2.43","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","gitHead":"4b75fe87d5672faa46116665456ebb7dacbfd52a","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.43","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-a2oNpETFgyUneCtn0OPS7Bjssd90Ub8PPf4ZnfNx109Da/y6S14CDUtgzYEGfSh/WdH/GsNW14flQLS5Mnj6SQ==","shasum":"bb69a313a1fc3703d06ce7f7de07c47c1ce85933","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.43.tgz","fileCount":20,"unpackedSize":60298,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE+95/xC99kEFoplTqBtfsq9CplMzVOk2qEh4G37xF6rAiEAj6pJtyMq5p/mNx0Kvq+QC0ChH51wk6WYD7sTgoT4aVY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4TAjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqyxw/5AePsLvTBWfLhO5GXHbBOje7mI4Gawnb0pkvmWlOLjiixRRBw\r\nlLA775tn53a4h0zgTMWC4QQCEouUcZGb5X2wkRNGqTkdv1nKBgrUWrpcfage\r\nUyX+ddh0AOzC8qBFiRfUH02g/47Al4FBOFUex16Zi9pUpsbJHYdz01cWdiId\r\nPhgAn0N2jre5Ey0EudP3dLxgmXqrI074kF6L2zDf1axRWjjQR4hm3sDwfXjt\r\n1Qa2V5yOQ3hDXlfP+JJGh1MHPXmYi4hEjYQOjkT2aDbd9Jc6ziCWPTiCk7oX\r\nVHVjkxwWLzNaD894ZrmtwL/EOWF+HJAtoZBh6RzNWIW3l43CG546Qv8fxDAV\r\nHnGAY+2syaYoRs+SJPupirvmldtdefzCuiIjfcmZwihfY01TIkRP3TPLXL5j\r\nFmEslIdkEY3qwv5+zOvrjpq0Arm8xAsSX0M9sfiUAKg6FMGzJ+3p0YfPt8rA\r\nhPMMsVd3UjDq/2w1j4flbNBizsZ7ERwGA6JhTA5DI4ktwKwH0g9BPNdqHxKC\r\nocDZjDLIVkoRlUsaqvGky29RHnQUJ6tE0Abs2dirytAUavbe0Z1kDCJnnsqd\r\nboFbtpR0RuaeSXD8GQPpaSIetEusVwqaVKGDlxIMjoeHMjS7CSkweu3RbFan\r\n49ogmjONlf3CjJEMsN2audlrjJQaL0jwYvM=\r\n=hsYq\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.43_1675702307606_0.3638689144159051"},"_hasShrinkwrap":false},"1.2.44-canary.73.1950.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.73.1950.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.20.7","@babel/core":"7.20.12","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"277e08c35886242d708a8516538446ea5eff4a4b","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.73.1950.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-l5MI1xSwvBXNH+vODqblTsx5DkLmmxKF3hDexNUSUO/pU4Toahf/uJKAAWYJjd7R0OwJ3TJVx2ju4rq+AwrNNg==","shasum":"f1dee5e57b39d0b486c3726e274f34d27cb79ded","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.73.1950.0.tgz","fileCount":20,"unpackedSize":61959,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1Sj+gqk23VQNgoipLAnlQkTRTBMd0fTrIolnwG6RDOwIhAJ86jHLf17H/KlCma4g3rahvjigSZ4Upina1j9Fo+v1i"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4TEAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpobA//TRWnMtZjR81Kc5uMTEGfj6joG2GhJ7cbmlGkQU4+9nK3ohXQ\r\nCORf5iT/Hlm7erbr/B+muaz7ZMXQ3v4rG+bfKmVhykp+rlpHKV4+fye0BHrG\r\nxg5JK3bwqYNavZrid1OXNN/pkz8YlXJxQ7ZrhaZC1gSV8eW21kQ7BC63ey7T\r\ndBOeNoeQEFbxZr2lQTwMRKs7u2A47Wi0Ezlq2ddq+j0SeuuLjOrslgC5M4Yf\r\nK/e3ciPOVlrX9DetHR9oBD161BWMuTztlhzDK2cgB9alYOUMxgLb4K66g8/y\r\n99azH2TqRieZg4GC1su/a7yxS9fitXM6YU5szNaLq7wqCTUo9mI8GA/Kl5pm\r\nXGKss/w/qZXksX783ho8ddHm6vLr+eBV3yPSveLzKJZGc9W1H4GvzVX6k/Mq\r\ngOnMq/kpKJWPgUNIeOLzqhN81kjcDpZcPmMldLb/3vr2J0NRzYUw3v2KRa5D\r\nWIzkTwo+Ts5El91hjU2c6PWbWQyebshHg64XOYqwK/YVLHrLQL5TwnbQ14ej\r\nvXTVpPrl2dgAR8t+MypdTd/RI6U0JCP0IUGYT8+Pd32jp4yznUO58iOyqYor\r\nCNJIPfDxbnl5cVFVrW2s4p758+qJekxlOScZqV7+FVtSJaVnCRlEqODZjUPn\r\nakWrwXAhveJ2eSPcIQNUtXKOv3sDYlPIOcg=\r\n=Ouck\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.73.1950.0_1675702528635_0.24868687377023702"},"_hasShrinkwrap":false},"1.2.44-canary.93.1954.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.93.1954.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"2.8.3","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"934926f37bb851ed2570e35357c5916f18e9443f","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.93.1954.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-vr81Fj4lEMHwIO52UZ6xNfXDkH54WgkD7gfH4NOziobncFwsgO3KpKy9l9whRpjYmSC1pByfkiXsbb5N8j/DGA==","shasum":"2027bfa683ccdc68db0db22f363cb5ab821141ee","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.93.1954.0.tgz","fileCount":20,"unpackedSize":60314,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID49nOoYqbnjsoM9S7AI7XQ7sYgh76jk6EBGc9b2Kl0kAiBPM1Lh8Bkc3/pl/XEUJXYlzsl8H+39ztTYE9c9Uan+rw=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4TEvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/Fg/+KwtYiWJEvswXUskjLojHlEx9lIicvLpVET29Nyba50RUmwK/\r\ntj2L6O9nZHsGrxp0V+QIgbXWfOTQ2y/EItWoUciRh5f6unliDgG2NJ3KWuOS\r\nrgE7yfR7CDJIcJXVTUcoCDdgxiPQfDhBM7ltUq0WuZ6BAk32wVRTP5OWhaYp\r\nQMLps4l4V5MNE+oGXl1O6xojSXiAnjGdRxgeQ7wKp0EkHO60hSeuyv8HGcSr\r\n3U3j7Khppvu6xLwYFiTz9xpudz5zwLUJGjKJcBx8/2LCSmg+cQosFv46H2rP\r\nGsQKXS64hp/FkRz23iCbRVUWW585q+vXt4ch3V2EjhlxLrtv4sZmR4yUpTQ3\r\n+KivVsUXDgbG7i7hmGEX0VYce3a19aIGXqlfEf33NpDeybRBL2VUqgrPdlCv\r\ny/34cRSDCYGqodaLZZkHj96n4VSaASPOA3vIzy8nbdghi4BpkKOIKfvWbU0/\r\niboxMja4aOse/h13Kcrw3DE8yYEnF8xDqIyWmbF9Py0SuAFr3DeIxIObdGNB\r\nld80lqVHXdVSXbOhU02PGX4qbyWGQjcZ1jZ7AWnuYHyXZmaEPJ+JSwAQGxCx\r\nK4ihpO5HIIkUu68rW8q/5jlkXr8UKOLdX7+x3cV/KgXT8H6yMvqR/IqE2ffb\r\nPTVK08RTdDO/ziu9wOLaZKyuioVXrk1uv9A=\r\n=Mex5\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.93.1954.0_1675702575767_0.13297571928886653"},"_hasShrinkwrap":false},"1.2.44-canary.116.1956.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.116.1956.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"18.2.0","react-dom":"18.2.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"71465d88bdea9f20966d1539ff320ec3964651b6","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.116.1956.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-hUhfLFMSBVZNBvdfYuBzJj/idoZ9Um+MFlZbYiG6kF/ViVCQrq4y3SeLQSALLVq4oPUTgSmf4vQwHMXH9pA38g==","shasum":"865ff242c7d305bc8478d4e4478319f4a4f47f6c","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.116.1956.0.tgz","fileCount":20,"unpackedSize":60314,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAd1eemKL3eaPjzfCeBZVcgyelRvszEi9AJZdhXdA0HdAiBszVVOJ7/AbAqE9RPKvb85XLiuqVMKNjPwEFMUFz1XfA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4TFMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9FBAAihzBSvtmigU8lLBDYG+YJO08q7lj9QhJ4ExMfuUsVxqzk17V\r\n160SqcvV23qUUgy8DywrLQjGqzAtlTIkZrAVAtkxZONU1CcgigfU8ZX74srP\r\nTAGx4qF9jw9xQ+JHjbRLULy6GosinDQIZV8HRJbeJ77l0AVQB57l1M0Wfkw/\r\nGIDs2fYgCMRXVS3TB9a9W92ynvEpPtGLBFJ51p1A8NP4d14GRe91kIutfYQb\r\nK3S5kUEiQh/6BSSkeUz+nOWhOcD3jHoCnGLnponQ0dmzz0qhr8QsLJ1xtwJR\r\nPbSA6MSJWSLsIaQYpAiE32IUHuo5u/wYrg0ucghE+/wrnFnYJztSbYwHOipJ\r\nbRBoDfNYNGGAqzrYlM0CTt82Iy9smwDThA1jui6FDag/X43gYykCEixa67DT\r\nPr3e7QSfh3TLH2f136V/icR7UAKOR0vgULaRadvGw20o0fI6fzuBpfWaby9z\r\n1gcX4ZS3ak7QlqZpCnX4kxDw9SUZ8wk9yiXXXU9Q2pSyyV5YUKDtLfoq9Kkg\r\nsms37wWlvrkTe3eX2WtiX9bOSXjDiuRPrIKDsKRMYc2mkcXh+7fqlMKqB9VL\r\nBYwQfI1VdUPmATi/nQg+uErpJX6L9dLOgsL+kai8yafLtf+51WIvsdBlsWWA\r\n/RrnWX70qymusP70dCATffaeEx2d2qVFY+4=\r\n=IHpw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.116.1956.0_1675702604653_0.44752739078125314"},"_hasShrinkwrap":false},"1.2.44-canary.93.1961.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.93.1961.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"2.8.4","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"c9b8fe952a92705ad80f845100ef5737fdd22bf9","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.93.1961.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-8By/hzv+N4/8ZawILFT1NiWSdVom2GXSVMyTzh5SCENtWbatmdIvV126ZFzYuxO495me1bG7SKlxcY3o1fcIeQ==","shasum":"f040516d7f6c9abdb8102bd4e67fceff5c9a4820","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.93.1961.0.tgz","fileCount":20,"unpackedSize":60314,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID1hQuQ5IPORgLwJmK28oN095Cn+gybI7duQpoEFZGBQAiEA5nS3xFm9PhxU1hCtcZIT5kH/LgFoh9HCEYmmIQwmmIo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4z7IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpeFBAAm0NX3KE1A5/jC89J5qDN43z1I1Cy+MrfB3mUTBmR4RlPAb0J\r\nBPycFGjHIvWf2RYlDoH7qx1uQTa/X3rEun62Q/nDJ00snLH6uozIS+aaBrPz\r\nW4hJHgZpTx/zE4LLoUzhGdUoc/YmqGa4qsiVJANZKGSREf6c/O/wVVitnmpo\r\n9Zy00boMxHr/Laui1DGKCWooCd6Vs8qKWHF0nADUYEQWQXBplU1uZI+xy6Rb\r\n9oUbco5cbBIDnhfzLj12xiaOqU302tpZb0lhd1NZAvzwuWTfXN8oMa5iWtAy\r\nwxPbryrrHIQx0l4CVs4Ixye4ho1/x5v3yMOCl71SVUioNDpTVNDd1j3EGrAU\r\nuW6W5lxZBiU5oGvgNBWrDKiLBU04H2YIf9wjh4mKPL6w8NcoUNlNoW8hXp5/\r\naa1c6EhtiEoL6TQ/bCNCy0Ss448PAERNhvLSo0BvLhromNEWusteO5xbNl+k\r\nb2Axgtm1m5hH6mo4w0m07+RhvOMPqK5T2ypWfoOtaLkAE9RES9oPctdYaJtY\r\nwGwthAeg2pjeY64heyCwpzfjS52E27tZ37YRogkco8JRKQCooh0M+xEJLwpJ\r\n6MjVV+Ww2GHokavia5UPMhPOU/eTxFHeihyZTS6jvJk5y3yisAwKWEC4c0IO\r\nIbyPfJPha90XTVEPqzpSLZ7Wz1QG/KNEbJo=\r\n=uI/t\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.93.1961.0_1675837127930_0.6065591889513673"},"_hasShrinkwrap":false},"1.2.44-canary.73.1964.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.73.1964.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.21.0","@babel/core":"7.21.0","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"279e4779928d8853769dc60eb3268fa31944abb8","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.73.1964.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-ESFddDyWIs0Ljehr3J6Ea9f10T/2AQ7kCMFZxbj1DjmkciZvaPqIOu1QnF3ueS9+a5dZoSz8orwyDtuMXfR/wg==","shasum":"9795751bd85cda9f1b3b9ed47cc473a3e74b77fc","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.73.1964.0.tgz","fileCount":20,"unpackedSize":61958,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHiWYriP4u5Euf08Z9Lrb/K+8torBoDc0VTmXIuWRr3zAiBvI2osaTGJzb6YODhKm2at8INcj4xO0PJ+geoY9mRv9w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj86h/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrEpxAAi6NI7ygM+CDiYGdVDmAm24emAQfX3D/iPJtbU/rxid56C3vx\r\nmWq36PngkrPHFVeowLVHSmdIUCEhC+rAo+3kcU/LJP7UUmWRRlAO8WJSCGIl\r\nAONnSzgcJ46ennxsVb4R/RHrq61/60Y294EYNVXAXkyZ/4ZGqbEIEx0SJJow\r\njB9Lk8i10jPPbcvE8gQg+dIUV0P3MSRhK7gnk8PEG244rPCBFntSSsz2Jw7Q\r\nw5KhSuhdKm3vUHth1W5qA13ZkiNtkx8P4pvHG27HysCDMnUENeR4wV9IWckl\r\nicO4soXznTlOFpfcvx9bljpRyJyS1bc0rAIy3ae40mPvuyKlpmRpkzDpp1fD\r\n0HVmiB5EX52HeRpiNW/bfj45Il+keRev7cclUElf1VE9s1oEVSFOPWc8Yn2X\r\nYJfEV4i9rpI7cVDJyfT+ZThBsJsYl5CfNI76T+lVsy0O1/9uFCrfouSCurI3\r\nFLhT3aJCchCTn6j3DPm6ZYXuYFHz6eM1UtojUa4Kf4YWJkJvcm2ZMw3Vpx9Y\r\nofKKSfzJWEXzew/FkUl2Iybgs5hjZnYJW+kzpbIvY4HF0pMFOaUr+/SCDtxP\r\nWsGTn6Ksn0iRC7xaJmM+GC6C61S+DcEtuMnRzcoaYItB3YQ2+fVl7F32xtBH\r\nUonQ65+deaWzZTM4SIiWPH8OPp3wtn4PRMc=\r\n=adbB\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.73.1964.0_1676912767464_0.2956686816667051"},"_hasShrinkwrap":false},"1.2.44-canary.116.1967.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.116.1967.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^18.0.0","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"18.2.0","react-dom":"18.2.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"29c6a01db55498aea4211f60fd12998e01cf0c36","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.116.1967.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-eQYafJfUwVumJm2I8XGZa3LjjbfLB5v2/u1QNVqxa0ttf0Q/Xczi2jEHTdaXCUEEavFFVLwXnUJ7xmx76AYhzg==","shasum":"ca9dd492d2a2add1b474fc73faf393d829443632","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.116.1967.0.tgz","fileCount":20,"unpackedSize":60314,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDjaCcbfGMJqh9vT2sKcO3P10vJ0mVeZhhgWhGfiuzwzgIhAP/wkBXFCSkg75WTtVrxP9oAcvU5fREpT6Mt0k4+Uf4b"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj+LDvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMxg//ecvY9MlG4kmyzXNf1sAbOWPNmyVLyVoWOOk4e2WfIhVh+rFp\r\nNS1NJ81a39BhZhh0etdqTpW0DfMuVQnqkONHF+SP3YEzyesNdgZQF0BhfM6n\r\nL3euNtXxGvhkwdAuhq1qks8s0ucB1YuSLeGXDidF8qowDF0P0jWmokaFzCTN\r\nspSrPR6QlCy9vcChqbPX9smlDZmMMMH/nCt97W9H1iG9Dv/YtZP3Q/X4TyiK\r\nrVfcgjmNIvBz+lR5ffzJkyxw98i73hKL2nev8hf/M4dbKVGvG1I/KpRitg+U\r\nDRLwQMj9/irsWJpVwgrQI8bNNK84LpCuc29s+tJYjO1CS3ASL4N6FuP0XIfN\r\ncCZudZZ/Ec+30feBDHrfWpwq2cd+VjKKOEpna8eqHc26seJDqi/HIuPTkTyj\r\nml6bTGuqfzEdW7PykkKx5lKt1pKROGYF81iKMY8mnwpCMXC2Md7XDvLvve72\r\nkZGvleW0P5EBHbVVTTh+kp9FuYhsunx53CJBFaxl2sJOd/HvxFmQ6hxvz0iR\r\nJ9bKSk88y2U2f1haNy//UrFkX2a4xmNNEXtlVStnb7JmuF6U0/NkLubxsQ+B\r\n26knVZNhFPBzNrvrlBqX993qr2kjKdrR6SY5JcRND2jO/cQiF5E7CDxRs+BG\r\n3m7UnkwwsIboKwjwkfKdAm6M0aaaanmJU/4=\r\n=BnLH\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.116.1967.0_1677242607090_0.817587087973741"},"_hasShrinkwrap":false},"1.2.44-canary.73.1970.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.73.1970.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.21.0","@babel/core":"7.21.3","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"745fc7c66464adb4e63c59144d1953b210be759f","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.73.1970.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-sNz+4QL76SgqvzjwdGyUkR0YkQPbwN//FmADTETsw77Zwq1CDZCpY4Ir9IszrquKYc4MIxOLpEve0PjA3suAmg==","shasum":"6187fd71af5d85a80175aaeb508e8c6f9fa67521","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.73.1970.0.tgz","fileCount":20,"unpackedSize":61958,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA5/aQqEBRT3lAzL8mo1E1/x6SfgrU+21Hg6jEBkkxdyAiEAxnGlZbW/QHnOTsVrjknVfsgxd3VFrfCRYF1Y3HHAYmw="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEPq1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpifw//daxtgaXxTWGVOHzGne8bY9iWY/bkRJgBPmqt5NUU1UuDjrng\r\nvKljzJCLEZrG2FHpy3NAg3CQeP1U32sjZClJXW+K8B0bSQyN/l8bp6Hvh93O\r\n0b5NKc1mvFC724KZOO9bqBEffC1bKAjoBjoZ0+4bHOavW2WNRTxguz/LIa01\r\naQlBGVi8YuA7pRoUILfMnl/PiCBtLdhuyOd9v0B8iK/jdD5Gj3UrNuGORbrL\r\ny/EWhqZQpVfQgQCDhf2rstWLVfH/dgR0G0o9uHuX7abTj/V652H0QaLFS+yy\r\nGe4VDFeShP+A4rC6EMkorDH7ou9593sIeys+JMdqbMzMOqqUKCkmF9DcThFH\r\n5X+qf9G7Yb8Ys49eXI0eLxi1sDukOtzAMpmoKzNHqZjOHRXZkT+oR85IqNPc\r\nH3+BQrYF/RD9PF8Cbbme4DA23FikTCltJz3cquZPv160iDNXNHTHbN/nX9vT\r\n6SXYEQqrNOxc8Z2TunNrJp/tMzbZouSp4PG99eziQKtMxfYP7ZiCd/FHqnPC\r\nlms5GxaY4VIGesx/uJW+VnX0H+S7z03EuhV5sC9odiQrZyKiFYSblPQGi/0a\r\nUtQN520ez1Y0Mz3LRkKz4xGUoSD9NIHpDKNm/8w+AyEWEKU75sCU6MrJKeM5\r\nFeZkbt74oSQji2ImYBGaiVYRXcQPCTAin6s=\r\n=lYIw\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.73.1970.0_1678834357467_0.311536430431925"},"_hasShrinkwrap":false},"1.2.44-canary.68.1974.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.68.1974.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.14.0","react-dom":"16.14.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"889cc22a9d3449b161225cba748d5706fce92ec4","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.68.1974.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-9spoaeOJmFsdRltchjrqf+MWJihZaSNwuD/hsvAuDBdPDHILEyIPpkxcts0pMZYqsX8LhNLIwNjMX9zibmdomg==","shasum":"3e595e1672913eec0bfd3a5d64a09961f0dbba94","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.68.1974.0.tgz","fileCount":20,"unpackedSize":60219,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsV4/3oxqwlkv4owIgI3lihG3Jh7V8Qk9Nnh74DXqWuwIhAP3sfjKp0wXUHCtZLLJWvnK+ff/8ousboSeFBGudZlc0"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEfVlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMyhAAmCuW585xghf6U7vXObt8mJeePTzTPoD1EQXeDboOIDhE9X69\r\nX343Cw5W0Vb0253fIJQ+jDFppYXqRZMo9CbS6MzKV/UyL/y4vPjHehzy9a+i\r\nYQLEmB37EosOlySXk0iU74O/RsuQ9AQGGsPwzuJCLhGiCMywxLdnct/Lkuip\r\nThuDza1N/Mktsel82J6Qw2VhSJhKW05J0iXHgMBVnEAC9J+mAza9R1CRnyeS\r\naDZHSQ9We37Xeq3kSkC1Gps0g8Bu5Zbrd0YNwsS7l+wDZfVdSIXbHW2sp7nE\r\nvemgZ9ODJJ4hfqBnpPFxjMeGIwn3Z3vdys19/u6fZrp9g93snwKMoEWB/tXZ\r\npDG7zwDkCsLmJwpRFZIXTsX7KUtC/x1Nz7vIdqykozrliT7875/tPywpbBt9\r\nybp2Ew4c8Sj7JcDH5nN2/ZgTcsDa4PPoELoOVjnEGSxK2yp4YJsY2LyenrUP\r\nVgWA1wfYZ8raJebO46QjuXrFFllY9y3miTTTa71rgsX4nZKzAdKm2pTkIe+9\r\nTrgDkgJV+baRZajw6Vp+cHp0fvXMiYcPPUVWtZ6NmWW8HdzcfnN5IhJXPg0y\r\ne6m2zvpK+NXEL8RLR7y/Dt80vy/reyjQIN25dinat0tdtILVkz11Tp/ke9NY\r\nK7jOuev9EtaF1Jg9uRARwFMAwcLlecB9jUM=\r\n=j3No\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.68.1974.0_1678898533354_0.8411861957887272"},"_hasShrinkwrap":false},"1.2.44-canary.73.1976.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.73.1976.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.21.0","@babel/core":"7.21.3","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.20.2","@babel/preset-react":"7.18.6","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"baec8c4998c9546ef13bf6d94971d27ced292b3d","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.73.1976.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-e92WmeaIrQ9mTtD43MPKLAA8h65SlR3o+667ozelfHtlR+un581pu40eza1TQZMntN2cp1GW2GGfDZmJOQwgkQ==","shasum":"9ea01740b5d00e14d898f639d65b04fde7a95fbc","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.73.1976.0.tgz","fileCount":20,"unpackedSize":62006,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF7uizAQF0lM/huJBxwUgKy13/Mwypqvz2JH8iDIwb6kAiAOSuz1wQ0LiVQFw7MxTsT/EyThrf1x1DfGajio4MW5UA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEfWYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq92A//alS4kkRLdzl0ugFkBHPoOJrk12tFUxoe56DorWiJEqXnuG5Z\r\nEZvgUPWaJiGNmYwKeG2ZWcb8iycNJayPY+7FhzQ5ZFN2M1EMEWJB9wtqg4yi\r\nPq4A6jZFNHHHZKBhDyt0qGQRsCoO59QUoV7FRLSQS+5exRw6iUD2tYm97C8n\r\nvLUiYycYQwQzvCbakLafSs9rwx9Le+Hp3QnO+glT9qkvE2Sv98fJu+7Y21U8\r\nvKPwyvqQ6UcDL9GC/8ei7t7aKclgvdJeVTMEWCmF39i8onnCNCdJ0hnNM3vc\r\n6O4mWqwaMCcQ2Bwka6KfMlmvmOGMdCdblSUnpH5xt693jsHS4pW6nR+6xbfE\r\nmWNtcDWiUX3vQec00Pp7Wsm73pYY7H9kYHvnMM9dM2wpOG8EHYwDWKzzkaIq\r\nwkb1pwCshxRYaU+Xl1Du9n+9jL5KwmVp096QbgwBYKP9EkrpjlEtTPsA5Y6n\r\nRbmdEwJYjj4ZV/Irk93RDeH2IOQUShj/cJLB6Lzxw5HajFisRCljFAZU31fa\r\nKs4frGoMBQZr0WcfuRQM62uRgrb/cN9Y3mqr0mjgo7GVYmiTCs2jpQdFzUwR\r\nVmUzMb57sVjPYzFPFYeKjDmaeMsURqRD/scmC4BHIs/7d8JWmTTF9M82h923\r\nLT3enisPqf9MDz8zYAj9jBjm8ZUWZuXCOd0=\r\n=Wndo\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.73.1976.0_1678898584361_0.7615424718937787"},"_hasShrinkwrap":false},"1.2.44-canary.68.1980.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.68.1980.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"9e589d5b44be585e5e12abb82d305abeabbde7ba","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.68.1980.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-HedhRsgPsGYihmt/M694rXLW2tWzwYR6Rn8/wspO34V6hpp2TuAxVU7yhyhXyps/TUByAwCgDk0ODah8XTXHgA==","shasum":"70b83d9d885d56aa64e9852be965c59e5f85629b","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.68.1980.0.tgz","fileCount":20,"unpackedSize":60219,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUSMgqNB64UCg/NRc5pN+vqEc57U4418Kj9C8YXxUQsgIgIfcH/hBjUv9nCfbyW1ASABUi/cfpu0PgbnP0i+uQ02c="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEjJIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr31A/9FyenTbREF5r7XHDYezhluKYYzYBY+W/aMwYz2qbX0xXGbnO+\r\nJYS0wnM2ca9pcvxRH/y4tdFcIFafKlmnii7pbj9egtSjW1kKWZzHoxW2J1Eb\r\nLYoRmz3zW+lCjsbRb5Bk6Q0KcXzicfQzaiD/pQfagvmxHaVmgyVntqLfFpsz\r\ntwEKcKSN07JnwTSvQABhhbfEkHtLKLyMZay6nuRqJj2l1xZc26FXtW+X6m/x\r\nmtxWRHA0cN2kseVxNGAvuKuTlvaVytbwq4aMkmdXZlgLsz8wUSX357BX1dC7\r\nJD81L5XHk4uU/yDLp1NNdNLVWXqe+OzIoG1hsY9ZIllCeP+gOMTqeJKJqzpz\r\nQcQSKnhTkW3p+1q2LjzmB2eDGFrFjOs4bYmUeHKj/1BXSgAClCbR/xb5f+FL\r\nx05Z3YA5djUDyC3uD339zwYU6MY5DQo+lFGUc75T5KVB0aGt+z/7L2lnuS+a\r\ngB/tUQFZDLlIV9RGAxeDpOFvS51pVFI3JZogZZ0sHb8OPXV7AZXNz0NsvN4X\r\nvmBjbFt0s/clnJVv4VQGcnCMBEYTPp6KoidMvmADGIPbHs2wSXO0gk5JJICP\r\nivESgi4FXxsiIRFu98iDpToSwcZC3PhL6YDBQPT9/+Ncdg/1IskbiRAjnQte\r\npc0XQmvZGi7TSy41YHnxwL/VCywMb2sYotw=\r\n=TqlI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.68.1980.0_1678914119969_0.6479604336047367"},"_hasShrinkwrap":false},"1.2.44-canary.93.1985.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.93.1985.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"2.8.5","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"451d71418dcc168aa9264394ca89fdc504c1f5d3","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.93.1985.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-n1GyglDYV57qdwq/awW8N2aC3qJcztEn1rQ91P7Ye9oQ+15v1FWDlNh+YzwWzc1vR7b8Moh63h+iFatii7lyOw==","shasum":"5bbfcaaf39086e99631b84964bd9a93f93acb049","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.93.1985.0.tgz","fileCount":20,"unpackedSize":60314,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtSLiDF7GowVkCASC7bIaoD2K7Vmo5XAqE694Ygcpe9wIhAIRj75SJ9PP1xBIVg4BeT6SBxbtbU5M6ZEBnk46uSSKf"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkF/+gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrZIw/+JU7mFxZBNBi6R0e+p8W+HIptwMHxzBuoSUXvZTBz5o7OjU/X\r\nccmVSBNJWqyUBz+/jVDZbl9FcrMoCLj2NDMOdhGJcblL6MYI3W9dl3vqg/Xd\r\nbBVeNUTJ+sGN55Nk+cXDahkTUNv1j+M4nsVZOaoAK+nsyupvkcvXie8qf8GN\r\nqvzeix14qRGKrJ0hjaPnNUfaUD+6zbFPOlR2QuDAipqlaoKgbB0hDr5SeQfC\r\ni2Tooz8unmRlMh/cr5D1GR50KoIChpihxfZOq+0pM4FTwSKPee+QmNc0ckx5\r\nXkEypTc1VutVugAUtdnXX/Q4ZRrCG4OTiw3FrI3d2abccgieP93wBLqDami4\r\n8r6rBX84SpVV+V81i9wtjMT5g7J/DB6ujqY33HsPRIp7IyQx8FFfTkDkdess\r\nSizZiEARaoi+3/zOLnjD/gZCS1oaMTkQltO2oTZMp7YxlsPe1X45LuP99JVD\r\n7GOEdVPbBAZkiLoxhabxXPKEwjcViQxHiEUFQs9HQ2+wThd4myKnIYLqcFQd\r\nmq6ExczZSE1vFj21Nndb7rf/+4QWMHXWlp5Jp6FXdznhdi1LG3+q+28+8JNc\r\nKQEVW7WSbkMPtIil9Zazhe2IQ6b1bODtnL+dxHvhn4+BlmN6m4Jbmp3pEUYW\r\nWx1PL/Y+lIpKCfauS+HV1HzQj8NRWAnhxGI=\r\n=RDN3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.93.1985.0_1679294368038_0.41785256319763486"},"_hasShrinkwrap":false},"1.2.44-canary.68.1989.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.68.1989.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.14.0","react-dom":"16.14.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"1bc2b998bc793a0b63c98a86424a55b296ce324a","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.68.1989.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-cZCImYscAr2MTU1kr7Dm8kevfSBr01THUOSYyNW5HC5u78Xl8D/C8Xe3cSUxmdpLAXMxbzHkN4e9jJGvwYwAAA==","shasum":"b2e255a2eb1722883d7e973f2a66de279ef3d142","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.68.1989.0.tgz","fileCount":20,"unpackedSize":60219,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGr9o3ZXHVSeCga/VrE+ZYCheaZ6GKhKIHaUnhP0dRCYAiEAi6CCIzieefXNHZ9CamV4RV+JaOU0yNzKD/dFgiRV9/Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGHRgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq4OhAAgonFTX7f+3lRFmIpiPgtplWZWCKhQapdbfU8Hvd9XbOuzaak\r\nFVWHPwTILrmYwccmp2hO1SiD/vvHVhI3jd7Hy91tcuhvlGipveiGHO/aWujm\r\nw6Hslhs92hhw7DCsf3BgotQ8vOXfktZiBr0YNILvy/b9XQA3RMU1MDu/rZ/5\r\nftA98lXfqiY0Mfc3yIun7VFyhNe1xBIz9cpK/Q9L1u16ecdUxu3W+0lLY/YP\r\nQly8tcAHsYGep7V/lh6p4lnXRHA35OLaJ3dQgkmZXm7yU0w3Z+ijaVL/Yp1X\r\nxlFSjdOWvWYQGn+dYVMS9JcSLXAC8HRQ/lBDQb3LbebcJfyqaX9m7yw62L8C\r\n7oYaSZKSCnXVU8EMylt/COlzGeKoUcePnE6wqX35Lhd3Fag8hEzlZflWVF5b\r\ng0sS87Oi+PPFZOQV078YDjR6oQ8TsZKsZsvPHRH5JN8oNKak8RUQemI+IMZl\r\nob0lRNkfvPxtO2DQKPMTlZGle2N5mPtIwESEnVASHIZjFRZJWmut3MfRYbnX\r\nTvSORVFiF83MxzwnDTF1xriN6Bt4UzkLGn0df+DAwhVpNaqWzFhRnMHmuYkq\r\nF92/FTp42eV6JW9Uu/ThW7Q/Ea8Q+j6GDxhFBYFNzSxMANczZIyFEAUKzwYX\r\n6wc43+lOck1Oedw8cKh4GG4umJtcenuCL7Q=\r\n=Cfn8\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.68.1989.0_1679324256205_0.3953733603645999"},"_hasShrinkwrap":false},"1.2.44-canary.93.1994.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.93.1994.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"2.8.6","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"b51f46775f84fc7256b3bd9a76b77cf362f22ef3","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.93.1994.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-c4pin8Uoyq5grMAI9a6Hhy/1sRfmoZBjCVO+KTySucGcYNTC5npigVclxxQ/meuCK/JBhc2LVEC5Dz+AbxdbSw==","shasum":"3893f33b3796c9bfb38b3635378039c2ad69a590","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.93.1994.0.tgz","fileCount":20,"unpackedSize":60314,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBje7hgIIyIrBUIT14Ut6r0WRaZvdtlGztinYOe+jptSAiEA8tWgM7TBCoAIBwv2FkyxkWwVGbzviZF6kqWwYg3I1aE="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGXThACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogHg//SW7yUTTHXlGX57mNq1O8ti/fvVMaBDM5E0qIbseyUxLAM/q1\r\nMNKr/MGL7lI+cE+pb2YIiap5mhpTAI75skS1gRi2Tn7U44ctMWeqai8nbGF9\r\nNW5gtjjE4i/qYqIjEkbWMaiP0ORoA42ptJXn+DP8K/SMWGq1XgExJcrkE4qV\r\njf8P9CKmZNGB172tKQAutQ8wwU+y6VxiNq0dBdfwzEg8aK9xTVCW9XDVLo6I\r\nvdk/CGUALPsNGlDBQGPmSirPycXUG5/5M/hvpnAdfjYbXuxjD/HUyQSazrMo\r\n9zZS1ePFOzjZMQBTilzAlUP1WXC5+MHvUainteh6I5kBGh/x0fvzkAHCBNxk\r\nAnolNeSGB3mGuvhIcJvfxc4gqR0KO+YCj9lkWaYdmS3g5EGGNZ8pzNbjquZw\r\npTK6+pCUVmQa4PH0pRntyr+uJa6EcKLyrqIyVOUfSnsV8v2zjsd1oyJ2Xlwk\r\n2Swqse1HZK5uHz07vJ49pjsWeZhlucHes5SwS+lNtzZcrM3h2IcOXFklDDJG\r\nsBCN8i4gDFOSAIQttawODDJCVMxYRO/0AZn4oboew6YHGi6oUHm1DYvcXRlF\r\nwTIWLQWhow6GkOXX3Jlwy9Kel+sVwzmgCtc6oPzS+YeVy1vWRwDB5YprP4v8\r\nfanJf+66aFpccKiq+wRZB1a9wO6S0LmQwFk=\r\n=0Mja\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.93.1994.0_1679389921083_0.7758645693886361"},"_hasShrinkwrap":false},"1.2.44-canary.93.1997.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.93.1997.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"2.8.7","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"bcc9396e04ed1a8b599e29d2a9c95dd514b14013","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.93.1997.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-BceA7Rj0XLhX3+To8xl/y3ty8jdw3jUpZAC9WwidHMZEEWdI6aaZVYZBPX6nfUW4NZv+HOnq6lLitbT1VewzEQ==","shasum":"a85c1f4485f60ab40da7d15165a3f2c89809cd04","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.93.1997.0.tgz","fileCount":20,"unpackedSize":60314,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5yMT9qFZLYX3xy5MdpcHdz7yTA7EQ0ma76VUt5p5fnQIhAJTiscasRLPHtAxOv5Yv0K9RS3iUEmXSJ1ndiqkAaYrS"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkHaNPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo+PQ//Wrz9laWBXmxXh9/t1uXawD6ihY3C+1Fl9R1nxgEuWsa2hk8p\r\nevBmdSy4ugmw0jG7jlUmbukTNjV531t15WjDdAy/beYOUR8Y11cd6KX0QvYw\r\nqsjAqrQ6op47ZsC7ut1/NDsAqTAYnLlaltqE0tbIo907R0WfZT8XMQJt/V25\r\nps9EOtDRjlvWJLLAeamSKa6BdnosJN75nQiGJ+uMd/TOiKgABJDGwNd2hwel\r\nPO4Nwk1ePXKnVhUhYPLCWt+C6icZkQpcb37lQYlU7aOkmZrMyeuaKF2jOqCW\r\nc1gtpa7Br/dzfzvcmyzWNJyVI2izUdM4wVswc4zM5zQ+Ej0Lv4o550BqDggL\r\nXjshrcIUu1ThZqQvI3A2ApHCzx8CYSvGza87F4xtq7QCmRhmO9WuUoR8BiCi\r\nqQxI+I8Xqje0ZvqYl99A5RzNzQZIQjHKsjCpLxjFrfvXf0pVlqt0e2AtoUMw\r\nhmR4oEosotWzXVg47h8cJu4blHrLRRjNzaQ72KVsodA1Q2eCySYKDSCsgZxz\r\niG1qTcvNvuOw2UiOwypW3rehQSsrA7x+ieR2QW8tBU9+ctwj4V8ZIg91tK31\r\n90Wvx7anqqPoqI1FKVy05JLCgsfaf4wcBHUbog47l6/V8aiPMgDXEwmr4t2i\r\nnYnD02xuzkcZZXTHJ6dO6+bBgJiSAiXFXkw=\r\n=Go6g\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.93.1997.0_1679663951694_0.024835674358074877"},"_hasShrinkwrap":false},"1.2.44-canary.68.2021.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.68.2021.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"f889b0c9896188baab6526f20a6229a72a9161a4","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.68.2021.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-Qt2zGmgDOfkFVuf6PbYloSb86AkOhcr7aSE7Msk6eMr3SB84lB/8o+gpLTGOacQMYQx+AR/D37nPyEac8nlGpQ==","shasum":"c4daad981f583f68e84837c75fbd7f1ed32a66b6","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.68.2021.0.tgz","fileCount":20,"unpackedSize":60219,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAXJp1LUBap5MqyYuyZxxW6gS//TNS/4W2kUBb4wAkugIgeeIGG9Uj6cBL3qDK4CHozbGXUi1svPKUSrNKpkcAtvU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkKpb4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOdBAAnORv9BDJvRDyikyu3pX8HK0o5TM+r7Tt08xrY4xJ2rC55C0s\r\n1PenqkxuC3lvsJa2KKbOP6DCftFNNDszsqNXgaudy6O9HlAHagDJlMcs9ylv\r\nmzpz3wm9v22+XwQjw9/3aW+68ofHfs4voyG4s0HtqcxauMdirLscSwBqqzHM\r\nBx5l67PpCUsdSSn/TfPe7mQSTKMM6OBdgcl2g4wEp6Vt+vYfOVaMV7SRYlwv\r\nH/CvJg77RshpED83HQSJrGGFWuUwwhYtZLW+Pzj/vov8YVYkPCoOa+kaNb3V\r\nLHxQnX0rLyxjwmQksJECe3ec5C+Oas462Ed4mJ28004gR1PAxEiGNLOSqfn3\r\nFdgyRDVJauN8hftByvPnrN2M+woz1CrDpiFtECDoN0uRxLpIl6aMwTfGO/vd\r\n5LdsvJPvETH5zDBeuufeSSjSfC8OsWWWqfYqAnzmvrDG5KSidXR6vZgdIB/K\r\nsRt8ZO02UClnKjN8emoLvYXnYVUIBTG0oVKemjs2xy407jJ0+16VcZXH03Fy\r\niUOOzDZ3ZOF5AiHWjSycgaTvfSubaooSiXt8CnNFgyHUw+6u9zyDM4TWGOR9\r\nJkC8QQd5i85QtNETaF1ohlC8NMM0N/dA0wJVVo/rGE7qsJujWKcKofKcjGn6\r\na1bhsmpEr854x9liosOrlxB56B1rO2CwKSE=\r\n=X18F\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.68.2021.0_1680512760242_0.6697473520339294"},"_hasShrinkwrap":false},"1.2.44-canary.68.2028.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.68.2028.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.14.0","react-dom":"16.14.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"b53c8cd3536b953733f4e5fb56eba32ac7db3770","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.68.2028.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-Hxv95caLHzs8PZPHO9P+V3AbR16CDJB8UWVQnr39F5JLFbV2A/VMLWo26RCV0vw0YT96AKSsWN7tAhTXLrkC/w==","shasum":"66a83262f8cce1b12f6c2118f88bb2344e4dd196","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.68.2028.0.tgz","fileCount":20,"unpackedSize":60219,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOWtStZ8eurVnhwuXIVY7c6NueU4sdR0lHRAtHgjw9uQIgekb7bVNmGyiUTYWIrLkgI/Syg4MVOnArKW85XQgDJVc="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkK1OKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsDg//cf3CGxgm095pSZilGRlOyc/CfoC6CUz+shZXvCoctCMt4D/S\r\nI+TNVbFUrPRnxq5b8Po0E2H4rwCh12cYidUOZMUbbkmIYqPMJVeDjdOoalmF\r\nmy9GLmSxNrWxYaRNCd5RdaO20ijIQxMq6lq9FIqcUABhUcZ87n9qjjDXLlzn\r\nHvPOPQiDbcR3yxQFf0Ohu+dp6Kh2Yh0Q21VPDjqc9eVWzW9i4Xz52uONFo6N\r\n7EhbKPi6ZPUeXo2/PrfHd4JUglmrzgYe0n9x4iuKfiRGO2WvCrQOhUGDxsAp\r\nJj/eZGBPErYUMUDeRwksUc9lkcn7ZWaKiIHQH3VHyShcl7V16hj39+LspX8c\r\nL72rEEUzpl04eO01jIVifSkTSOTRnzAUBkqtC2uk0PvMpOp7YWX7qY6k7cPg\r\nt4IYntI1mRcPQ019hb+SdD6+xzT9nigrKELjpGCstwbJvFCqJd8fBn8JgrVb\r\nnm8beCOhJRi50/0dlgI+6gXFujARumzzEzzBGZmWNCpyXewIvf6VaD0oqbEq\r\nPHLxO7Oa8j/+R2lBOofsZcfLJpS6zLhfQttE//43Swr/Q+WhYRS+oV7TM7yq\r\nLrEh8nLz+9iDWT+nxWYMbHJ5Noq+KO0fbrn1xhwTSQj1VYJSu/Uf4x0TiWRL\r\nwmXX52HFLRcmTbFd2nGwAKwBOnGQvaeVALw=\r\n=Kxrd\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.68.2028.0_1680561034179_0.48402968728073104"},"_hasShrinkwrap":false},"1.2.44-canary.68.2034.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.68.2034.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"adde0c10e54733473839fa7eed887e8e368e1731","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.68.2034.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-GHj4F7OXrNkAQQS9NcfhHfJByKiwgQWI9bUAEapnmU+cACOzuO3vT+QYmNFmOpHRwNMKm1S8sqqAzWZF4p3YxQ==","shasum":"fcfddaacd18af956f0cb4a16ce8bdf182d298a71","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.68.2034.0.tgz","fileCount":20,"unpackedSize":60219,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0XGjFq8V9D6cfIPKmjvx5ixey45f1WsXJH000Vh3i9AIgJz7xDNUGzgNXFY9xR/axKITp+Or6o+mBqRWDDcMxlM0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkLESXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZ1A/8CtmxfuOkT+KZKp1/hv934WH1hZM9s9vOT7wmZ1zaBEyQzIWp\r\ncItqKDGcD2JHZmFIPnJrkPvsAaY2u+lKY8M/PTNX+JGLC+rdxXU8AOqcBbhc\r\nkzSGc2X8IaFQqg8U5DVVR41zMuMzNpd+UKPKvPRKfsnLIzBDwurlDmPs+VEO\r\nygGUfz9ULrSxBzXGLrqCTh0S+rsoAYmrXkzIlfFgXiepg7/2W1HAn8WTSgUQ\r\nRmqMNT7lbzQBmdD/Axs3SAI6/e7qGy8yQBi94rFqJVF/w3bm3m0B5Bwkp4zo\r\nTRAwOQnlF/bPGPEhKkDnagz/iB7uesNLgXLLYWFESIF9Z7+3iSOjm+RDnv9x\r\n9mkm8VTnOj7P23WI2bf2vekkamObfvqu50WJeRNR786ogqJNjuMbpq4Puf4P\r\ndZT35hAC7+dm69TJ4PUnFNHas9O+PoJw+HEG9g4nonj7d/MNjODuFCDGwYzD\r\nX88W9U0091QdMM7YXhmPysrDIyK0eKN/e158EHCpnZ2lVkiCMQx+/k9z17Qd\r\ntVuNgrpHfnFLCIBTAhqqro9ESO7/Caav3Ub2Q19UOM2Wkv19++07TNAxg7WW\r\nqqQjDxOIg+yxzcrqKoyoD1nUL4GMUr1AXsjjYRJpRDQOGv2Qq3gh2ot+N8Wu\r\nQsnQhDH8eHCbtSUMZJoed7hAvQJitl0Ngc4=\r\n=/lYZ\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.68.2034.0_1680622743565_0.9750196680071448"},"_hasShrinkwrap":false},"1.2.44-canary.68.2040.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.68.2040.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.14.0","react-dom":"16.14.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"4432483b06024e1427349205ee0ad893095f342d","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.68.2040.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-ttCUWN3uUI6H4Llt7eQZccQp5H6Vbn3lBH3kuv6mWBg9pWYmldXrO9BpmaPymGWuAkudmq+qBK4+tj+Etq3egw==","shasum":"80bf3c4f380c485ad828b585058587b8acd38787","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.68.2040.0.tgz","fileCount":20,"unpackedSize":60219,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEUQH5dg26T7DXqob01veMKSekIYxcnkmvGNMG6orxKlAiAM6e0S8DGwV0KpjiKXou9yP8MAG4tYuBFWtTnrQzQIhg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPRfuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZDA/9G/yrdj7JN1+XFuxL9IG6DvC2TwXHQem/VAKQ2kY258rwJ02v\r\nXpaWMJeE4Xoq8604Ry6JvyrzwurTHK04LKoW+qCZ+lYBUgE4K3sWEQb+6kID\r\nPq2xuGPQHpX2BUuJLaSftjyybbAo5R25IzlfLpxBhXUjh5hZkRrt7YEtnAMn\r\nWgjczMySJC5i3HF5VWgXv7bEYzyjCpdkgZ3WJsxaZNsPa01FR1QiafM5OFfW\r\nF/bag+N3PwnlrbsLUF/qWl55B1dKFY/UGTp37Ze0NMl5Kx9FASDcgl0kTnNX\r\ngxHHM/0XpHBpsPAY+hIStgtRVvLaS9RbNOadzZXzSUH7YXjNdmG/gDnpSFR6\r\nC2IXMTOXQpPm3Vbh2t/vUbz1n/T0Cmbv4tF68LciMSZrTrgD9ltIVjpzDJrH\r\na0hs0Se+Fqxaq/OhuiTAM+PQWUs+jHZ9O3sLIYd0G/h2hBsz9WtvSu6tlopp\r\nQDqiUByl8dYr6xHnemVTvm91FhJCNv9whvSw4GEjfXMb/I1BZKBuasPweyLW\r\n/eZMDtF8ot5MSoAcz/SqCDB67fURwuEuPccV/o4fQB3LnMbOLJtikXzP9eVk\r\nyGWRx2cyPDM34x8elEdXw4BQxRAQpgY6UI3r1kfv3tQSRy/ZSmeePoBABP9V\r\nS5dN2bOWttDWSqjTStja4BL8sDhw5eP0j7U=\r\n=wdfF\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.68.2040.0_1681725421863_0.32544367703739985"},"_hasShrinkwrap":false},"1.2.44-canary.68.2047.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.68.2047.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.14.0","react-dom":"16.14.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"c5434e6e0ce7cce9c73f0b3c0e6211bce00460fe","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.68.2047.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-odKjlB3gZLbWAXiPgBGk205neOTHocHec9iC/XbMKaN781+5DIDF7z5qxHf+ZVyETrCkb1Viw2fRMqmWU3YbTA==","shasum":"c57b9df2e88cde2d20afed3b6dee8060295abaa7","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.68.2047.0.tgz","fileCount":20,"unpackedSize":60219,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmH/S9lCe8zrnIGzJHO3ClsNZX74bX6RD6y4lV0lvjZwIhAJ682XOykGyb8j3S1JjhJ2f9M9VA8hzKWFfD37MDMkIS"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.68.2047.0_1685272545417_0.6321018104284957"},"_hasShrinkwrap":false},"1.2.44-canary.93.2049.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.93.2049.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"2.8.8","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"064201067a63402b1befd05540497906e895b838","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.93.2049.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-pbWu1nZZXrb6v6Y10zQic9B/rBqbODWzOGVcZ0MFk02ZWnae4ogJKqUicjrYRgnc0EOsrxIt+cFzvTr6PsHD5g==","shasum":"904ab395a5adc33a73df8502f28a4bd4e9e1b7a7","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.93.2049.0.tgz","fileCount":20,"unpackedSize":60314,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoWgN8Rxg8+XwtEwM0UM9xYmr9h8TOY5g8xsQr5SvjzwIgEUeAWcyMRcvmjs3yKTKjeai/Fo7ZS3j0Kjk3U4nwZ2g="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.93.2049.0_1685272597942_0.4259759795509066"},"_hasShrinkwrap":false},"1.2.44-canary.73.2051.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.73.2051.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.21.5","@babel/core":"7.22.1","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.22.2","@babel/preset-react":"7.22.3","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"9af50159ffd9c64e019a4a20baa8ea63fd4c4296","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.73.2051.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-xpaVJujK4sRHKqHQCgTdYPPuLkw+OX45v8iNAAikWGoB8byu1/oMCXxxk2Awco01W6WUq2lyvOyj5YZbXTQ6vg==","shasum":"f7b8b70a6b3d4bf504280a42e171f71c9ec736d0","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.73.2051.0.tgz","fileCount":20,"unpackedSize":62098,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE35ZWPJsM1KtiP00S55iKHqVuZvNxlpGzFjjiM6y6D6AiEAgu+Z0L3StuM+T7GdzYYJZzvJsKD5RGgazKaLENlB/fA="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.73.2051.0_1685272636963_0.18325446407321921"},"_hasShrinkwrap":false},"1.2.44-canary.73.2054.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.73.2054.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.21.5","@babel/core":"7.22.1","@babel/plugin-proposal-class-properties":"7.18.6","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.22.4","@babel/preset-react":"7.22.3","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"67d31b9696db3346bc23ecc400e7930cf2c48d53","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.73.2054.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-d0MjxrHRQfClpFvzlOYEX13aa8GgW9nkncMsWSxScBwJ1FdJH8Hagdnhqdg7UFK+9UAHcjfExKW5Wov0oVjTlg==","shasum":"1ab707f6f285d543a86a2f9ead39a44fcc77d693","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.73.2054.0.tgz","fileCount":20,"unpackedSize":62098,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5SeEeF+W6SZt9PDbmcsqXiVXO3URki99++dzWXaVpVQIhAKOUHkJF6TqubgdVORvcJzlolApSDO+Bdk6cf6pM1qAO"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.73.2054.0_1685372055825_0.49795122732244845"},"_hasShrinkwrap":false},"1.2.44-canary.68.2058.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.68.2058.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"1ea17ee62a2fd23ee035f55d199dfd9c2b857740","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.68.2058.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-55SUG4vcQjFFViU81mLxXkx4Ji7KbyD6be2wp8zuWFjwGPPUK+PVmA5lwlvCMm8DQDe6uobob4H0xaWDTCN+iQ==","shasum":"93beac7f873f233ce99a3133b0382fceee9f7cb2","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.68.2058.0.tgz","fileCount":20,"unpackedSize":60342,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAaPGWLNQeH8e+9KDIEtjO3Jh2BY2UPC2ervsrjv5Z3rAiEAoYRilXahNqWJGmtG1AWBMdGrg6njxE/plLon//BiiR0="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.68.2058.0_1685866651736_0.4296342449291044"},"_hasShrinkwrap":false},"1.2.44-canary.68.2067.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.68.2067.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.14.0","react-dom":"16.14.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"49f1da76e2ca3c7d49c449ec13047cacafc1a5e7","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.68.2067.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-weCtp1CFvWqpyLJsl3DX/X8zd13MxXuNy59VaQkla6SRhevZQL4yGfu6morvf9hxV7OS9XfxsEVN0MhUBIXxhA==","shasum":"44bf1c5996baf018020b2f470fe4c3be8594ba79","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.68.2067.0.tgz","fileCount":20,"unpackedSize":60219,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG7TTlatl1bep7G+5TVBDyxWfrp6hLCYDUbCGfZlmlNGAiEA1ZYaKydlffobfeyl3o5u8sGgUigHfgs09CJZyXIwOoU="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.68.2067.0_1686679259665_0.4430617367198253"},"_hasShrinkwrap":false},"1.2.44-canary.68.2073.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.68.2073.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"87fade1e0b85551882a985a26a87500dd29dcb39","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.68.2073.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-B9qG909Sn9fpfAs8K6YW9/k00PXoNnxD2d6mBapwHwJdE9ATZB6GBDTBcPSgq3o8Qj7SFn0452w1ZONh+QgKFQ==","shasum":"926441cf4cd789619802633364436c47440418d8","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.68.2073.0.tgz","fileCount":20,"unpackedSize":60342,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC17Na1L+bHx0q8Ui4GCyA5HZ+Hc4LOqjr/uxjJpVm7UAIhAJa6yom9o/yJpkrM1x3T9Q2K3Txmit7UPNqR0SXHRJdQ"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.68.2073.0_1687073526050_0.9827844120510061"},"_hasShrinkwrap":false},"1.2.44-canary.68.2079.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.68.2079.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.14.0","react-dom":"16.14.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"14eefe3dcdef58226cca4c8821dfcde5454c65a2","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.68.2079.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-MJELPBFRiz6DRvEX/ROz/bQTr0zlRJs4ZL3V2cekMBzAEmXDEMQ5BeOicn8jrZdC6kIW1b5x98b2QWOdH0FiQQ==","shasum":"5f0cc045d555e30266fda59a5d7e838f728b63a7","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.68.2079.0.tgz","fileCount":20,"unpackedSize":60219,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHySRnel0PAsvfzpKqHk+gwN+vsYAV4UQy03uPuoSkMLAiEAhgHl8h8ClrU6JMXneKUuM4Cvi54VTk/5zmaqrCcKD0c="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.68.2079.0_1687163621518_0.4274955346055167"},"_hasShrinkwrap":false},"1.2.44-canary.68.2085.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.68.2085.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"e0f97bf64aef332fd51d1b82e155acde03d5c441","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.68.2085.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-+I41ZgW6EscjZ6jLt9MWmx0jFF4fvaXbc4ID2nfE0SFLygGL35DR+zPzrREdNYZDvgWYZ2hvS++DhVEwkYSFIQ==","shasum":"9984c5275de9d72129de8c4fd10efa9d8d3828fa","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.68.2085.0.tgz","fileCount":20,"unpackedSize":60342,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsAVhBW6lnRS0VYqmD0rSTsdiufiVnj6JUYydsIjeZHgIgH5FJjG8N2vx3cMJJKyDbTrjOojT399t/1nyN9B6M6c0="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.68.2085.0_1688033148339_0.6123771095913444"},"_hasShrinkwrap":false},"1.2.44-canary.68.2094.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.68.2094.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.14.0","react-dom":"16.14.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"0dc26b1fc72b19d1bbb9702253383d8799b45ca7","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.68.2094.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-wSLExmUkeWOnhEsv0bbnVypqAuWwLkX67GFDzBakvV2Ve2e9nNhuspj6Ru9nED74NtrQFOXxEYuVNXiK1ZqDrg==","shasum":"5ffca6ab1d89c21e0d0beb234c9c8706d72091c4","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.68.2094.0.tgz","fileCount":20,"unpackedSize":60219,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC14ahcLvJUGjhSXGza2mTsYNi7N9t2u1/SoduxWW884gIgGKot738YpYlmlTFc+z8K/VGapwi2XuPRqXJAL+CZzD4="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.68.2094.0_1688646842931_0.652355876643445"},"_hasShrinkwrap":false},"1.2.44-canary.68.2103.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.68.2103.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"312c449af8ff6948bb27f3a649100e14f97725c2","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.68.2103.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-1E3A/5Q1KrpZylb5JR6Revl0Wx5My3ecXvFrOXs310Q5pVhhzlL319N1LPozvlTx46NTYESRFt4Ss+hbdN+hfQ==","shasum":"631d9f58533d241d58e090dd599dda795252069f","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.68.2103.0.tgz","fileCount":20,"unpackedSize":60342,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICv3y9rcq81Eap7y8ojyxvEubLtFellXjOiVMLJb3cYdAiEAsCCjyomCoYYSGwAnaS7UjK/SOwiealEPpajtWFsrP/Q="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.68.2103.0_1688894889291_0.9357939948580654"},"_hasShrinkwrap":false},"1.2.44-canary.68.2113.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.68.2113.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.14.0","react-dom":"16.14.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"80dbc67eab44dd503c8cdfcc0dd0c8efc02555bd","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.68.2113.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-NBcwF2NBLcZULnFJyb7LK+CvjBNsBEJAOVlkUIGvDGJgme5WEJwC2m1So9aGMdMEHrO4nBuIq0XH9y/IKp8R5w==","shasum":"2a2513790530382df4bf2bfab7e6be0458e58d0d","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.68.2113.0.tgz","fileCount":20,"unpackedSize":60219,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA3I+eT2nT59mtOjrrbgR7KrtHOSy3ulYvFGdr/BAWKnAiEA+Qp679dH4Udr+beZuhA+w0DpStruB2J3kuedAHtbyxA="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.68.2113.0_1689529767862_0.33678707727672497"},"_hasShrinkwrap":false},"1.2.44-canary.68.2119.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.68.2119.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"5d4171946da99f0a682a1eb6c63894d272259df5","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.68.2119.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-llKcXvYT6X5Gkc4PkuYLSe+/5kFyT+0SstMIIQ1OhUY0VDww97bZa0fLVclelHY2B1nviqBNxdm5x1NeYF74fA==","shasum":"0da6dc6e02aa27cbd6c655d808e5d7abee3f5195","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.68.2119.0.tgz","fileCount":20,"unpackedSize":60342,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAJO+cbTw95udwOKVoO6TPpbBy07Jzp0p/4eLMXVXy0bAiEArB1lJEqOward/C4qFBP+Fn4WjdPHnuS0w6+8BVfonrE="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.68.2119.0_1689767717217_0.806284260451837"},"_hasShrinkwrap":false},"1.2.44-canary.68.2129.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.68.2129.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"5cb20264e4f4f32840f640231333e1a736927a45","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.68.2129.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-ucVlhnyjTAazFcbBRYRnvG+FVqdS5SXc2sbKEwUfoz/ZgsHN0i8SI6ToOIgln3RocWcC9CiauFAwhv0h3c4anA==","shasum":"d6694ca1017bc8a8150de76804f3e49e064597b9","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.68.2129.0.tgz","fileCount":20,"unpackedSize":60342,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhplDxvHHz/vEdEC/jSgEaY6zlZvWATyfcNLfT9n69HQIhAJW/xFTQSAp3PmSBUsrl48QN4gfNPKLlg83LYdAZKkc+"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.68.2129.0_1690923143533_0.7402432830595826"},"_hasShrinkwrap":false},"1.2.44-canary.68.2138.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.68.2138.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.14.0","react-dom":"16.14.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"509c12a9cfcbfc64332d5d8a5b18392ead3b7f66","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.68.2138.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-eQ1IoXa6P3eVW71CBX6b4XY+FpxBu2Y8Xi9KcdKDmX6CFaq0uWecGmrsC1K1X3But947VxV2eCzXMubm30DdTQ==","shasum":"10f96e36e914d2ca35c771e781b77bda6c355f22","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.68.2138.0.tgz","fileCount":20,"unpackedSize":60219,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEC+OzwTkKOYFEDlZjbh2ac/EB533GmLUI90CUWGKuFGAiAb+wbApMmB2qDxbi8KhV99MxiDUAdNf7lsacxYKONcKw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.68.2138.0_1691588156887_0.01147655758683297"},"_hasShrinkwrap":false},"1.2.44-canary.140.2144.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.140.2144.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"5f111bc1945997860da27202e9d8413b98f7a27c","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.140.2144.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-irQ5SmK1wLl0u8B3aYh9Wqe5W4+xPRjKahG8qXX0l9zzg2ErdYuVl2iOjM83gutXH5XfATab4Eneh6bSbXm+cw==","shasum":"e58733b9569a16bb01b3e740a6228cf1ceb06475","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.140.2144.0.tgz","fileCount":20,"unpackedSize":60269,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBt/BFdzyl8pyIdBC0MDWJ1KbdndLBq3/OuJCF91TSm2AiEAyVAEJ/vNfwZZ+kjCfxNEW5Cb6GPDlS0Uqwu13Mv0Tkw="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.140.2144.0_1692679127075_0.7608606951917176"},"_hasShrinkwrap":false},"1.2.44-canary.68.2148.0":{"name":"storybook-addon-react-docgen","version":"1.2.44-canary.68.2148.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-addons-create-fragment":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"8930b4b46227cc90cf8d69a30e8c427b31b284a7","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44-canary.68.2148.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-fPtAIl9OPokAusbhnqpBpbDT5IFudkplzMpdv16Ibrq94ZrSKTeL+/uNf22fT+5KkNt2dCfY9xbKhEMijCj03g==","shasum":"96aadcda844ab15a5b2f4bb0c441ca6499db6b27","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44-canary.68.2148.0.tgz","fileCount":20,"unpackedSize":60342,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICgjVVno4HYaeredslPtbtRfRgDNrLOGQZ+K+4/2lw/wAiEA52kwKBkL8PCq+OkY/JUfJt0BlmHMVKAq5OJyUj3K5Fk="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44-canary.68.2148.0_1692729073947_0.4472267090818314"},"_hasShrinkwrap":false},"1.2.44":{"name":"storybook-addon-react-docgen","version":"1.2.44","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","gitHead":"9201c58a7aafb04aa2eef7691a9850dac7f93b3e","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.44","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-0ua6cH/TDnKuj5Wza21DXF1B7wIlqckS2qOQUocI2mvgMAWQwFTFJ+NpImjP4m+DntOzz1X9d5LFVy9JG5MgZg==","shasum":"4a52baf442b65a25d156e141436332bd2ae957be","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.44.tgz","fileCount":20,"unpackedSize":60251,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHT37RY5sJBkzW3qKkvNReTvrS5NbrJpQSiE4nl8g2NNAiEAooHbDZqjfS0fa52aP7sO4OrQcYOnKb0aJ91t2XdAq0Y="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.44_1692736757091_0.5961241600989962"},"_hasShrinkwrap":false},"1.2.45-canary.68.2166.0":{"name":"storybook-addon-react-docgen","version":"1.2.45-canary.68.2166.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.14.0","react-dom":"16.14.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"ff484954eb8bdf6450331ce84ad97da9a6c531cd","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.45-canary.68.2166.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-XRetc2SOqpOOwR04VihEb6xzGdpLRwDU7PNz+aVW1tTJqnbP7YeXxP3vumWI7t8Rdt8HKzwP7d27Pmgm3qZqHQ==","shasum":"a6d3028a6cf8634434cb9273161141b043b75c10","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.45-canary.68.2166.0.tgz","fileCount":20,"unpackedSize":60172,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDFcpx2OdqfiSabAeQoceKnf/vRJvX7lDnuGfpBpHXCfAiEAz3gbUr/nqPM7eXz1yKf8Xp5GpuokqInEh2rn816Xf7c="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.45-canary.68.2166.0_1693138272194_0.7684838972060906"},"_hasShrinkwrap":false},"1.2.45-canary.68.2196.0":{"name":"storybook-addon-react-docgen","version":"1.2.45-canary.68.2196.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.14.0","react-dom":"16.14.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"f6bc9051d7128dcf3979b1d79b263fcedabf0eee","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.45-canary.68.2196.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-BQmXeTpReD+xZjibj6QHI0oAGl/29Hl5WQAEpcFMBG15EgY5qlMwHrR+7zsXN/keruShdwXNAHPpP2UE1hgjVQ==","shasum":"49a1521600ea7a9d44f56db2fe4da729d08cb84d","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.45-canary.68.2196.0.tgz","fileCount":20,"unpackedSize":60172,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeFcIZDaL7w+cPfcnueeXUb104pn4xQLbGrTXbWW+cKQIhAJoK8EeIgcjLmuDZRVvax9amKZm2hA8bXvvtLksOV9qD"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.45-canary.68.2196.0_1695739761674_0.12377238485160369"},"_hasShrinkwrap":false},"1.2.45-canary.68.2201.0":{"name":"storybook-addon-react-docgen","version":"1.2.45-canary.68.2201.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.14.0","react-dom":"16.14.0","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"50b0a6aa887d605e16d37bc7ef5273c2f924fd26","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.45-canary.68.2201.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-slzHDMfPkLhwJL8IIMlHTmd3E5xk67Kbz6mSPwyf2jeduTf+78jPtrMQ5gPRu8mzS+lt2A2StVE6kP6EiXCEbQ==","shasum":"5dc5748fe4bd9aef31289f9ec260d04f71fc5124","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.45-canary.68.2201.0.tgz","fileCount":20,"unpackedSize":60172,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNjlYkKg6kZLVGzF58T1WjsdJzzI8pEV4sewH+07Vf4gIhAPZGXgSxl3J4eGffF4604CruYvSAOEAnU7IO92cDqGoV"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.45-canary.68.2201.0_1695812486496_0.0920341862421985"},"_hasShrinkwrap":false},"1.2.45-canary.68.2217.0":{"name":"storybook-addon-react-docgen","version":"1.2.45-canary.68.2217.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"3c739198ad386e6f6b5aaf074b792d86a42436cd","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.45-canary.68.2217.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-3oKb+u25Kj4yHj1GnJpOzR3deypaNVpfHsdsaXqmev6CmJuvb+uIB1OLvTr+WCJhl5e1LXHgP/W7hhTs1KPcjw==","shasum":"9f04b311b0d3e5f0c3530c8375558cde298fd2fd","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.45-canary.68.2217.0.tgz","fileCount":20,"unpackedSize":60295,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB0/WTqrGPkWIMpOE4wGYSbQ5yr2w9EQZqpJCOzas2ngAiAa6d7F9mJZJK9+siaN7d4VPn0yXoxkou3vMom+kJ/QyA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.45-canary.68.2217.0_1696837720072_0.8582368883901974"},"_hasShrinkwrap":false},"1.2.45-canary.68.2242.0":{"name":"storybook-addon-react-docgen","version":"1.2.45-canary.68.2242.0","description":"A storybook addon to display react docgen info.","main":"dist/index.js","source":"index.js","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"publishConfig":{"registry":"https://registry.npmjs.org"},"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"scripts":{"lint":"xo --ignore stories","build":"babel --extensions \".ts,.tsx,.js\" src -d dist","build:types":"tsc","build:watch":"npm run build -- --watch","prerelease":"npm run build && npm run build:types","release":"auto shipit -vv","storybook":"start-storybook -p 6006","storybook:build":"build-storybook"},"devDependencies":{"@auto-it/gh-pages":"^9.39.0","@babel/cli":"7.6.2","@babel/core":"7.6.2","@babel/plugin-proposal-class-properties":"7.5.5","@babel/plugin-proposal-optional-chaining":"^7.10.1","@babel/preset-env":"7.6.2","@babel/preset-react":"7.0.0","@babel/preset-typescript":"^7.10.1","@storybook/addon-actions":"^5.3.19","@storybook/addon-docs":"^5.3.19","@storybook/addon-links":"^5.3.19","@storybook/addons":"^5.3.19","@storybook/components":"^5.3.19","@storybook/core-events":"^5.3.19","@storybook/react":"^5.3.19","@types/react-dom":"^16.9.8","auto":"^9.39.0","auto-config-hipstersmoothie":"^3.0.24","babel-core":"7.0.0-bridge.0","babel-loader":"^8.1.0","babel-plugin-add-module-exports":"1.0.2","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-config-xo-react":"^0.23.0","eslint-plugin-react":"^7.20.0","eslint-plugin-react-hooks":"^4.0.4","husky":"3.0.7","lint-staged":"9.4.1","prettier":"1.18.2","react":"16.10.1","react-dom":"16.10.1","xo":"^0.32.0"},"peerDependencies":{"@storybook/addons":"*","@storybook/components":"*","@storybook/core-events":"*","react":"*"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"xo":{"extends":["xo-react/space","prettier"],"rules":{"react/jsx-tag-spacing":0,"unicorn/filename-case":0,"@typescript-eslint/indent":0,"@typescript-eslint/ban-types":0,"@typescript-eslint/no-dynamic-delete":0,"@typescript-eslint/prefer-nullish-coalescing":0,"@typescript-eslint/restrict-template-expressions":0,"@typescript-eslint/consistent-type-assertions":0,"react/prop-types":0}},"babel":{"presets":["@babel/env","@babel/preset-react","@babel/preset-typescript"],"plugins":["@babel/plugin-proposal-class-properties","add-module-exports","@babel/plugin-proposal-optional-chaining"]},"dependencies":{"nested-object-assign":"^1.0.3","prop-types":"^15.6.2","react-lifecycles-compat":"^3.0.4","storybook-pretty-props":"^1.2.1"},"auto":{"extends":"hipstersmoothie","plugins":[["gh-pages",{"buildCommand":"npm run storybook:build","dir":"./out"}]]},"keywords":["storybook","addon","react","docgen","typescript"],"license":"MIT","types":"./dist/index.d.ts","readme":"# storybook-addon-react-docgen\n\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier) [![CircleCI](https://img.shields.io/circleci/project/github/hipstersmoothie/storybook-addon-react-docgen/master.svg?style=for-the-badge)](https://circleci.com/gh/hipstersmoothie/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/v/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen) [![npm](https://img.shields.io/npm/dt/storybook-addon-react-docgen.svg?style=for-the-badge)](https://www.npmjs.com/package/storybook-addon-react-docgen)\n\nA storybook addon to display react docgen info.\nThis addon is a drop in replacement for the \"info\" addon's prop table functionality.\nRather than rendering with the component it renders in the addons panel.\nWorks with typescript too!\n\nThere exist other addons that do this, but they didn't work in the same way as the `info` addon.\nThis resulted in complicated configuration changes.\nThis plugin aims to be painless to switch to.\n\n![Example Output](https://github.com/hipstersmoothie/storybook-addon-react-docgen/raw/master/example.png)\n\n## Installation\n\n```sh\nyarn add storybook-addon-react-docgen\n```\n\n## React Docgen Integration\n\nReact Docgen is included as part of the `@storybook/addon-docs` package.\nIf you are using `@storybook/addon-docs` then you do not need to set up docgen and can skip the next steps\n\n### Typescript DocGen\n\nTo use this plugin with a typescript project you need to install [react-docgen-typescript-plugin](https://www.npmjs.com/package/react-docgen-typescript-plugin) and configure webpack to use it.\n\n### Javascript DocGen\n\nTo use this plugin with a javascript project you need to install [babel-plugin-react-docgen](https://github.com/storybookjs/babel-plugin-react-docgen)\n\n## Usage\n\nAdd it in your `main.js` addons\":\n\n```js\nmodule.exports = {\n  stories: ['../stories/**/*.stories.js'],\n  addons: ['@storybook/addon-docs', 'storybook-addon-react-docgen']\n};\n```\n\nThen add the `withPropsTable` decorator to your `preview.js`.\nYou can pass global options here if you want:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { withPropsTable } = require('storybook-addon-react-docgen');\n\naddDecorator(withPropsTable(options));\n// or\naddDecorator(withPropsTable);\n```\n\nYou can use the `props` parameter to configure the options for individual stories:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button'\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n\nWithSomeEmoji.parameters: {\n props: {\n   propTablesExclude: [\n     Other // the actual component\n   ]\n }\n}\n```\n\nor for the entire story:\n\n```js\nimport { storiesOf } from '@storybook/react';\n\nimport Other from './Other';\nimport Component from './Component';\n\nexport default {\n  title: 'Components/Button',\n  parameters: {\n    props: {\n      propTablesExclude: [\n        Other // the actual component\n      ]\n    }\n  }\n};\n\nexport const WithSomeEmoji = () => (\n  <Component>\n    <Other />\n  </Component>\n);\n```\n\n## Configuration\n\n```js\n{\n  /**\n   * Components used in story\n   * Displays Prop Tables with these components\n   * @default []\n   */\n  propTables: Array<React.ComponentType>,\n\n  /**\n   * Define custom sorting order for the components specifying component names in the desired order.\n   * Example:\n   * propTablesSortOrder: [\"MyComponent\", \"FooComponent\", \"AnotherComponent\"]\n   * @default []\n   */\n  propTablesSortOrder: string,\n  /**\n   * Only include prop tables for these components.\n   * Accepts an array of component classes or functions\n   * @default null\n   */\n  propTablesInclude: Array<React.ComponentType | string>,\n  /**\n   * Exclude Components from being shown in Prop Tables section\n   * Accepts an array of component classes or functions\n   * @default []\n   */\n  propTablesExclude: Array<React.ComponentType | string>,\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   * Max props to display per line in source code\n   * @default 3\n   */\n  maxPropsIntoLine: number,\n  /**\n   * Displays the first 10 characters of the prop name\n   * @default 3\n   */\n  maxPropObjectKeys: number,\n  /**\n   * Displays the first 10 items in the default prop array\n   * @default 3\n   */\n  maxPropArrayLength: number,\n  /**\n   * Displays the first 100 characters in the default prop string\n   * @default 50\n   */\n  maxPropStringLength: number,\n  /**\n   * Override the component used to render the props table\n   * @default PropTable\n   */\n  TableComponent: React.ComponentType,\n  /**\n   * Will exclude any respective properties whose name is included in array.\n   * Can also specify absolute propType to exclude (see example below)\n   * Examples:\n   * excludedPropTypes: [\"message\"] // propType to exclude\n   * excludedPropTypes: [\"MyComponent.message\"] // absolute propType\n   *\n   * @default []\n   */\n  excludedPropTypes: Array<string>,\n}\n```\n\n### Rendering a Custom Table\n\nThe TableComponent option allows you to define how the prop table should be rendered. Your component will be rendered with the following props.\n\n```js\n{\n  propDefinitions: Array<{\n    property: string, // The name of the prop\n    propType: Object | string, // The prop type. TODO: info about what this object is...\n    required: boolean, // True if the prop is required\n    description: string, // The description of the prop\n    defaultValue: any // The default value of the prop\n  }>\n}\n```\n\n## FAQ\n\n### Nothing shows up, this is broken!\n\nThe way that the packages implement docgen for react means that there are some limitations on how you can import things and write you components.\n\n1. Must use default export + named export: The docgen will not be able to pick up a name for the default export so you must also use a named export\n\n```ts\nimport * as React from \"react\";\n\ninterface ColorButtonProps {\n  /** Buttons background color */\n  color: \"blue\" | \"green\";\n}\n\n/** A button with a configurable background color. */\nexport const ColorButton: React.SFC<ColorButtonProps> = props => (\n  <button {...props}>\n);\n\nexport default ColorButton;\n```\n\n2. Imports Matter (TypeScript only): The way you import react and use it's types must conform to a few different formate\n\n```tsx\n// To get React.FC to work\nimport * as React from 'react';\nexport const Button: React.FC<ButtonProps> = () => {};\n\n// Without \"* as\" you can only use like:\nimport React, { FC } from 'react';\nexport const Button: FC<ButtonProps> = () => {};\n```\n\n3. Usage within the story matter: This addon determines what components to display props for by finding all components used in the JSX returned by the story. So if you want prop-types to be displayed for a component, you **must** return that component in the story function.\n\n```tsx\nimport React from 'react';\nimport { Button } from './Button';\n\nexport default {\n  title: 'Button'\n};\n\n/** WILL NOT WORK */\n\n// Since the usage of the component is not in the JSX\n// returned by the story function no props are displayed\nconst MyFancyExample = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n\nexport const BaseStory = () => <MyFancyExample />;\n\n/** WILL WORK */\n\n// The JSX returned by the story uses Button, so we will\n// get the props types for button.\nexport const BaseStory = () => {\n  const [count, setCount] = React.useState(0);\n\n  return (\n    <Button\n      primary={boolean('primary', false)}\n      onClick={() => setCount(count + 1)}\n    >\n      \"hello: \" {count}\n    </Button>\n  );\n};\n```\n\n### Why are default props so hard to get right? (TypeScript only)\n\nThe `react` types are magical and you're probably doing too much. Using `React.FC` is the quickest way to ramp up the complexity of your components. Once you use that you lose the `defaultProps` experience.\n\n**Using `React.FC`:**\n\n```tsx\ninterface CardProps {\n  size?: 'small' | 'large';\n}\n\n// The type of size will be \"string | undefined\"\n// You will either have to repeat your default value\n// Or write a helper type the figures out what is defaulted\nconst Card: React.FC<CardProps> = ({ size }) => <div>{size}</div>;\n\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\nWithout React.FC:\n\n```tsx\ninterface CardProps {\n  // Key part right here is to make the defaulted prop not optional\n  // this way in your function it won't be undefined\n  size: 'small' | 'large';\n}\n\n// The type of size will be \"string\"\nconst Card = ({ size }: CardProps) => <div>{size}</div>;\n\n// Typescript can use this defaultProps to determine what is optional\n// for the user of your component.\nCard.defaultProps = {\n  size: 'small'\n};\n\n// Size is optional to the user\nconst Usage = () => <Card />;\n```\n\n### My components extends from HTML elements and there are way too many props in the panel! How do I get rid of some?\n\nYou can add a filter to `react-docgen-typescript-plugin` that will omit anything that comes from `@types/react`.\n\n`.storybook/main.js`\n\n```js\n{\n    typescript: {\n        check: false,\n        reactDocgen: 'react-docgen-typescript',\n        reactDocgenTypescriptOptions: {\n            propFilter: (prop) => {\n                if (prop.name === 'children') {\n                    return true;\n                }\n\n                if (prop.parent) {\n                    return (\n                        !/@types\\/react/.test(prop.parent.fileName) &&\n                        !/@emotion/.test(prop.parent.fileName)\n                    );\n                }\n                return true;\n            },\n        },\n    },\n}\n```\n\n## Inspiration\n\nCode heavily inspired by (copied from):\n\n- [@storybook/addon-info](https://www.npmjs.com/package/@storybook/addon-info)\n- [@storybook/addon-notes](https://www.npmjs.com/package/@storybook/addon-notes)\n","readmeFilename":"README.md","gitHead":"8e64875c59460b79531887e5cbc7386c353e71f9","bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","_id":"storybook-addon-react-docgen@1.2.45-canary.68.2242.0","_nodeVersion":"17.2.0","_npmVersion":"8.1.4","dist":{"integrity":"sha512-ozub7oDrDotbMmz7IoD08ihL1XJmw2dZAz3r29zYekdAjVYw//cun3AAHnwE0pamOumWiwJ6JPDIrS03qMX4Ng==","shasum":"f56595a83419cf52862aa27ba22a6a7089d2f4f9","tarball":"https://registry.npmjs.org/storybook-addon-react-docgen/-/storybook-addon-react-docgen-1.2.45-canary.68.2242.0.tgz","fileCount":20,"unpackedSize":60295,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBcViwOgB6BzAOdul57jdo4q7Y0qOV8VmgXcUdnGYaorAiA/JmDjziZoy3X0o1+8gaUpxjzXs2c53CDXY2h7tYMZwA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-react-docgen_1.2.45-canary.68.2242.0_1698080280857_0.26255052725636063"},"_hasShrinkwrap":false}},"time":{"created":"2018-11-25T08:22:12.334Z","0.0.0":"2018-11-25T08:22:14.550Z","modified":"2023-10-23T16:58:01.336Z","0.0.4":"2018-11-25T08:32:13.154Z","1.0.0":"2018-11-25T08:38:11.247Z","1.0.1":"2018-11-25T09:02:28.416Z","1.0.2":"2018-11-25T11:26:56.193Z","1.0.3":"2018-11-25T12:17:37.045Z","1.0.4":"2018-11-30T19:47:45.156Z","1.0.5":"2019-03-02T10:14:43.724Z","1.1.0":"2019-03-03T09:33:30.649Z","1.1.1":"2019-03-06T20:22:53.866Z","1.1.2":"2019-03-06T22:03:27.278Z","1.1.3":"2019-03-06T23:15:19.218Z","1.1.4":"2019-03-07T08:15:00.314Z","1.1.5":"2019-03-08T22:07:37.824Z","1.2.0":"2019-03-20T19:20:30.328Z","1.2.1":"2019-04-05T23:09:58.301Z","1.2.2":"2019-05-02T01:31:32.505Z","1.2.3":"2019-08-09T19:51:58.731Z","1.2.4":"2019-08-09T19:54:41.334Z","1.2.5":"2019-08-11T02:18:43.702Z","1.2.6":"2019-08-13T20:46:25.459Z","1.2.7":"2019-09-03T16:04:47.031Z","1.2.8-canary.a48cf60":"2019-09-03T17:35:04.497Z","1.2.8-canary.123.0.732900a":"2019-09-03T20:46:53.344Z","1.2.8-canary.123.1.732900a":"2019-09-03T20:47:38.769Z","1.2.8-canary.123.2.732900a":"2019-09-03T20:56:07.414Z","1.2.8-canary.28.214":"2019-09-03T21:25:45.178Z","1.2.8-canary.123.3.66614bd":"2019-09-03T21:26:00.908Z","1.2.8-canary.27.220":"2019-09-03T21:29:10.968Z","1.2.8-canary.30.228":"2019-09-03T21:59:49.762Z","1.2.8-canary.29.229":"2019-09-03T22:00:06.286Z","1.2.8-canary.31.233":"2019-09-03T23:47:04.087Z","1.2.8-canary.32.235":"2019-09-03T23:47:43.393Z","1.2.8-canary.35.243":"2019-09-04T02:52:01.887Z","1.2.8-canary.36.245":"2019-09-04T02:53:06.664Z","1.2.8-canary.37.250":"2019-09-04T04:31:33.827Z","1.2.8-canary.40.256":"2019-09-04T06:54:04.295Z","1.2.8-canary.39.255":"2019-09-04T06:54:15.900Z","1.2.8-canary.41.261":"2019-09-04T08:00:19.301Z","1.2.8-canary.42.262":"2019-09-04T08:00:32.558Z","1.2.8-canary.44.267":"2019-09-04T08:45:08.660Z","1.2.8-canary.43.268":"2019-09-04T08:45:25.480Z","1.2.8-canary.45.271":"2019-09-04T09:41:44.710Z","1.2.8-canary.29.274":"2019-09-06T17:40:35.353Z","1.2.8-canary.47.277":"2019-09-10T06:05:53.027Z","1.2.8-canary.42.280":"2019-09-10T16:40:18.282Z","1.2.8":"2019-09-10T16:52:50.615Z","1.2.9":"2019-09-10T16:53:24.530Z","1.2.10":"2019-09-10T16:53:55.876Z","1.2.11-canary.30.323":"2019-09-10T16:54:07.159Z","1.2.11":"2019-09-10T16:54:20.960Z","1.2.12":"2019-09-10T16:54:58.502Z","1.2.12-canary.32.330":"2019-09-10T16:55:14.867Z","1.2.13-canary.39.331":"2019-09-10T16:55:41.587Z","1.2.13-canary.36.332":"2019-09-10T16:56:10.275Z","1.2.13-canary.41.334":"2019-09-10T16:56:54.259Z","1.2.13-canary.42.333":"2019-09-10T16:57:07.556Z","1.2.13-canary.30.337":"2019-09-10T16:57:33.425Z","1.2.13-canary.44.336":"2019-09-10T16:57:38.497Z","1.2.13-canary.45.338":"2019-09-10T16:58:06.095Z","1.2.13-canary.43.335":"2019-09-10T16:58:12.692Z","1.2.13":"2019-09-10T17:20:44.979Z","1.2.14-canary.41.359":"2019-09-10T17:23:40.540Z","1.2.14":"2019-09-10T17:24:12.572Z","1.2.15":"2019-09-10T17:24:43.145Z","1.2.16-canary.41.364":"2019-09-10T17:24:53.611Z","1.2.16-canary.42.369":"2019-09-10T17:26:03.469Z","1.2.16-canary.45.373":"2019-09-10T17:26:18.951Z","1.2.16-canary.41.372":"2019-09-10T17:26:33.223Z","1.2.16-canary.43.374":"2019-09-10T17:26:37.423Z","1.2.16-canary.44.370":"2019-09-10T17:27:23.530Z","1.2.16-canary.48.381":"2019-09-12T17:42:37.005Z","1.2.16-canary.48.384":"2019-09-13T06:50:18.356Z","1.2.16-canary.41.387":"2019-09-14T01:50:17.697Z","1.2.16-canary.45.390":"2019-09-14T03:54:05.273Z","1.2.16-canary.42.410":"2019-09-16T18:11:01.163Z","1.2.16":"2019-09-16T18:11:07.731Z","1.2.17":"2019-09-16T18:11:52.929Z","1.2.18":"2019-09-16T18:12:26.880Z","1.2.19-canary.45.416":"2019-09-16T18:13:08.493Z","1.2.19-canary.44.414":"2019-09-16T18:13:13.413Z","1.2.19-canary.45.413":"2019-09-16T18:13:41.126Z","1.2.19-canary.45.420":"2019-09-17T16:31:59.115Z","1.2.19-canary.425":"2019-09-20T19:57:56.462Z","1.2.19":"2019-09-20T19:58:40.805Z","1.2.20":"2019-09-20T19:58:52.895Z","1.2.21-canary.45.436":"2019-09-20T19:59:30.838Z","1.2.21-canary.45.439":"2019-09-20T20:00:39.927Z","1.2.21-canary.49.443":"2019-09-20T20:02:41.470Z","1.2.21":"2019-09-20T20:06:25.935Z","1.2.22-canary.50.450":"2019-09-22T10:43:06.454Z","1.2.22-canary.51.463":"2019-09-23T16:47:55.188Z","1.2.22-canary.51.466":"2019-09-23T16:49:59.472Z","1.2.22-canary.52.469":"2019-09-23T21:34:38.163Z","1.2.22-canary.54.480":"2019-09-26T10:51:12.607Z","1.2.22-canary.55.483":"2019-09-27T20:56:53.860Z","1.2.22-canary.56.486":"2019-09-28T01:25:34.514Z","1.2.22-canary.56.489":"2019-09-28T02:13:14.147Z","1.2.22-canary.55.492":"2019-09-28T18:53:40.678Z","1.2.22-canary.57.495":"2019-09-29T05:45:44.217Z","1.2.22-canary.58.511":"2019-09-30T17:17:15.195Z","1.2.22":"2019-09-30T17:19:30.856Z","1.2.23":"2019-09-30T17:19:40.185Z","1.2.24-canary.56.518":"2019-09-30T17:21:42.211Z","1.2.24":"2019-09-30T17:22:57.963Z","1.2.25":"2019-09-30T17:25:15.672Z","1.2.26-canary.51.527":"2019-09-30T18:37:03.839Z","1.2.26-canary.59.537":"2019-09-30T18:40:06.701Z","1.2.26":"2019-09-30T18:42:52.353Z","1.2.27-canary.60.546":"2019-09-30T18:43:28.632Z","1.2.27-canary.53.547":"2019-09-30T18:43:45.129Z","1.2.27":"2019-09-30T18:45:55.427Z","1.2.28-canary.61.556":"2019-09-30T18:51:18.960Z","1.2.28-canary.61.559":"2019-09-30T18:54:26.995Z","1.2.28":"2019-09-30T18:56:31.157Z","1.2.29-canary.62.566":"2019-09-30T19:58:30.015Z","1.2.29-canary.65.573":"2019-10-01T05:23:48.674Z","1.2.29-canary.62.579":"2019-10-01T16:01:45.609Z","1.2.29-canary.66.584":"2019-10-02T01:59:02.138Z","1.2.29-canary.68.587":"2019-10-03T21:28:44.920Z","1.2.29-canary.69.590":"2019-10-03T23:36:09.976Z","1.2.29-canary.64.593":"2019-10-04T14:24:27.914Z","1.2.29-canary.69.596":"2019-10-04T18:27:36.880Z","1.2.29-canary.70.599":"2019-10-05T21:37:22.521Z","1.2.29-canary.71.602":"2019-10-07T10:13:56.355Z","1.2.29-canary.71.605":"2019-10-07T11:11:22.613Z","1.2.29-canary.72.608":"2019-10-08T05:42:58.028Z","1.2.29-canary.73.611":"2019-10-08T20:21:20.218Z","1.2.29-canary.73.614":"2019-10-10T14:50:31.591Z","1.2.29-canary.66.617":"2019-10-13T00:13:03.291Z","1.2.29-canary.71.620":"2019-10-14T09:44:44.458Z","1.2.29-canary.69.623":"2019-10-16T23:27:26.378Z","1.2.29-canary.69.626":"2019-10-17T17:31:01.154Z","1.2.29-canary.69.629":"2019-10-17T22:15:10.756Z","1.2.29-canary.69.632":"2019-10-18T19:01:48.045Z","1.2.29-canary.69.635":"2019-10-18T21:25:16.708Z","1.2.29-canary.69.638":"2019-10-21T16:41:04.329Z","1.2.29-canary.71.641":"2019-10-22T01:45:06.107Z","1.2.29-canary.68.644":"2019-10-22T21:38:16.337Z","1.2.29-canary.69.647":"2019-10-23T15:38:44.521Z","1.2.29-canary.69.650":"2019-10-23T16:07:15.747Z","1.2.29-canary.69.653":"2019-10-24T18:30:46.777Z","1.2.29-canary.70.658":"2019-10-26T16:24:50.620Z","1.2.29-canary.69.661":"2019-10-29T16:45:32.811Z","1.2.29-canary.69.664":"2019-10-30T16:31:56.294Z","1.2.29-canary.73.667":"2019-11-05T11:40:34.877Z","1.2.29-canary.73.670":"2019-11-05T13:51:08.532Z","1.2.29-canary.69.673":"2019-11-05T20:35:30.800Z","1.2.29-canary.73.676":"2019-11-06T23:57:14.796Z","1.2.29-canary.69.679":"2019-11-07T18:51:55.844Z","1.2.29-canary.69.682":"2019-11-07T19:03:26.043Z","1.2.29-canary.69.685":"2019-11-07T19:48:20.958Z","1.2.29-canary.69.688":"2019-11-07T22:41:50.032Z","1.2.29-canary.69.691":"2019-11-07T23:35:34.045Z","1.2.29-canary.74.694":"2019-11-09T00:33:25.808Z","1.2.29-canary.71.697":"2019-11-09T09:52:17.835Z","1.2.29-canary.74.700":"2019-11-09T12:38:22.192Z","1.2.29-canary.69.703":"2019-11-11T07:33:10.967Z","1.2.29-canary.76.709":"2019-11-12T17:16:50.376Z","1.2.29-canary.78.720":"2019-11-12T17:42:54.970Z","1.2.29-canary.62.726":"2019-11-12T18:58:33.418Z","1.2.29-canary.69.729":"2019-11-12T20:09:40.037Z","1.2.29-canary.69.732":"2019-11-12T23:41:36.067Z","1.2.29-canary.69.735":"2019-11-13T00:45:49.276Z","1.2.29-canary.72.738":"2019-11-13T20:19:41.056Z","1.2.29-canary.69.741":"2019-11-13T22:50:52.906Z","1.2.29-canary.69.744":"2019-11-14T22:41:22.450Z","1.2.29-canary.68.747":"2019-11-15T00:23:09.950Z","1.2.29-canary.69.750":"2019-11-15T06:44:58.043Z","1.2.29-canary.70.753":"2019-11-17T00:43:37.259Z","1.2.29-canary.66.756":"2019-11-18T02:44:21.121Z","1.2.29-canary.69.759":"2019-11-18T20:19:44.430Z","1.2.29-canary.70.762":"2019-11-19T06:23:04.796Z","1.2.29-canary.73.767":"2019-11-22T23:39:13.571Z","1.2.29-canary.72.772":"2019-11-27T05:21:19.963Z","1.2.29-canary.64.775":"2019-11-29T07:46:53.590Z","1.2.29-canary.71.778":"2019-11-30T13:19:18.282Z","1.2.29-canary.71.783":"2019-12-02T06:31:21.529Z","1.2.29-canary.73.786":"2019-12-06T13:31:59.914Z","1.2.29-canary.69.789":"2019-12-06T23:59:32.515Z","1.2.29-canary.73.792":"2019-12-07T23:49:55.263Z","1.2.29-canary.73.824":"2019-12-19T01:14:40.460Z","1.2.29-canary.70.847":"2019-12-25T10:13:08.183Z","1.2.29-canary.70.850":"2019-12-27T12:12:50.442Z","1.2.29-canary.83.856":"2020-01-07T01:23:26.802Z","1.2.29-canary.83.861":"2020-01-08T05:49:33.468Z","1.2.29-canary.83.866":"2020-01-09T04:27:37.185Z","1.2.29-canary.83.869":"2020-01-09T04:52:38.375Z","1.2.29-canary.83.872":"2020-01-09T21:26:12.294Z","1.2.29-canary.83.875":"2020-01-10T04:07:56.982Z","1.2.29-canary.83.878":"2020-01-10T07:45:26.040Z","1.2.29-canary.71.882":"2020-01-11T09:34:14.082Z","1.2.29-canary.71.884":"2020-01-11T09:35:55.364Z","1.2.29-canary.73.887":"2020-01-12T00:43:41.131Z","1.2.29-canary.83.890":"2020-01-12T06:17:34.693Z","1.2.29-canary.71.893":"2020-01-12T15:43:36.368Z","1.2.29-canary.73.903":"2020-01-18T17:02:13.679Z","1.2.29-canary.64.901":"2020-01-18T17:02:29.783Z","1.2.29-canary.71.904":"2020-01-18T17:02:37.194Z","1.2.29-canary.83.908":"2020-01-18T17:05:02.668Z","1.2.29-canary.64.921":"2020-02-08T23:58:18.199Z","1.2.29-canary.70.923":"2020-02-08T23:59:11.078Z","1.2.29-canary.71.924":"2020-02-08T23:59:45.400Z","1.2.29-canary.73.915":"2020-02-09T00:00:00.792Z","1.2.29-canary.83.927":"2020-02-09T00:00:37.143Z","1.2.29-canary.88.929":"2020-02-09T00:15:51.422Z","1.2.29-canary.71.938":"2020-02-16T09:00:22.655Z","1.2.29-canary.83.942":"2020-02-16T09:01:05.658Z","1.2.29-canary.73.949":"2020-03-14T14:01:07.224Z","1.2.29-canary.88.960":"2020-03-14T14:03:26.510Z","1.2.29-canary.64.959":"2020-03-14T14:03:37.234Z","1.2.29-canary.68.958":"2020-03-14T14:03:42.552Z","1.2.29-canary.71.962":"2020-03-14T14:03:54.707Z","1.2.29-canary.90.965":"2020-04-05T14:14:52.725Z","1.2.29-canary.91.970":"2020-04-05T15:25:39.881Z","1.2.29":"2020-04-05T18:11:01.223Z","1.2.30-canary.73.981":"2020-04-05T18:13:05.731Z","1.2.30-canary.70.990":"2020-04-05T18:14:37.862Z","1.2.30-canary.62.989":"2020-04-05T18:15:29.694Z","1.2.30-canary.68.997":"2020-04-05T18:15:57.271Z","1.2.30-canary.92.1002":"2020-04-05T18:16:24.319Z","1.2.30-canary.88.1001":"2020-04-05T18:16:33.668Z","1.2.30-canary.71.999":"2020-04-05T18:16:41.838Z","1.2.30":"2020-04-05T18:17:29.259Z","1.2.31-canary.93.1007":"2020-04-05T18:18:27.975Z","1.2.31-canary.62.1010":"2020-04-05T18:19:29.420Z","1.2.31-canary.94.1016":"2020-04-05T20:21:04.777Z","1.2.31-canary.93.1019":"2020-04-05T21:29:10.348Z","1.2.31":"2020-04-06T04:12:38.831Z","1.2.32-canary.62.1026":"2020-04-06T04:15:02.526Z","1.2.32-canary.93.1032":"2020-04-06T12:30:10.111Z","1.2.32-canary.73.1047":"2020-04-07T19:29:48.821Z","1.2.32-canary.88.1061":"2020-04-09T14:26:17.014Z","1.2.32-canary.96.1064":"2020-04-09T15:56:35.199Z","1.2.32":"2020-04-09T16:51:00.709Z","1.2.33-canary.62.1072":"2020-04-09T16:52:53.921Z","1.2.33-canary.83.1074":"2020-04-09T16:55:19.819Z","1.2.33-canary.83.1077":"2020-04-09T21:35:24.747Z","1.2.33-canary.88.1094":"2020-04-17T13:55:31.190Z","1.2.33-canary.88.1100":"2020-04-18T08:27:55.667Z","1.2.33-canary.88.1103":"2020-04-19T08:25:45.797Z","1.2.33-canary.88.1115":"2020-04-21T14:32:25.136Z","1.2.33-canary.93.1118":"2020-04-21T17:20:09.880Z","1.2.33-canary.70.1121":"2020-04-21T19:26:56.162Z","1.2.33-canary.88.1141":"2020-04-28T15:55:06.725Z","1.2.33-canary.73.1144":"2020-04-29T18:42:20.670Z","1.2.33-canary.88.1147":"2020-04-30T11:50:04.346Z","1.2.33-canary.88.1150":"2020-05-01T04:16:08.130Z","1.2.33-canary.92.1153":"2020-05-01T16:26:45.368Z","1.2.33-canary.92.1176":"2020-05-12T17:22:39.898Z","1.2.33-canary.64.1179":"2020-05-13T03:44:34.293Z","1.2.33-canary.92.1182":"2020-05-13T16:24:13.592Z","1.2.33-canary.88.1194":"2020-05-18T13:34:08.695Z","1.2.33-canary.88.1200":"2020-05-18T17:58:04.390Z","1.2.33-canary.88.1221":"2020-05-22T05:57:29.503Z","1.2.33-canary.88.1224":"2020-05-22T08:23:31.867Z","1.2.33-canary.71.1236":"2020-05-24T05:31:19.713Z","1.2.33-canary.92.1239":"2020-05-26T17:04:29.278Z","1.2.33-canary.73.1242":"2020-05-26T22:39:27.472Z","1.2.33-canary.92.1245":"2020-05-27T01:32:27.955Z","1.2.33-canary.73.1248":"2020-05-28T00:30:27.638Z","1.2.33-canary.99.1251":"2020-05-28T20:06:54.838Z","1.2.33":"2020-05-28T20:41:50.985Z","1.2.34-canary.62.1258":"2020-05-28T20:48:42.057Z","1.2.34-canary.88.1267":"2020-05-29T04:31:48.131Z","1.2.34-canary.73.1273":"2020-05-30T20:23:17.124Z","1.2.34-canary.88.1283":"2020-06-03T14:58:55.704Z","1.2.34-canary.88.1292":"2020-06-04T12:22:23.951Z","1.2.34-canary.101.1298":"2020-06-05T21:03:44.865Z","1.2.34":"2020-06-05T21:07:25.088Z","1.2.35-canary.62.1305":"2020-06-05T21:10:25.098Z","1.2.35-canary.1308":"2020-06-05T22:02:52.622Z","1.2.35-canary.102.1321.0":"2020-06-08T18:43:47.014Z","1.2.35-canary.62.1327.0":"2020-06-08T18:48:52.633Z","1.2.35":"2020-06-08T18:49:44.978Z","1.2.36-canary.62.1331.0":"2020-06-08T18:52:21.067Z","1.2.36-canary.68.1344.0":"2020-06-08T21:02:36.620Z","1.2.36-canary.73.1343.0":"2020-06-08T21:02:52.606Z","1.2.36-canary.74.1345.0":"2020-06-08T21:03:08.266Z","1.2.36-canary.66.1348.0":"2020-06-08T21:03:49.918Z","1.2.36-canary.88.1350.0":"2020-06-08T21:04:20.821Z","1.2.36-canary.93.1351.0":"2020-06-08T21:04:38.277Z","1.2.36-canary.83.1352.0":"2020-06-08T21:04:48.095Z","1.2.36-canary.104.1359.0":"2020-06-09T06:20:45.919Z","1.2.36-canary.104.1362.0":"2020-06-09T06:57:50.826Z","1.2.36":"2020-06-09T15:46:10.068Z","1.2.37-canary.62.1369.0":"2020-06-09T15:48:56.527Z","1.2.37-canary.105.1372.0":"2020-06-09T19:25:52.179Z","1.2.37-canary.105.1375.0":"2020-06-09T19:57:00.980Z","1.2.37-canary.105.1378.0":"2020-06-09T20:13:03.804Z","1.2.37":"2020-06-09T20:58:38.958Z","1.2.37-canary.62.1384.0":"2020-06-09T20:58:54.073Z","1.2.38-canary.62.1388.0":"2020-06-09T21:01:13.281Z","1.2.38-canary.106.1391.0":"2020-06-09T23:47:56.327Z","1.2.38":"2020-06-10T00:03:08.208Z","1.2.39-canary.62.1398.0":"2020-06-10T00:06:45.911Z","1.2.39-canary.88.1401.0":"2020-06-12T09:23:08.683Z","1.2.39-canary.88.1406.0":"2020-06-17T10:29:11.353Z","1.2.39-canary.110.1409.0":"2020-06-17T20:22:47.788Z","1.2.39-canary.110.1414.0":"2020-06-17T21:11:10.071Z","1.2.39-canary.110.1417.0":"2020-06-17T21:19:18.647Z","1.2.39-canary.110.1420.0":"2020-06-17T21:22:09.314Z","1.2.39-canary.62.1425.0":"2020-06-17T23:31:08.375Z","1.2.39":"2020-06-17T23:31:35.649Z","1.2.40-canary.62.1430.0":"2020-06-17T23:35:42.448Z","1.2.40-canary.74.1435.0":"2020-06-18T01:53:05.657Z","1.2.40-canary.73.1436.0":"2020-06-18T01:55:47.318Z","1.2.40-canary.73.1439.0":"2020-06-19T21:30:23.959Z","1.2.40-canary.111.1444.0":"2020-06-23T18:23:04.652Z","1.2.40":"2020-06-23T18:25:56.639Z","1.2.41-canary.62.1451.0":"2020-06-23T18:29:27.385Z","1.2.41-canary.68.1454.0":"2020-06-30T11:25:47.628Z","1.2.41-canary.73.1457.0":"2020-06-30T13:26:22.110Z","1.2.41-canary.112.1460.0":"2020-07-07T00:35:22.574Z","1.2.41":"2020-07-07T00:43:26.103Z","1.2.42-canary.62.1468.0":"2020-07-07T00:48:07.463Z","1.2.42-canary.68.1471.0":"2020-07-07T21:47:43.639Z","1.2.42-canary.68.1475.0":"2020-07-10T18:21:12.093Z","1.2.42-canary.68.1478.0":"2020-07-13T17:22:07.983Z","1.2.42-canary.73.1481.0":"2020-07-14T18:26:56.626Z","1.2.42-canary.114.1493.0":"2020-07-17T15:03:18.872Z","1.2.42":"2020-07-17T16:19:09.670Z","1.2.43-canary.62.1500.0":"2020-07-17T16:22:24.956Z","1.2.43-canary.73.1503.0":"2020-07-30T22:01:54.239Z","1.2.43-canary.73.1506.0":"2020-08-04T22:18:18.651Z","1.2.43-canary.68.1509.0":"2020-08-17T12:44:27.817Z","1.2.43-canary.73.1512.0":"2020-08-20T19:12:49.061Z","1.2.43-canary.93.1515.0":"2020-08-24T12:25:37.976Z","1.2.43-canary.62.1518.0":"2020-08-25T08:53:12.542Z","1.2.43-canary.88.1521.0":"2020-08-25T11:03:47.694Z","1.2.43-canary.88.1524.0":"2020-08-25T16:14:30.273Z","1.2.43-canary.93.1527.0":"2020-08-26T04:29:51.602Z","1.2.43-canary.62.1530.0":"2020-08-26T17:03:15.534Z","1.2.43-canary.62.1536.0":"2020-08-26T17:22:24.646Z","1.2.43-canary.62.1542.0":"2020-08-28T00:24:12.599Z","1.2.43-canary.73.1545.0":"2020-08-31T20:25:19.257Z","1.2.43-canary.88.1548.0":"2020-09-03T08:29:51.776Z","1.2.43-canary.73.1551.0":"2020-09-03T16:26:19.420Z","1.2.43-canary.83.1554.0":"2020-09-07T10:39:39.289Z","1.2.43-canary.62.1557.0":"2020-09-08T20:17:10.084Z","1.2.43-canary.115.1563.0":"2020-09-08T23:37:16.043Z","1.2.43-canary.62.1566.0":"2020-09-08T23:49:48.190Z","1.2.43-canary.62.1570.0":"2020-09-09T11:10:57.573Z","1.2.43-canary.73.1572.0":"2020-09-09T11:13:41.819Z","1.2.43-canary.68.1575.0":"2020-09-10T19:11:33.328Z","1.2.43-canary.68.1578.0":"2020-09-11T12:25:43.269Z","1.2.43-canary.93.1581.0":"2020-09-16T01:37:57.431Z","1.2.43-canary.88.1584.0":"2020-09-16T13:35:05.029Z","1.2.43-canary.118.1599.0":"2020-11-14T06:00:16.242Z","1.2.43-canary.88.1606.0":"2020-11-27T01:02:13.680Z","1.2.43-canary.93.1605.0":"2020-11-27T01:02:25.172Z","1.2.43-canary.73.1608.0":"2020-11-27T01:03:31.830Z","1.2.43-canary.83.1615.0":"2020-12-08T13:03:23.149Z","1.2.43-canary.93.1617.0":"2020-12-08T13:03:38.307Z","1.2.43-canary.120.1637.0":"2021-02-09T08:04:13.644Z","1.2.43-canary.121.1639.0":"2021-02-09T08:04:25.223Z","1.2.43-canary.88.1638.0":"2021-02-09T08:04:45.154Z","1.2.43-canary.73.1641.0":"2021-02-09T08:06:25.483Z","1.2.43-canary.123.1665.0":"2021-04-26T16:23:17.766Z","1.2.43-canary.124.1666.0":"2021-04-26T16:23:23.789Z","1.2.43-canary.73.1667.0":"2021-04-26T16:23:38.584Z","1.2.43-canary.73.1690.0":"2021-05-09T23:27:13.931Z","1.2.43-canary.73.1725.0":"2021-05-15T20:55:31.561Z","1.2.43-canary.124.1745.0":"2021-06-06T20:52:06.645Z","1.2.43-canary.73.1751.0":"2021-06-06T20:53:14.191Z","1.2.43-canary.127.1752.0":"2021-06-06T20:53:21.817Z","1.2.43-canary.128.1756.0":"2021-06-06T20:53:44.776Z","1.2.43-canary.93.1758.0":"2021-06-06T20:53:53.631Z","1.2.43-canary.127.1764.0":"2021-06-17T09:13:16.521Z","1.2.43-canary.73.1767.0":"2021-06-17T09:13:41.497Z","1.2.43-canary.128.1770.0":"2021-06-17T09:14:01.867Z","1.2.43-canary.73.1784.0":"2021-10-20T06:45:18.850Z","1.2.43-canary.124.1785.0":"2021-10-20T06:45:22.553Z","1.2.43-canary.127.1787.0":"2021-10-20T06:45:30.375Z","1.2.43-canary.128.1790.0":"2021-10-20T06:46:10.823Z","1.2.43-canary.135.1793.0":"2021-10-20T06:46:16.410Z","1.2.43-canary.93.1794.0":"2021-10-20T06:47:16.957Z","1.2.43-canary.73.1804.0":"2022-03-07T12:49:10.060Z","1.2.43-canary.128.1813.0":"2022-03-07T12:50:13.632Z","1.2.43-canary.68.1814.0":"2022-03-07T12:50:17.715Z","1.2.43-canary.127.1815.0":"2022-03-07T12:50:29.031Z","1.2.43-canary.131.1820.0":"2022-03-07T12:50:50.516Z","1.2.43-canary.93.1822.0":"2022-03-07T12:51:10.742Z","1.2.43-canary.73.1833.0":"2022-03-26T14:07:26.749Z","1.2.43-canary.127.1836.0":"2022-03-26T14:07:47.992Z","1.2.43-canary.128.1838.0":"2022-03-26T14:07:56.876Z","1.2.43-canary.93.1841.0":"2022-03-26T14:08:34.656Z","1.2.43-canary.73.1848.0":"2022-04-24T18:26:01.342Z","1.2.43-canary.68.1851.0":"2022-04-24T18:26:23.826Z","1.2.43-canary.93.1852.0":"2022-04-24T18:26:34.755Z","1.2.43-canary.116.1854.0":"2022-04-24T18:27:35.105Z","1.2.43-canary.124.1861.0":"2022-05-16T01:10:06.347Z","1.2.43-canary.68.1866.0":"2022-05-16T01:11:25.999Z","1.2.43-canary.73.1867.0":"2022-05-16T01:11:30.396Z","1.2.43-canary.116.1868.0":"2022-05-16T01:11:40.457Z","1.2.43-canary.73.1875.0":"2022-06-18T15:52:15.938Z","1.2.43-canary.68.1880.0":"2022-06-18T15:52:52.098Z","1.2.43-canary.127.1885.0":"2022-06-18T15:53:58.015Z","1.2.43-canary.93.1887.0":"2022-06-18T15:54:12.180Z","1.2.43-canary.116.1890.0":"2022-06-18T15:55:09.440Z","1.2.43-canary.123.1898.0":"2022-09-25T13:32:15.405Z","1.2.43-canary.73.1901.0":"2022-09-25T13:33:04.456Z","1.2.43-canary.68.1905.0":"2022-09-25T13:33:19.120Z","1.2.43-canary.127.1907.0":"2022-09-25T13:33:34.588Z","1.2.43-canary.73.1922.0":"2022-11-20T21:11:57.396Z","1.2.43-canary.68.1926.0":"2022-11-20T21:12:45.346Z","1.2.43-canary.127.1931.0":"2022-11-20T21:13:29.054Z","1.2.43-canary.138.1943.0":"2023-02-06T16:50:32.185Z","1.2.43":"2023-02-06T16:51:47.809Z","1.2.44-canary.73.1950.0":"2023-02-06T16:55:28.792Z","1.2.44-canary.93.1954.0":"2023-02-06T16:56:15.941Z","1.2.44-canary.116.1956.0":"2023-02-06T16:56:44.807Z","1.2.44-canary.93.1961.0":"2023-02-08T06:18:48.100Z","1.2.44-canary.73.1964.0":"2023-02-20T17:06:07.647Z","1.2.44-canary.116.1967.0":"2023-02-24T12:43:27.241Z","1.2.44-canary.73.1970.0":"2023-03-14T22:52:37.671Z","1.2.44-canary.68.1974.0":"2023-03-15T16:42:13.640Z","1.2.44-canary.73.1976.0":"2023-03-15T16:43:04.667Z","1.2.44-canary.68.1980.0":"2023-03-15T21:02:00.184Z","1.2.44-canary.93.1985.0":"2023-03-20T06:39:28.211Z","1.2.44-canary.68.1989.0":"2023-03-20T14:57:36.376Z","1.2.44-canary.93.1994.0":"2023-03-21T09:12:01.199Z","1.2.44-canary.93.1997.0":"2023-03-24T13:19:11.887Z","1.2.44-canary.68.2021.0":"2023-04-03T09:06:00.402Z","1.2.44-canary.68.2028.0":"2023-04-03T22:30:34.341Z","1.2.44-canary.68.2034.0":"2023-04-04T15:39:03.743Z","1.2.44-canary.68.2040.0":"2023-04-17T09:57:02.041Z","1.2.44-canary.68.2047.0":"2023-05-28T11:15:45.614Z","1.2.44-canary.93.2049.0":"2023-05-28T11:16:38.092Z","1.2.44-canary.73.2051.0":"2023-05-28T11:17:17.211Z","1.2.44-canary.73.2054.0":"2023-05-29T14:54:16.026Z","1.2.44-canary.68.2058.0":"2023-06-04T08:17:31.961Z","1.2.44-canary.68.2067.0":"2023-06-13T18:00:59.922Z","1.2.44-canary.68.2073.0":"2023-06-18T07:32:06.237Z","1.2.44-canary.68.2079.0":"2023-06-19T08:33:41.685Z","1.2.44-canary.68.2085.0":"2023-06-29T10:05:48.553Z","1.2.44-canary.68.2094.0":"2023-07-06T12:34:03.124Z","1.2.44-canary.68.2103.0":"2023-07-09T09:28:09.456Z","1.2.44-canary.68.2113.0":"2023-07-16T17:49:28.127Z","1.2.44-canary.68.2119.0":"2023-07-19T11:55:17.388Z","1.2.44-canary.68.2129.0":"2023-08-01T20:52:23.710Z","1.2.44-canary.68.2138.0":"2023-08-09T13:35:57.198Z","1.2.44-canary.140.2144.0":"2023-08-22T04:38:47.254Z","1.2.44-canary.68.2148.0":"2023-08-22T18:31:14.178Z","1.2.44":"2023-08-22T20:39:17.347Z","1.2.45-canary.68.2166.0":"2023-08-27T12:11:12.373Z","1.2.45-canary.68.2196.0":"2023-09-26T14:49:21.866Z","1.2.45-canary.68.2201.0":"2023-09-27T11:01:26.650Z","1.2.45-canary.68.2217.0":"2023-10-09T07:48:40.334Z","1.2.45-canary.68.2242.0":"2023-10-23T16:58:01.171Z"},"maintainers":[{"name":"alisowski","email":"lisowski54@gmail.com"}],"description":"A storybook addon to display react docgen info.","author":{"name":"Andrew Lisowski","email":"lisowski54@gmail.com"},"readme":"","readmeFilename":"","homepage":"https://github.com/hipstersmoothie/storybook-addon-react-docgen#readme","keywords":["storybook","addon","react","docgen","typescript"],"repository":{"type":"git","url":"git+https://github.com/hipstersmoothie/storybook-addon-react-docgen.git"},"bugs":{"url":"https://github.com/hipstersmoothie/storybook-addon-react-docgen/issues"},"license":"MIT"}