{"_id":"storybook-addon-jsx","_rev":"229-3ae6f70e8b43606c8a4ff954351814c7","name":"storybook-addon-jsx","description":"Display the JSX of the story","dist-tags":{"latest":"7.3.14","beta":"4.0.0","canary":"7.3.15-canary.162.1301.0"},"versions":{"0.0.2":{"name":"storybook-addon-jsx","version":"0.0.2","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run format && npm run test:all","test:all":"jest","test:dev":"jest --watch","prebuild":"rimraf lib","storybook":"start-storybook -p 9009 -c ./example/.storybook","preversion":"npm run build","release":"npm run release"},"devDependencies":{"@kadira/storybook":"^2.35.3","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react":"^15.5.4","react-dom":"^15.5.4","release":"^1.2.1","rimraf":"^2.6.1"},"dependencies":{"jsx-to-string":"^1.1.0","prismjs":"^1.6.0"},"gitHead":"032b690214a2cbdfcdab9ccb0d7d104b9824ed9a","_id":"storybook-addon-jsx@0.0.2","_shasum":"032fc3a790c795604312a60ff451ffe3d1c8b0e8","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"ellyo","email":"wcastand@gmail.com"},"dist":{"shasum":"032fc3a790c795604312a60ff451ffe3d1c8b0e8","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-0.0.2.tgz","integrity":"sha512-Xta0FRxzNSI7lWwvUdtyFpmZSQDA+lOMIuwjcLJyhhkYKpfm6/Z16rjzAVfRXIz3SLis7e6xO08o3KRKTJ/l4g==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHqktdQxcsvr/y8earItqQzd1WJ7dwWmF0Vz6VIGfMbBAiBiSeKbXwFXsaAlVS+Gsi+QkK4zcq04VH3Wa/KSh/bJrg=="}]},"maintainers":[{"name":"ellyo","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/storybook-addon-jsx-0.0.2.tgz_1492766987720_0.8213975434191525"},"directories":{}},"0.0.3":{"name":"storybook-addon-jsx","version":"0.0.3","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run format && npm run test:all","test:all":"jest","test:dev":"jest --watch","prebuild":"rimraf lib","storybook":"start-storybook -p 9009 -c ./example/.storybook","preversion":"npm run build","release":"npm run release"},"devDependencies":{"@kadira/storybook":"^2.35.3","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react":"^15.5.4","react-dom":"^15.5.4","release":"^1.2.1","rimraf":"^2.6.1"},"dependencies":{"jsx-to-string":"^1.1.0","prismjs":"^1.6.0"},"gitHead":"abb9898c179e82f19f0ae35a4f66255727c29fc3","_id":"storybook-addon-jsx@0.0.3","_shasum":"f7b0bd4a1c611ebf8621f62372588f41ae9d4646","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"ellyo","email":"wcastand@gmail.com"},"dist":{"shasum":"f7b0bd4a1c611ebf8621f62372588f41ae9d4646","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-0.0.3.tgz","integrity":"sha512-xrNdayGuT/FdbbY6oDPAxAmWBrYpE7a1+ZwLRfHHKTAGTucqaFVxThRpe/f/RLXmbfrII4+BoX0dORNrdknm3w==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCojbVY2SNGxPK2jLhltSnGS/IaNfOWoKYMaU15/l+WRgIhAK4tUGKkM/LOntGY1rHfNEuqQrmwPwtfgB+W+c4o3OSP"}]},"maintainers":[{"name":"ellyo","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/storybook-addon-jsx-0.0.3.tgz_1492767874362_0.07538351300172508"},"directories":{}},"1.0.0":{"name":"storybook-addon-jsx","version":"1.0.0","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run format && npm run test:all","test:all":"jest","test:dev":"jest --watch","prebuild":"rimraf lib","storybook":"start-storybook -p 9009 -c ./example/.storybook","preversion":"npm run build","release":"npm run release"},"devDependencies":{"@kadira/storybook":"^2.35.3","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react":"^15.5.4","react-dom":"^15.5.4","release":"^1.2.1","rimraf":"^2.6.1","styled-components":"^1.4.5"},"dependencies":{"jsx-to-string":"^1.1.0","prismjs":"^1.6.0","react-copy-to-clipboard":"^4.3.1"},"gitHead":"a1f63daf441dd997cecbdf2c78fe2b26af6c1466","_id":"storybook-addon-jsx@1.0.0","_shasum":"bb6da7321e51f460ffc81c248235c0dd0ad8af7b","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"ellyo","email":"wcastand@gmail.com"},"dist":{"shasum":"bb6da7321e51f460ffc81c248235c0dd0ad8af7b","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-1.0.0.tgz","integrity":"sha512-slHRNurQJTgL/lwla3GCUoYHw2mRnSQGTdKJyjhRW+vKw4qwZeyinTwnvn90AZQo1cHr+pMvlSrCnPR0AD4WIQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDE8gM3yRhBU7g+GZ+ODpynSx+8EmjG77E4313+4Nl2MAIhAK9Zyg4uHSEiQKipJ2ZfuRYogD6ysW6CQvvBdmbzufY2"}]},"maintainers":[{"name":"ellyo","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/storybook-addon-jsx-1.0.0.tgz_1492798510386_0.2629702587146312"},"directories":{}},"1.0.1":{"name":"storybook-addon-jsx","version":"1.0.1","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run format && npm run test:all","test:all":"jest","test:dev":"jest --watch","prebuild":"rimraf lib","storybook":"start-storybook -p 9009 -c ./example/.storybook","preversion":"npm run build","release":"npm run release"},"devDependencies":{"@kadira/storybook":"^2.35.3","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-plugin-external-helpers":"^6.22.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react":"^15.5.4","react-dom":"^15.5.4","release":"^1.2.1","rimraf":"^2.6.1"},"dependencies":{"jsx-to-string":"^1.1.0","prismjs":"^1.6.0","react-copy-to-clipboard":"^4.3.1","styled-components":"^1.4.5"},"gitHead":"3a060e9d753b665692250bdf335298ef68f03e08","_id":"storybook-addon-jsx@1.0.1","_shasum":"5f8bb31b34c5b3fcbd6f780164dc43661cd1f432","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"ellyo","email":"wcastand@gmail.com"},"dist":{"shasum":"5f8bb31b34c5b3fcbd6f780164dc43661cd1f432","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-1.0.1.tgz","integrity":"sha512-sAfXI3eDUhHV9p60cBQNYt2Yaby7IsGdrUagtnRA5rPqSp0zyEqJ29T3TLBMLr2A4bphx/7fcTCuVVWWDmMXfg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXndXLgKdJQxBl1UjhDSEzLkKzmXFCpRIUWY2N8KwXkwIgKQJYK8siTkpnCipfpw6A7+PlMQppZsyJlHwiBiEUKOM="}]},"maintainers":[{"name":"ellyo","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/storybook-addon-jsx-1.0.1.tgz_1492798706031_0.1522520452272147"},"directories":{}},"1.0.2":{"name":"storybook-addon-jsx","version":"1.0.2","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"prebuild":"rimraf lib && mkdir lib","build":"npm-run-all build:*","build:index":"browserify src/index.js -o lib/index.js","build:register":"browserify src/register.js -o lib/register.js","watch":"npm-run-all --parallel watch:*","watch:index":"watchify src/index.js -o lib/index.js","watch:register":"watchify src/register.js -o lib/register.js","format":"prettier --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run format && npm run test:all","test:all":"jest","test:dev":"jest --watch","storybook":"start-storybook -p 9009 -c ./example/.storybook","preversion":"npm run build"},"browserify":{"transform":["babelify"]},"devDependencies":{"@kadira/storybook":"^2.35.3","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","babelify":"^7.3.0","browserify":"^14.3.0","jest":"^19.0.2","npm-run-all":"^4.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react":"^15.5.4","react-dom":"^15.5.4","rimraf":"^2.6.1","watchify":"^3.9.0"},"dependencies":{"jsx-to-string":"^1.1.0","prismjs":"^1.6.0","react-copy-to-clipboard":"^4.3.1","styled-components":"^1.4.5"},"gitHead":"ff7ce728c8f30f8376f9e0b84709e35cbca341a4","_id":"storybook-addon-jsx@1.0.2","_shasum":"60c8fc3e68b30d2379f438bbf7fb46cb50ac1747","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"ellyo","email":"wcastand@gmail.com"},"dist":{"shasum":"60c8fc3e68b30d2379f438bbf7fb46cb50ac1747","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-1.0.2.tgz","integrity":"sha512-8F5cmOjYu2ffticyRcUlmi15KjEBCOuJ7N1FwVug+pQfhcAJ983MnTSlXQaRhmuBSAqzha5qs9KvpGvG3LtEKw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSiUNWJBFAFQ9XB1N+6rSLnTOUS9dgBtmtYuEmmhbSagIgTMYCR6caqWT7qfLCrYV+im+MNEvdsxOx2YfSE19Eq8o="}]},"maintainers":[{"name":"ellyo","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/storybook-addon-jsx-1.0.2.tgz_1492803656123_0.08479420701041818"},"directories":{}},"1.0.3":{"name":"storybook-addon-jsx","version":"1.0.3","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run format && npm run test:all","test:all":"jest","test:dev":"jest --watch","storybook":"start-storybook -p 9009 -c ./example/.storybook","preversion":"npm run build"},"devDependencies":{"@kadira/storybook":"^2.35.3","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","npm-run-all":"^4.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react":"^15.5.4","react-dom":"^15.5.4","rimraf":"^2.6.1"},"dependencies":{"jsx-to-string":"^1.1.0","prismjs":"^1.6.0","react-copy-to-clipboard":"^4.3.1","styled-components":"^1.4.5"},"gitHead":"382f52e222c3415f0379f8aa6c8d48e1ae1a12e6","_id":"storybook-addon-jsx@1.0.3","_shasum":"097952ec6c17a240a259be50b1c76aac7f2290a4","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"ellyo","email":"wcastand@gmail.com"},"dist":{"shasum":"097952ec6c17a240a259be50b1c76aac7f2290a4","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-1.0.3.tgz","integrity":"sha512-Aj/Hc9KZH5b95mQRPn5jnqFtUxrYT6EtkZbrT+Ju5p0UyU1mNNMcouoZLqLuCIONsMPiXFEatUdA/ltghE7UHA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB6tl0kGUSYLIZ4HiRBoIFvBUXx/mHe2viEBF/2KgNo+AiEA4jlk2avkr4nwJBetMtORCqQ/2ivLi6Wp7CQCA8yV5zM="}]},"maintainers":[{"name":"ellyo","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/storybook-addon-jsx-1.0.3.tgz_1492803950270_0.4149119097273797"},"directories":{}},"2.0.0":{"name":"storybook-addon-jsx","version":"2.0.0","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run format && npm run test:all","test:all":"jest","test:dev":"jest --watch","storybook":"start-storybook -p 9009 -c ./example/.storybook","preversion":"npm run build"},"devDependencies":{"@kadira/storybook":"^2.35.3","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","npm-run-all":"^4.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react":"^15.5.4","react-dom":"^15.5.4","rimraf":"^2.6.1"},"dependencies":{"jsx-to-string":"^1.1.0","prismjs":"^1.6.0","react-copy-to-clipboard":"^4.3.1"},"gitHead":"fe23ff1746adc2c98123ef291edb3de93f392bbd","_id":"storybook-addon-jsx@2.0.0","_shasum":"76dd0f0053cef12750e2e44f0edd51f55d04baf9","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"ellyo","email":"wcastand@gmail.com"},"dist":{"shasum":"76dd0f0053cef12750e2e44f0edd51f55d04baf9","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-2.0.0.tgz","integrity":"sha512-h0tGVlVvJS0MdfShb28MbZBmfalZtTzzWjijJIX8UXxXZBvupFakLMYXLrahyKsOiKe2BCXbKGkpnk2TZLyG2g==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFu7SuoNRJe5EMHZwmmRVBXC3PKSHgeTbxhEGpdWc8RnAiEA84j+znYjsATJX0xnwhIuZDulltseyC4gVXVnl2DhSD4="}]},"maintainers":[{"name":"ellyo","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/storybook-addon-jsx-2.0.0.tgz_1492885724582_0.7925948582123965"},"directories":{}},"2.0.1":{"name":"storybook-addon-jsx","version":"2.0.1","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run format && npm run test:all","test:all":"jest","test:dev":"jest --watch","storybook":"start-storybook -p 9009 -c ./example/.storybook","preversion":"npm run build"},"devDependencies":{"@kadira/storybook":"^2.35.3","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","npm-run-all":"^4.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react":"^15.5.4","react-dom":"^15.5.4","rimraf":"^2.6.1"},"dependencies":{"jsx-to-string":"^1.1.0","prismjs":"^1.6.0","react-copy-to-clipboard":"^4.3.1"},"gitHead":"313b020158f6e3b3474948cec7885c8d19379dfe","_id":"storybook-addon-jsx@2.0.1","_shasum":"b176d3e0bb806cfc90327c6bf0761e498f1660a2","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"ellyo","email":"wcastand@gmail.com"},"dist":{"shasum":"b176d3e0bb806cfc90327c6bf0761e498f1660a2","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-2.0.1.tgz","integrity":"sha512-3/G+cmN3gSk5nXRqKZA0CGPepckU3Jv9LAk6rf65uriXSRCbag9Dkeaq0AKed0kNl6F9O3JcEqwvKD9Js+8LoA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCH2ivUkyjLMBUzmMC5k1Z69upl2P66iz0kEs7SOpeRS8CIFoDwO7xZl3+kaqkZIgyaIKTJQo9ZyKKiTDBA8ycOcy9"}]},"maintainers":[{"name":"ellyo","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/storybook-addon-jsx-2.0.1.tgz_1493132045898_0.17897632042877376"},"directories":{}},"2.0.2":{"name":"storybook-addon-jsx","version":"2.0.2","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run format && npm run test:all","test:all":"jest","test:dev":"jest --watch","storybook":"start-storybook -p 9009 -c ./example/.storybook","preversion":"npm run build"},"devDependencies":{"@kadira/storybook":"^2.35.3","@kadira/storybook-addon-options":"^1.0.2","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","npm-run-all":"^4.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react":"^15.5.4","react-dom":"^15.5.4","rimraf":"^2.6.1"},"dependencies":{"jsx-to-string":"^1.1.0","prismjs":"^1.6.0","react-copy-to-clipboard":"^4.3.1"},"gitHead":"7fb3ff56bd791674001d98aaf84072b809f023a3","_id":"storybook-addon-jsx@2.0.2","_shasum":"c50bf175df38072ad5f0bc2a873aab6a9aad5681","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"wcastand","email":"wcastand@gmail.com"},"dist":{"shasum":"c50bf175df38072ad5f0bc2a873aab6a9aad5681","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-2.0.2.tgz","integrity":"sha512-Q/EsR1P29WMtnwpe3TroY6IprlqRUVHb5dpXQi+gjgfeWmIiSTps0M+rPujyIkP2u5U8fIA7Ijb/0K/1n8gLKg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG9ge5Qnwj9HIbfEDTu1fcQbWEM3a3rTgp91cD46UVm3AiART4B8GbyFi5tUQOpmgNUIj352Dxd4yoU6JLxfwcStDw=="}]},"maintainers":[{"name":"ellyo","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/storybook-addon-jsx-2.0.2.tgz_1493155121912_0.3026239776518196"},"directories":{}},"2.0.3":{"name":"storybook-addon-jsx","version":"2.0.3","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run format && npm run test:all","test:all":"jest","test:dev":"jest --watch","storybook":"start-storybook -p 9009 -c ./example/.storybook","preversion":"npm run build"},"devDependencies":{"@kadira/storybook":"^2.35.3","@kadira/storybook-addon-options":"^1.0.2","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","npm-run-all":"^4.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react":"^15.5.4","react-dom":"^15.5.4","rimraf":"^2.6.1"},"dependencies":{"jsx-to-string":"^1.1.0","react-copy-to-clipboard":"^4.3.1"},"gitHead":"70ef53d99cbae149287ec63443af39e8342681ca","_id":"storybook-addon-jsx@2.0.3","_shasum":"655d2c1b31f95ea9f56d32ed44ea844c3d3b76ef","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"wcastand","email":"wcastand@gmail.com"},"dist":{"shasum":"655d2c1b31f95ea9f56d32ed44ea844c3d3b76ef","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-2.0.3.tgz","integrity":"sha512-HyDDYYeTsoCmIZ2GSiTreg6JGkykVrAJeMJ2fQ3enTHiPSPU1Eo+211rdwpxQLAol8YhA8xfLCnmdMXaMgZZpA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKwG0epVtG1wndQanIiaKUMcNBnuJ000bPGULdh8caUAIhAKoC6Yn3lcEkGFojXHKF2DlNv9oKYGsBB7WY/QTJQA+0"}]},"maintainers":[{"name":"ellyo","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/storybook-addon-jsx-2.0.3.tgz_1493284455343_0.10124483588151634"},"directories":{}},"2.0.4":{"name":"storybook-addon-jsx","version":"2.0.4","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run format && npm run test:all","test:all":"jest","test:dev":"jest --watch","storybook":"start-storybook -p 9009 -c ./example/.storybook","preversion":"npm run build"},"devDependencies":{"@kadira/storybook":"^2.35.3","@kadira/storybook-addon-options":"^1.0.2","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","npm-run-all":"^4.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react":"^15.5.4","react-dom":"^15.5.4","rimraf":"^2.6.1"},"dependencies":{"jsx-to-string":"^1.1.0","react-copy-to-clipboard":"^4.3.1"},"gitHead":"c8f0d24687401ad01cf23938f937d7657faff264","_id":"storybook-addon-jsx@2.0.4","_shasum":"aaf3fc5a5bd9ed1bfd145483de47543906ed6bea","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"wcastand","email":"wcastand@gmail.com"},"dist":{"shasum":"aaf3fc5a5bd9ed1bfd145483de47543906ed6bea","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-2.0.4.tgz","integrity":"sha512-LdgODTvEKUtTa9h1gldAufFXclMuCfm4n0y+s8Jva5l1tHetDNKA2KXPwgSf9577pZF67Ac+hgQ4l8/wOGieZQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAIi8XcOfedeDZ81pbECH3hE78TUEFFkDHZq/tsRA9/TAiEA5pYvvgA9fG314Yk+D69GCJJvnffa3TOIYCZXRs41+54="}]},"maintainers":[{"name":"ellyo","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/storybook-addon-jsx-2.0.4.tgz_1493284577389_0.7379565087612718"},"directories":{}},"2.0.5":{"name":"storybook-addon-jsx","version":"2.0.5","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run format && npm run test:all","test:all":"jest","test:dev":"jest --watch","storybook":"start-storybook -p 9009 -c ./example/.storybook","preversion":"npm run build"},"devDependencies":{"@kadira/storybook":"^2.35.3","@kadira/storybook-addon-options":"^1.0.2","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","npm-run-all":"^4.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react":"^15.5.4","react-dom":"^15.5.4","rimraf":"^2.6.1"},"dependencies":{"jsx-to-string":"^1.1.0","react-copy-to-clipboard":"^4.3.1","react-element-to-jsx-string":"^6.4.0"},"gitHead":"6eb5b52e08b87b33dc5e60355619c410ed432fd6","_id":"storybook-addon-jsx@2.0.5","_shasum":"b2da29f2571207a8e8aee64ce6e2fa507cfb2f77","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"wcastand","email":"wcastand@gmail.com"},"dist":{"shasum":"b2da29f2571207a8e8aee64ce6e2fa507cfb2f77","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-2.0.5.tgz","integrity":"sha512-ag9ZwR0MSwVtECO+nh4hs5wDL33I34qxU21As/VcEqlSbVOyjHL0fT/q4sGbzzQBF/6VGND8KugYHEcL9Oco7A==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBMYW2vUMwfebJkWZ4LaCMj4jsUwPkne063h7Erd4kRCAiAAo/T9SYbPnG7aVJW9A1iX4t3M+z7GHFxDW2IDRV1epw=="}]},"maintainers":[{"name":"ellyo","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/storybook-addon-jsx-2.0.5.tgz_1493300707930_0.7830035586375743"},"directories":{}},"2.0.6":{"name":"storybook-addon-jsx","version":"2.0.6","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run format && npm run test:all","test:all":"jest","test:dev":"jest --watch","storybook":"start-storybook -p 9009 -c ./example/.storybook","preversion":"npm run build"},"devDependencies":{"@kadira/storybook":"^2.35.3","@kadira/storybook-addon-options":"^1.0.2","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","npm-run-all":"^4.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react-dom":"^15.5.4","rimraf":"^2.6.1"},"dependencies":{"immutable":"4.0.0-rc.2","json-stringify-pretty-compact":"1.0.3","react-copy-to-clipboard":"4.3.1","react":"^15.5.4"},"gitHead":"fa95b823abc45be8f5e53ce3557d161807c13538","_id":"storybook-addon-jsx@2.0.6","_shasum":"4fe2938c1cbfcd9ef337486adf84ca522c165d61","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"wcastand","email":"wcastand@gmail.com"},"dist":{"shasum":"4fe2938c1cbfcd9ef337486adf84ca522c165d61","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-2.0.6.tgz","integrity":"sha512-IdJFBMNMs23rlJpE9KY9EL4LdQq4W8Q9u3nN5o1zO/Uhh9svfXPRisbIhORjjej31TLejjNQnMziyAYjgzjbww==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCW6G6HBii7IfIUcqVdVm6MkFG86CyghTZObzuB8cVMdAIhANvOwCEs7Yy4tPmiEJXCx28cyB0g3h7l1k1ejydMX6cb"}]},"maintainers":[{"name":"ellyo","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/storybook-addon-jsx-2.0.6.tgz_1493301329038_0.4705898000393063"},"directories":{}},"2.0.7":{"name":"storybook-addon-jsx","version":"2.0.7","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run format && npm run test:all","test:all":"jest","test:dev":"jest --watch","storybook":"start-storybook -p 9009 -c ./example/.storybook","preversion":"npm run build"},"devDependencies":{"@kadira/storybook":"^2.35.3","@kadira/storybook-addon-options":"^1.0.2","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","npm-run-all":"^4.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react-dom":"^15.5.4","rimraf":"^2.6.1"},"dependencies":{"immutable":"4.0.0-rc.2","json-stringify-pretty-compact":"1.0.3","react-copy-to-clipboard":"4.3.1","react":"^15.5.4"},"gitHead":"6fdec5b9907078b3010552140b4d7cece9c308a6","_id":"storybook-addon-jsx@2.0.7","_shasum":"15697396a1c87527bc8c858e13b9406c73444ecd","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"wcastand","email":"wcastand@gmail.com"},"dist":{"shasum":"15697396a1c87527bc8c858e13b9406c73444ecd","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-2.0.7.tgz","integrity":"sha512-mXG8OJ1jO4JsTYk33xqHhPIL/4FGnNUjBtIoXhT55wpbTf0rsRL5KRiCDtxOleqWEo8dbtEFkor9/4PgCP8VCQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEG6RF3hpMBOvhxb5QKhW+GqxHnZxhXRLocqiLqcNdmWAiA7W5OAs0JaV/GEzFtkjwiigultz41aeyELx1FY6fLAbQ=="}]},"maintainers":[{"name":"ellyo","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/storybook-addon-jsx-2.0.7.tgz_1493301617154_0.4289900930598378"},"directories":{}},"2.0.8":{"name":"storybook-addon-jsx","version":"2.0.8","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run format && npm run test:all","test:all":"jest","test:dev":"jest --watch","storybook":"start-storybook -p 9009 -c ./example/.storybook","preversion":"npm run build"},"devDependencies":{"@kadira/storybook":"^2.35.3","@kadira/storybook-addon-options":"^1.0.2","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","npm-run-all":"^4.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react-dom":"^15.5.4","rimraf":"^2.6.1"},"dependencies":{"immutable":"4.0.0-rc.2","json-stringify-pretty-compact":"1.0.3","react":"^15.5.4","react-copy-to-clipboard":"4.3.1"},"gitHead":"2433819ba4955399191507d614a3a973e547cf81","_id":"storybook-addon-jsx@2.0.8","_shasum":"002fa217dbc7debf84e596c5decef287a0b3ca7b","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"wcastand","email":"wcastand@gmail.com"},"dist":{"shasum":"002fa217dbc7debf84e596c5decef287a0b3ca7b","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-2.0.8.tgz","integrity":"sha512-jW9lee6TwayQclP2lCfmmxuGlWKIJMRz/f4GINwLnTNPxv0+TxUplKWc4eePvissZoIv5vmQ3BKyjPpXNT9UFw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICUePNf451j7wE0gkGPGhLatIpb+CXvkHLgq+Nm9uvprAiARdh7S1zA0D2Fg2+q+USsVxkyNn8w24D/tafrzHCJBPg=="}]},"maintainers":[{"name":"ellyo","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/storybook-addon-jsx-2.0.8.tgz_1493306520192_0.8879000525921583"},"directories":{}},"2.0.9":{"name":"storybook-addon-jsx","version":"2.0.9","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run format && npm run test:all","test:all":"jest","test:dev":"jest --watch","storybook":"start-storybook -p 9009 -c ./example/.storybook","preversion":"npm run build"},"devDependencies":{"@kadira/storybook":"^2.35.3","@kadira/storybook-addon-options":"^1.0.2","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","npm-run-all":"^4.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react-dom":"^15.5.4","rimraf":"^2.6.1"},"dependencies":{"immutable":"4.0.0-rc.2","json-stringify-pretty-compact":"1.0.3","react":"^15.5.4","react-copy-to-clipboard":"4.3.1"},"gitHead":"10b1dbb10dccac0bc8f1e77da2f7eae1fff299d4","_id":"storybook-addon-jsx@2.0.9","_shasum":"b140bb42fef810d0e30308caea1fc4d400f71b57","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"wcastand","email":"wcastand@gmail.com"},"dist":{"shasum":"b140bb42fef810d0e30308caea1fc4d400f71b57","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-2.0.9.tgz","integrity":"sha512-EE4BbEOS8YX6oLphc9OVdP9tGzM31NawjEGEkwkfAUwXfu/h65I/k0zbwsVHxmX8JL+PQIE05xn3600eujLFJA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCX8f7MgCeqpW84N6U8t+1HOxZapKyVSwy0yFsmTbOc7wIgHmktj+IcXmtajT13EJ7WzR0JbvUSTKsK6TnOnhdRSPg="}]},"maintainers":[{"name":"ellyo","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/storybook-addon-jsx-2.0.9.tgz_1493311136634_0.3337920105550438"},"directories":{}},"2.0.10":{"name":"storybook-addon-jsx","version":"2.0.10","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run format && npm run test:all","test:all":"jest","test:dev":"jest --watch","storybook":"start-storybook -p 9009 -c ./example/.storybook","preversion":"npm run build"},"devDependencies":{"@kadira/storybook":"^2.35.3","@kadira/storybook-addon-options":"^1.0.2","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","npm-run-all":"^4.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react-dom":"^15.5.4","rimraf":"^2.6.1","storyshots":"^3.2.2"},"dependencies":{"immutable":"4.0.0-rc.2","json-stringify-pretty-compact":"1.0.3","react":"^15.5.4","react-copy-to-clipboard":"4.3.1"},"gitHead":"b6797b348a00fd94c633227c26f336e9ecc6dd13","_id":"storybook-addon-jsx@2.0.10","_shasum":"6e91dc36f12c428da15f8868edaa35aab712fc37","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.9.0","_npmUser":{"name":"wcastand","email":"wcastand@gmail.com"},"dist":{"shasum":"6e91dc36f12c428da15f8868edaa35aab712fc37","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-2.0.10.tgz","integrity":"sha512-yYX2kgTFllVwjS33ru6l6OwUxNfVfiYmpjoSBh8DW1oG1Ip/3dZnNME91+H2atEo2N1SyuYwG3/0n0pIDcuiVQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyEajl+AIzA8rYm+70b21ivjLltvxAHAz0/4+xiNOLXwIgXLD3cTtqT8420YLJsr2PX4KHc/fQlutjUaq6jX5ixGQ="}]},"maintainers":[{"name":"ellyo","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/storybook-addon-jsx-2.0.10.tgz_1493385294324_0.6207420253194869"},"directories":{}},"2.1.0":{"name":"storybook-addon-jsx","version":"2.1.0","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run format && npm run test:all","test:all":"jest","test:dev":"jest --watch","storybook":"start-storybook -p 9009 -c ./example/.storybook","preversion":"npm run build"},"devDependencies":{"@kadira/storybook":"^2.35.3","@kadira/storybook-addon-options":"^1.0.2","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","npm-run-all":"^4.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react-dom":"^15.5.4","rimraf":"^2.6.1","storyshots":"^3.2.2"},"dependencies":{"immutable":"4.0.0-rc.2","json-stringify-pretty-compact":"1.0.3","react":"^15.5.4","react-copy-to-clipboard":"4.3.1"},"gitHead":"371fb04ae0c0050ae4c5f211174cd9c599dc9154","_id":"storybook-addon-jsx@2.1.0","_shasum":"0611af1632d9364773e9654ba35af8d5cd02edaa","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.0","_npmUser":{"name":"wcastand","email":"wcastand@gmail.com"},"dist":{"shasum":"0611af1632d9364773e9654ba35af8d5cd02edaa","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-2.1.0.tgz","integrity":"sha512-0B9X69NPsAhrnprLzPmRpuBz7/n4CHhnj4+yXhJKdpAXHXCAB1044P6+GkTmmAQCpGgPdhCPcx1wJD+77iFaqg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICN/cqoGabhyUWRHp08aHcER6I1ZcIwuIy8znMDGMxUjAiEAn+K5Wu+m7EvWt6x3uMohEUvJ6GItXDr24/Yxirmp29c="}]},"maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"augustinlf","email":"augustin.public@gmail.com"},{"name":"kilix_user","email":"admin@kilix.fr"},{"name":"wcastand","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/storybook-addon-jsx-2.1.0.tgz_1494334908586_0.6587728795129806"},"directories":{}},"2.1.1":{"name":"storybook-addon-jsx","version":"2.1.1","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run format && npm run test:all","test:all":"jest","test:dev":"jest --watch","storybook":"start-storybook -p 9009 -c ./example/.storybook","preversion":"npm run build"},"devDependencies":{"@kadira/storybook":"^2.35.3","@kadira/storybook-addon-options":"^1.0.2","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","npm-run-all":"^4.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react-dom":"^15.5.4","rimraf":"^2.6.1","storyshots":"^3.2.2"},"dependencies":{"react":"^15.5.4","react-copy-to-clipboard":"4.3.1","react-element-to-jsx-string":"^6.4.0"},"gitHead":"a03dc3857b2bca85174dfa9bebeb5739ccdb0b9f","_id":"storybook-addon-jsx@2.1.1","_shasum":"a64c7d3a4fd1cd0f652c547461ff8db55be9ba7d","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.0","_npmUser":{"name":"wcastand","email":"wcastand@gmail.com"},"dist":{"shasum":"a64c7d3a4fd1cd0f652c547461ff8db55be9ba7d","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-2.1.1.tgz","integrity":"sha512-uCM6Fcw6OHhm4tlEJ9ibJEwRTiR15XA8R9yTcQwjF7VFRBfJJN/UMkjeHlPC64SiG5778R9l6r6Fce/B19BnlA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGYqJWVasWOVxcY9Aa5HX+kRt2lHtlY4nIYnqm1LQ4RQIgcOCzZeTXdIJt44fnbmxk/6zrIF0MEHl1KlYleHhN8fA="}]},"maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"augustinlf","email":"augustin.public@gmail.com"},{"name":"kilix_user","email":"admin@kilix.fr"},{"name":"wcastand","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/storybook-addon-jsx-2.1.1.tgz_1494337927387_0.7412975681945682"},"directories":{}},"2.1.2":{"name":"storybook-addon-jsx","version":"2.1.2","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --no-semi --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run format && npm run test:all","test:all":"jest","test:dev":"jest --watch","storybook":"start-storybook -p 9009 -c ./example/.storybook","preversion":"npm run build"},"devDependencies":{"@kadira/storybook":"^2.35.3","@kadira/storybook-addon-options":"^1.0.2","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","npm-run-all":"^4.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react-dom":"^15.5.4","rimraf":"^2.6.1","storyshots":"^3.2.2"},"dependencies":{"react":"^15.5.4","react-copy-to-clipboard":"4.3.1","react-element-to-jsx-string":"6.3.0"},"gitHead":"2bfa8057527277b315fbd892ab90971fb3315c14","_id":"storybook-addon-jsx@2.1.2","_shasum":"fb56f0faadfefcd7e02c5b4b6fa75626d163ce32","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.0","_npmUser":{"name":"wcastand","email":"wcastand@gmail.com"},"dist":{"shasum":"fb56f0faadfefcd7e02c5b4b6fa75626d163ce32","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-2.1.2.tgz","integrity":"sha512-SNmpJffg4BcIsfffmPHG8SnthHQPZa4dGm80XKhH+cEmru5XWlvy4ZNY0Z9EhjQZL2qgnO8Qbck0k7M03O+lQA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDZOI/j77t0hNFrhHjW173A3kaiBl9YcHHP/XvEBHuZeAiBqPeEEv+iXRTMgoLnlK0LiHpHLf3N46WpAvXdg/tCIjg=="}]},"maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"augustinlf","email":"augustin.public@gmail.com"},{"name":"kilix_user","email":"admin@kilix.fr"},{"name":"wcastand","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/storybook-addon-jsx-2.1.2.tgz_1494406821962_0.030225967522710562"},"directories":{}},"3.0.1":{"name":"storybook-addon-jsx","version":"3.0.1","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --no-semi --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run format && npm run test:all","test:all":"jest","test:dev":"jest --watch","storybook":"start-storybook -p 9009 -c ./example/.storybook","preversion":"npm run build"},"devDependencies":{"@kadira/storybook":"^2.35.3","@kadira/storybook-addon-options":"^1.0.2","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","npm-run-all":"^4.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react-dom":"^15.5.4","rimraf":"^2.6.1","storyshots":"^3.2.2"},"dependencies":{"react":"^15.5.4","react-copy-to-clipboard":"4.3.1","react-element-to-jsx-string":"^6.4.0"},"gitHead":"1bd8c62ab2e8c85a4b6666a45e29c603ffa5c53c","_id":"storybook-addon-jsx@3.0.1","_shasum":"75b22def5151c8e7786f4e59d17ba1437504efa6","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.0","_npmUser":{"name":"wcastand","email":"wcastand@gmail.com"},"dist":{"shasum":"75b22def5151c8e7786f4e59d17ba1437504efa6","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-3.0.1.tgz","integrity":"sha512-4mWUuMEFuHQnzE3wYk3jJV1XYMj0G2rv8Tl0iCD8IRyZGXJ5XboybNGRFPIE/cAkYwb3tDBEOyN11s1ME0u4kg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEYpkpRPhu1c7sH8WSjj0lRK6WqpwRkaxsibGM6crDzPAiAkk925JWI+YZfOmA/DZUOj0FffhqiXDoI9I9wv9MOf1Q=="}]},"maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"augustinlf","email":"augustin.public@gmail.com"},{"name":"kilix_user","email":"admin@kilix.fr"},{"name":"wcastand","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/storybook-addon-jsx-3.0.1.tgz_1494407038516_0.7388741860631853"},"directories":{}},"3.1.0":{"name":"storybook-addon-jsx","version":"3.1.0","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --no-semi --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run format && npm run test:all","test:all":"jest","test:dev":"jest --watch","storybook":"start-storybook -p 9009 -c ./example/.storybook","preversion":"npm run build"},"devDependencies":{"@kadira/storybook":"^2.35.3","@kadira/storybook-addon-options":"^1.0.2","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","npm-run-all":"^4.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react-dom":"^15.5.4","rimraf":"^2.6.1","storyshots":"^3.2.2"},"dependencies":{"react":"^15.5.4","react-copy-to-clipboard":"4.3.1","react-element-to-jsx-string":"^6.4.0"},"gitHead":"cce52801c2044f42d259cce44ae7b2951a469ee5","_id":"storybook-addon-jsx@3.1.0","_shasum":"790cc2165dae34c49c9dd99b3b94c0c4635b4129","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.0","_npmUser":{"name":"wcastand","email":"wcastand@gmail.com"},"dist":{"shasum":"790cc2165dae34c49c9dd99b3b94c0c4635b4129","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-3.1.0.tgz","integrity":"sha512-CI36nrkRuMKXao55psagm/wfzwt1VeYZ4+BuRHrHrUH8Dg4ZLqMHgyvO+t10OIE+SkQIEjmKgQoxrcvyDNh6+A==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGInO9sYwH7BLTWuCklDF50mZGbgIchoaEp9oh/hPZ78AiEAjzve19Bpc8k9wPo4isG+iYpFS0hYqewubnQrfcv8Yew="}]},"maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"augustinlf","email":"augustin.public@gmail.com"},{"name":"kilix_user","email":"admin@kilix.fr"},{"name":"wcastand","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx-3.1.0.tgz_1495627017900_0.48160909465514123"},"directories":{}},"4.0.0":{"name":"storybook-addon-jsx","version":"4.0.0","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --no-semi --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run test:all","test:all":"jest src","test:dev":"jest src --watch","storybook":"start-storybook -p 9009 -c ./example/.storybook","prepublish":"npm run build"},"devDependencies":{"@storybook/addon-options":"^3.0.0-alpha.0","@storybook/addon-storyshots":"^3.0.0-alpha.0","@storybook/react":"^3.0.0-alpha.0","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","npm-run-all":"^4.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react-dom":"^15.5.4","react-test-renderer":"^15.5.4","rimraf":"^2.6.1"},"dependencies":{"react":"^15.5.4","react-copy-to-clipboard":"4.3.1","react-element-to-jsx-string":"^6.4.0"},"gitHead":"66caffbd25131a50cfde37165413f23a3366c998","_id":"storybook-addon-jsx@4.0.0","_shasum":"7540957de206d1609e861eb1537fe3f6ed58f82b","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.0","_npmUser":{"name":"wcastand","email":"wcastand@gmail.com"},"dist":{"shasum":"7540957de206d1609e861eb1537fe3f6ed58f82b","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-4.0.0.tgz","integrity":"sha512-dkOP6V377E+Yu7f+iUmm4EbHWGpdQCBP+orGKJ9HlvVoOQGsxuJFU1nzxpZfOF9tTe8QszBNekfamZWMMTE2Vg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZx+Nv1wdvW1zdnWoaPWW+UAC/1e40k7WeAXSOS1JNUQIgWnaQEEemfogHobpDAWvv/GT1oTYPouMwsDGtyciEGyo="}]},"maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"augustinlf","email":"augustin.public@gmail.com"},{"name":"kilix_user","email":"admin@kilix.fr"},{"name":"wcastand","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx-4.0.0.tgz_1496049542411_0.8789552173111588"},"directories":{}},"4.1.0":{"name":"storybook-addon-jsx","version":"4.1.0","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --no-semi --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run test:all","test:all":"jest src","test:dev":"jest src --watch","storybook":"start-storybook -p 9009 -c ./example/.storybook","prepublish":"npm run build"},"devDependencies":{"@storybook/addon-options":"^3.0.0","@storybook/addon-storyshots":"^3.0.0","@storybook/react":"^3.0.0","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","npm-run-all":"^4.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react-dom":"^15.5.4","react-test-renderer":"^15.5.4","rimraf":"^2.6.1"},"dependencies":{"react":"^15.5.4","react-copy-to-clipboard":"4.3.1","react-element-to-jsx-string":"^6.4.0"},"gitHead":"d1e9d7fef9bc524d559c5c62e987c29bd8550db3","_id":"storybook-addon-jsx@4.1.0","_shasum":"48eef4d11cf28b2b9c96c52e5bd87175500d9af0","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.0","_npmUser":{"name":"wcastand","email":"wcastand@gmail.com"},"dist":{"shasum":"48eef4d11cf28b2b9c96c52e5bd87175500d9af0","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-4.1.0.tgz","integrity":"sha512-Ml6YaWbmO51H9zTlF2rrVEeJbrDjhgEwsGQhp29dHMeRsTRRvI+9yv+/cmb8Erk9PoT1p9fvA1E6ooMhaYwZfQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICLRk4mbCUNkgND8u/Ih2dj4WUrPGmD2QPZUlX5X/ZO3AiEAsII719evJPO3t/Wj3zDz7zW3G7+Rp7gosZf2ELpMPIw="}]},"maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"augustinlf","email":"augustin.public@gmail.com"},{"name":"kilix_user","email":"admin@kilix.fr"},{"name":"wcastand","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx-4.1.0.tgz_1496219215795_0.6664242441765964"},"directories":{}},"4.1.1":{"name":"storybook-addon-jsx","version":"4.1.1","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --no-semi --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run test:all","test:all":"jest src","test:dev":"jest src --watch","storybook":"start-storybook -p 9009 -c ./example/.storybook","prepublish":"npm run build"},"devDependencies":{"@storybook/addon-options":"^3.0.0","@storybook/addon-storyshots":"^3.0.0","@storybook/react":"^3.0.0","babel-cli":"^6.24.1","babel-jest":"^19.0.0","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^19.0.2","npm-run-all":"^4.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react-dom":"^15.5.4","react-test-renderer":"^15.5.4","rimraf":"^2.6.1"},"dependencies":{"react":"^15.5.4","react-copy-to-clipboard":"4.3.1","react-element-to-jsx-string":"10.1.0"},"gitHead":"e18de427ab253138b0e22f052278fd9ad3cca002","_id":"storybook-addon-jsx@4.1.1","_npmVersion":"5.0.1","_nodeVersion":"8.0.0","_npmUser":{"name":"wcastand","email":"wcastand@gmail.com"},"dist":{"integrity":"sha512-3xmz1N8Sdjxv2zlYWyDdxT8C4pj0IWK0UFoTPPV8UAkUjv0W+cf1RCn4cE90nX/1rJJcouQBTShBizyzEuXwcQ==","shasum":"e45b07d4cd6f1c122ad50263c00b65f5114a8f6f","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-4.1.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGVhR2ONAxvctcR4r7Bfc4SrcmiZHVl/9N6DSsofgX78AiB7vdYrJwdg31YlRJiic71UP0fcE0Gaee+JhBRnWJncdA=="}]},"maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"augustinlf","email":"augustin.public@gmail.com"},{"name":"kilix_user","email":"admin@kilix.fr"},{"name":"wcastand","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx-4.1.1.tgz_1497371430795_0.47136399685405195"},"directories":{}},"4.2.0":{"name":"storybook-addon-jsx","version":"4.2.0","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --no-semi --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run test:all","test:all":"jest src","test:dev":"jest src --watch","storybook":"start-storybook -p 9009 -c ./example/.storybook","prepare":"npm run build"},"peerDependencies":{"react":">=15.5.4","react-dom":">=15.5.4"},"devDependencies":{"@storybook/addon-options":"^3.0.0","@storybook/addon-storyshots":"^3.0.0","@storybook/react":"^3.0.0","babel-cli":"^6.24.1","babel-jest":"^21.2.0","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^21.2.1","npm-run-all":"^4.0.2","prettier":"^1.2.2","prop-types":"^15.5.8","react":"^16.0.0","react-dom":"^16.0.0","react-test-renderer":"^16.0.0","rimraf":"^2.6.1"},"dependencies":{"react-copy-to-clipboard":"5.0.1","react-element-to-jsx-string":"12.0.0"},"gitHead":"8c6f463e80b6f59f542bbdf2aa175f5de9c96a39","_id":"storybook-addon-jsx@4.2.0","_npmVersion":"5.3.0","_nodeVersion":"8.5.0","_npmUser":{"name":"wcastand","email":"wcastand@gmail.com"},"dist":{"integrity":"sha512-qhvw84nXMAvP3Vjs7J4r1voms3qpESD+R8Uec0GKRcX0KyUyYHbWWOBRFbTUCPFiXLsrVajtg6tbNMSX+S2GOw==","shasum":"cb614e0fda46c3bdd09a42f685d92bae2951e851","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-4.2.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGCjfJA620CJ1ZvEtBOiA5L8QYyXSblEb1xDdNNS0KsSAiBGHti/hk7y62uYDCEC9Ha8Tlir6PSfFjhjKZ9HE62cfQ=="}]},"maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"augustinlf","email":"augustin.public@gmail.com"},{"name":"kilix_user","email":"admin@kilix.fr"},{"name":"wcastand","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx-4.2.0.tgz_1506932353541_0.9854503851383924"},"directories":{}},"5.0.0":{"name":"storybook-addon-jsx","version":"5.0.0","description":"Display the JSX of the story","main":"lib/index.js","license":"MIT","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --no-semi --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","test":"npm run test:all","test:all":"jest src","test:dev":"jest src --watch","storybook":"start-storybook -p 9009 -c ./example/.storybook","prepare":"npm run build"},"peerDependencies":{"babel-core":">=6.0.0","react":">=15.5.4","react-dom":">=15.5.4"},"devDependencies":{"@storybook/addon-options":"^3.2.12","@storybook/addon-storyshots":"^3.2.12","@storybook/react":"^3.2.12","babel-cli":"^6.24.1","babel-jest":"^21.2.0","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-preset-env":"^1.4.0","babel-preset-react":"^6.24.1","jest":"^21.2.1","npm-run-all":"^4.0.2","prettier":"^1.7.4","prop-types":"^15.5.8","react":"^16.0.0","react-dom":"^16.0.0","react-test-renderer":"^16.0.0","rimraf":"^2.6.1"},"dependencies":{"react-copy-to-clipboard":"5.0.1","react-element-to-jsx-string":"13.0.0"},"gitHead":"054bfca4fc247c22883177c9864e5e41fcdef515","_id":"storybook-addon-jsx@5.0.0","_npmVersion":"5.3.0","_nodeVersion":"8.6.0","_npmUser":{"name":"wcastand","email":"wcastand@gmail.com"},"dist":{"integrity":"sha512-cWmoE5e3TlyRh83KOXEHcredWX07Aeu6OznaUDhNLK55tmGV899i4oaDQWjg1OgqkxATgOnOu5vVMlJ1mtXF2g==","shasum":"412574c20a45eec5d70460cc7d25e23f614f9865","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-5.0.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFcD2sDXOSll8SXuB5wNx3vdyOvKqDUUccrZO6NURrh3AiAtZjTaWmhU8K4xceyZ0tbgehTxQNk/SbKUeWHlo/0WHA=="}]},"maintainers":[{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"augustinlf","email":"augustin.public@gmail.com"},{"name":"kilix_user","email":"admin@kilix.fr"},{"name":"wcastand","email":"wcastand@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx-5.0.0.tgz_1507988095742_0.3118339632637799"},"directories":{}},"5.1.0":{"name":"storybook-addon-jsx","version":"5.1.0","description":"Display the JSX of the story","license":"MIT","main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --no-semi --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","prepare":"npm run build","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"npm run test:all","test:all":"jest src","test:dev":"jest src --watch"},"dependencies":{"react-copy-to-clipboard":"^5.0.1","react-element-to-jsx-string":"^13.1.0"},"devDependencies":{"@storybook/addon-options":"^3.2.17","@storybook/addon-storyshots":"^3.2.17","@storybook/addons":"^3.2.17","@storybook/channels":"^3.2.17","@storybook/react":"^3.2.17","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-jest":"^21.2.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","jest":"^21.2.1","npm-run-all":"^4.1.2","prettier":"^1.9.2","prop-types":"^15.6.0","react":"^16.2.0","react-dom":"^16.2.0","react-test-renderer":"^16.2.0","rimraf":"^2.6.2"},"peerDependencies":{"babel-core":"^6.26.0","react":"^16.2.0","react-dom":"^16.2.0"},"gitHead":"57a6b215911f0a043fc414271e56b6dfee16d4aa","_id":"storybook-addon-jsx@5.1.0","_npmVersion":"5.4.2","_nodeVersion":"8.8.1","_npmUser":{"name":"ndelangen","email":"ndelangen@me.com"},"dist":{"integrity":"sha512-rhhKLNpUBsAdzYTB8wLy1URq1Qawz9QDo8WwTQOfeiw055ey2ejejxI9razcuLdsZFJsFVWzXORBhr/RGpTGzw==","shasum":"37e2396e830a4743a5061245e27119a4938a1297","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-5.1.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA+v73tHYuRdCfJkAk3ICw0Hub3eHnxQ0D6KZEKLYRpFAiAQyraxMoUODaPt5KTzEPh4/BzWoV/3i0T1pi4gfSFMpQ=="}]},"maintainers":[{"email":"michael@lab80.co","name":"shilman"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"wcastand@gmail.com","name":"wcastand"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx-5.1.0.tgz_1513106685708_0.2997074890881777"},"directories":{}},"5.2.0":{"name":"storybook-addon-jsx","version":"5.2.0","description":"Display the JSX of the story","license":"MIT","main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --no-semi --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","prepare":"npm run build","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"npm run test:all","test:all":"jest src","test:dev":"jest src --watch","netlify":"build-storybook -c ./example/.storybook"},"dependencies":{"react-copy-to-clipboard":"^5.0.1","react-element-to-jsx-string":"^13.1.0"},"devDependencies":{"@storybook/addon-options":"^3.3.3","@storybook/addon-storyshots":"^3.3.3","@storybook/addons":"^3.3.3","@storybook/channels":"^3.3.3","@storybook/react":"^3.3.3","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-jest":"^22.0.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","jest":"^22.0.4","npm-run-all":"^4.1.2","prettier":"^1.9.2","prop-types":"^15.6.0","react":"^16.2.0","react-dom":"^16.2.0","react-test-renderer":"^16.2.0","rimraf":"^2.6.2"},"peerDependencies":{"babel-core":"^6.26.0","react":"^16.2.0","react-dom":"^16.2.0"},"gitHead":"1df11671900f7c2f556fba7e8b789e8ee220baf8","_id":"storybook-addon-jsx@5.2.0","_npmVersion":"5.4.2","_nodeVersion":"8.8.1","_npmUser":{"name":"ndelangen","email":"ndelangen@me.com"},"dist":{"integrity":"sha512-HR3e3yK/UljbxJITU3yNT3gi1NtUdt7rYua9/gOL17rULHigJzODeeSKs/x93QGONv3+dl6cjFZ9aTIMPuIBhQ==","shasum":"2d587ae3273d29327ba2335f9c52dee22c942f14","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-5.2.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7MLk8ca2VkRjDP/g0mKb0pyf2gh1zIxRHL0f3UfBxsAIhAIpMVvpmz2DlJC///fUUkGWs1smuwM+7qqmUTpCOTJiM"}]},"maintainers":[{"email":"michael@lab80.co","name":"shilman"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"wcastand@gmail.com","name":"wcastand"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx-5.2.0.tgz_1515019875007_0.5120303330477327"},"directories":{}},"5.3.0":{"name":"storybook-addon-jsx","version":"5.3.0","description":"Display the JSX of the story","license":"MIT","main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --no-semi --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","prepare":"npm run build","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"npm run test:all","test:all":"jest src","test:dev":"jest src --watch","netlify":"build-storybook -c ./example/.storybook"},"dependencies":{"js-beautify":"^1.7.5","react-copy-to-clipboard":"^5.0.1","react-element-to-jsx-string":"^13.1.0"},"devDependencies":{"@storybook/addon-options":"^3.3.3","@storybook/addon-storyshots":"^3.3.3","@storybook/addons":"^3.3.3","@storybook/channels":"^3.3.3","@storybook/react":"^3.3.3","babel-cli":"^6.26.0","babel-core":"^6.26.0","babel-jest":"^22.0.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","babel-preset-react":"^6.24.1","jest":"^22.0.4","npm-run-all":"^4.1.2","prettier":"^1.9.2","prop-types":"^15.6.0","react":"^16.2.0","react-dom":"^16.2.0","react-test-renderer":"^16.2.0","rimraf":"^2.6.2"},"peerDependencies":{"babel-core":"^6.26.0","react":"^16.2.0","react-dom":"^16.2.0"},"gitHead":"a6fc61a13e0c669880d67949697e3f71b1068072","_id":"storybook-addon-jsx@5.3.0","_npmVersion":"5.5.1","_nodeVersion":"8.9.3","_npmUser":{"name":"alfredo-delgado","email":"alfred@adelgado.org"},"dist":{"integrity":"sha512-XlpJn2FRdzxHS/P4dIgW/GWG/FZFB1USLi9OJEgUoWrcU75rGGnHNenCt53VuVkewBeZimLt8+qa0U9LxLwTtQ==","shasum":"acf54c93d403afbf6d68fe934cf41504d674b94c","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-5.3.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIASIjM8M93kVRkDbs9lVb0ll+C7eFSVBdiG/ItYaC6YuAiEAiVmTg75qNHv33XGq1S7k1ZevpKWGG+/ihTzVRw8/S4w="}]},"maintainers":[{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"michael@lab80.co","name":"shilman"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"wcastand@gmail.com","name":"wcastand"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx-5.3.0.tgz_1515102584339_0.9845302260946482"},"directories":{}},"5.4.0":{"name":"storybook-addon-jsx","version":"5.4.0","description":"Display the JSX of the story","license":"MIT","main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --no-semi --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","prepare":"npm run build","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"npm run test:all","test:all":"jest src","test:dev":"jest src --watch","netlify":"build-storybook -c ./example/.storybook"},"dependencies":{"js-beautify":"^1.7.5","react-copy-to-clipboard":"^5.0.1","react-element-to-jsx-string":"^14.0.1"},"devDependencies":{"@storybook/addon-options":"^3.4.8","@storybook/addon-storyshots":"^3.4.8","@storybook/addons":"^3.4.8","@storybook/channels":"^3.4.8","@storybook/react":"^3.4.8","babel-cli":"^6.26.0","babel-core":"^6.26.3","babel-jest":"^23.4.0","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","jest":"^23.4.1","npm-run-all":"^4.1.3","prettier":"^1.13.7","prop-types":"^15.6.2","react":"^16.4.1","react-dom":"^16.4.1","react-test-renderer":"^16.4.1","rimraf":"^2.6.2"},"peerDependencies":{"babel-core":"^6.26.0","react":"^16.2.0","react-dom":"^16.2.0"},"gitHead":"ff17768762f0e0ddcd71cc27e3da06b65bd6874d","_id":"storybook-addon-jsx@5.4.0","_npmVersion":"6.1.0","_nodeVersion":"10.6.0","_npmUser":{"name":"ndelangen","email":"ndelangen@me.com"},"dist":{"integrity":"sha512-yOz66htRawpS9+YPN+bbgENhMV0sCq5fwJcyRPDn+3YbrkLBagBd56pWPNi554x2VtU29J52SlmviEa+Xt3UKg==","shasum":"3e703bdecf54621269f2aa394004265cf1e9bda9","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-5.4.0.tgz","fileCount":16,"unpackedSize":470675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbWf26CRA9TVsSAnZWagAA1w0P/AgrTt1pGziLlJ2m/uPq\n7oMzhszEAqR1AFNHHM3RlX7+gvQXG5U4Ny7V8s55g72AjRVzpZlyVAeLoLzV\n12m1tbK3giahVQGdxA3cFgBmyXgjeb5ZjvrkvzKB2cKcjzsB6/dM1NwAdgpg\na9QhS05/fkZPPG+g28gw2wGs3EbDJSr5UU58DMaqZayauZTi7GDw1U2K5bRm\n1h4pBHUGMC/Ifbk57cWnx+J78uVxOUFB6b4ab0pbOMBi7jMg3kFDl1K9RYLM\ntYdmj8ArXkqrd3UivDC0/5V6YUVktR+X8/+Ok9X1pur8wKNSTC9+92BBJ6E7\nsh7vrG1TbHSCfpXBYjVdNI5g6sRKW+i4w5MuJ0tG+2pNEChX7Kaky+f1pVY+\n3X46nZ+fI2r+/ps1YKL31ZiTvSo0ftHgcpGHnbsc0TrblRwn7iUVjsJmEPCB\nWvnomK70HCJPPzs66+EHUBYsqno/wbCxZhiKAQQmZf7jKg+tDOFwnMA0zMhk\nMDuOos7x7xsuznJJBj6JsXZGsykINdc9U+VExq5dEh3Tb302qhvuMnZxC0gN\nX0ItY5LBPrL4tZAFsiAcN/6jvj0Bomx/PqDZA8MDfu7WRe9Xp4as+CDBLtAJ\njnwfKtEbKTdls34LriN4uZ+TbkXQvgMB725Lqm2nLaC3r0fzNrFfVTGaSoVu\nZgM9\r\n=0wN1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPYoA0OxSznYPkqTaoX06bVZiAyav6THngka3iQoWJ7AIgYxG+nwUqtfvBXyqAr9jzyBCGtrzVoiiSlCkzF5GpPOE="}]},"maintainers":[{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_5.4.0_1532624313962_0.8690310046790355"},"_hasShrinkwrap":false},"6.0.0":{"name":"storybook-addon-jsx","version":"6.0.0","description":"Display the JSX of the story","license":"MIT","main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --no-semi --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"jest":{"testURL":"http://localhost"},"dependencies":{"js-beautify":"^1.8.8","react-copy-to-clipboard":"^5.0.1","react-element-to-jsx-string":"^14.0.2"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/plugin-proposal-object-rest-spread":"^7.0.0","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@storybook/addon-options":"^4.0.8","@storybook/addon-storyshots":"^4.0.9","@storybook/addons":"^4.0.9","@storybook/channels":"^4.0.8","@storybook/react":"^4.0.9","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","babel-loader":"^8.0.4","jest":"test","npm-run-all":"^4.1.5","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.6.3","react-dom":"^16.6.3","react-test-renderer":"^16.6.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2"},"peerDependencies":{"@babel/core":"^7.1.2","react":"^16.2.0","react-dom":"^16.2.0"},"gitHead":"5e13544668fe84ae659139bfc25eecd79cb07998","_id":"storybook-addon-jsx@6.0.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.3","_npmUser":{"name":"ndelangen","email":"ndelangen@me.com"},"dist":{"integrity":"sha512-vPYsC2AhwnWORPgF0Yk7jHEJfouGZs4GiuC1W+cqd+sdb6vJOZ/SJDpfvW+2Obg8837ukWZa7KoIlJ3Z/FVY3g==","shasum":"dc1c422ac387912f70a4e3820b8376b67d7db65b","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-6.0.0.tgz","fileCount":32,"unpackedSize":3172441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb++2lCRA9TVsSAnZWagAAxjIQAJme3NPH3XtD6BtKZJpt\neMdIOV5Vf1byjxsYNb3JqtAnvldt5vqRHV28ixID4hLNBtl6LTXsKHnajKaX\nxz9xVg2BVhE3eA45eNwg+PerWfr3A+jYS7gebsA6zox1LOo4wvN6e1MdJOXi\nImjoOJybq11Q7AkICOSc2iJUR5gbXENVjaorryTtA+Id9SM7oV0IKYJQ1uZL\n4opeInIIl87FHyZ26CFLFfskslA3Sw+EmOAtGxQ4MpLH03DFdvgqVqC1WOoz\noEmrLPfe1OS09KOkR/l6YD/mnEZa8T7qt2HlJYIv13dCX44fljyaRgym09T6\nnQbnGBON/H+k3TegbkvWZ8YrjmroLJ7y0oH/6j1+2zfCJA9OdcsrvgpFWjDG\nh3ZcvwJE7eQfsj8cONnYDHVASJYnVmJm7vut4cx7lKhN/N/Evd0wd0KNEasW\n2rEdwYsddionSOWIcFlhzT6vi80gBxicWh4pEUK407Rew4GfilcbDGuEWQ5m\nmLUxqXTx0LpyaaNTkf7nCVn2KSMwHwboUjnHozGK4iyZidPoZ/32L6HwLhsJ\nuchnSND0W6wutWE66T7gy+hebVzgtYONZu/QSzJn7FSiqE1VwTEinyxqRyyC\nVu6HChx7beyDfD7tvAn9wTkZWZE93O1tMrbfNmSL7Y+1ZdpP0250bV0eZBB7\nvK8x\r\n=scRx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICJP1IueZDxeqqfuNL5LfvO3rZ1R9Xx/0qbOaTk9KiDBAiBLRbfRh753PwM5siG8eChiQ1SyZarozEO7E79v4LifiA=="}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_6.0.0_1543237028907_0.7824815087112393"},"_hasShrinkwrap":false},"6.0.1":{"name":"storybook-addon-jsx","version":"6.0.1","description":"Display the JSX of the story","license":"MIT","main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/addon-jsx.git"},"author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js","format":"prettier --no-semi --single-quote --trailing-comma all --tab-width 2 --bracket-spacing true --print-width 100 --write 'src/**/*.js'","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch","release":"./scripts/release.sh"},"jest":{"testURL":"http://localhost"},"dependencies":{"js-beautify":"^1.8.8","react-copy-to-clipboard":"^5.0.1","react-element-to-jsx-string":"^14.0.2"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/plugin-proposal-object-rest-spread":"^7.0.0","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@storybook/addon-options":"^4.0.8","@storybook/addon-storyshots":"^4.0.9","@storybook/addons":"^4.0.9","@storybook/channels":"^4.0.8","@storybook/react":"^4.0.9","auto":"^4.8.11","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","babel-loader":"^8.0.4","jest":"test","npm-run-all":"^4.1.5","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.6.3","react-dom":"^16.6.3","react-test-renderer":"^16.6.3","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2"},"peerDependencies":{"@babel/core":"^7.1.2","react":"^16.2.0","react-dom":"^16.2.0"},"gitHead":"8fe5661b3f70c5304760e4321541693b4047a143","bugs":{"url":"https://github.com/storybooks/addon-jsx/issues"},"homepage":"https://github.com/storybooks/addon-jsx#readme","_id":"storybook-addon-jsx@6.0.1","_npmVersion":"5.6.0","_nodeVersion":"8.11.0","_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"dist":{"integrity":"sha512-cpVFcV5cu6xuTgVLgk753K0zsHcUvecRspBcIctLiA87sEjv/JGFF6BPdhbEhr7oQKvHNfRwselE2cnlNC9bcw==","shasum":"d7b76bf1c50f36ba84639d8326ed68a7b2c80644","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-6.0.1.tgz","fileCount":21,"unpackedSize":1094647,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcjDH5CRA9TVsSAnZWagAAZrUP/iJtCQiGmaqKq4H5S/ND\ng6RhX56VfJAQEPIpHyPkLf+jOADIqQ0ZNamiVmAgoZaBO3iPE7HNpBXUt3e1\n5BOcVb21L/LxeBIKNH79k4kqtZEnKmvwHgZvtSwu3WM4DmKqtdYtP0aXHY6O\nQrr3TuEpAsKLzufOknZzcAj5FSZmTWhgUT4/lXH2t93Es1eL8JyWXlTw9J9f\nJCo0DwthpdyLmEIT2CfrsEMhxFdMBqv/zulEaJbhbep95zDCvmZNDdyAQvAg\nJ1sb/ZwN2s4jnRYUjf5xmSaqovG0SXUaeNdjYFoyEpgLZ8bg7qNpdtd/asAH\nLHYTS2drV2gYzRSNfWR7cAvjONA7h/k5JAS6noPKpG85fC3c8SwvF4ACW7n/\ncj8DbST96Y0w7VRCUUn/5pBZKeFq1CdDPQ5lb9sWcMOP0ayZ1DuPUTbTD8St\nxIcSZBezz3z1fIvgHFd8kqIjJvpcpfUCwnIhZcRr6qM4jNLksPnOWSJFm1Pm\nkbbzk7U7Ly48yNUGNKmttLnRsNfv7q3mcqKsox4+dqSfzWSVi+uXIYpe5SQW\nrZi6Jx3Ewy1a6zZXcFMWwoaBDU74nO0fvlBqegNP6fAw1Uz19A50JNdd1s+A\nnulWKSpuwiCj5N03amdb6UBBFzuUOWZb6ADmi3c7RX7lVI88aNmXRi7a8/pE\nokMV\r\n=43F0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTrP94q3of4nAdnlVQOGtOj764k0Zb7XCGL7+VH8VeIQIhAKbuB23kV8eK0FRzBSXY3DHfOsssBktZOWm6eS8EoiRD"}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_6.0.1_1552691704806_0.1602158068939219"},"_hasShrinkwrap":false},"7.0.0":{"name":"storybook-addon-jsx","version":"7.0.0","description":"Display the JSX of the story","license":"MIT","main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/addon-jsx.git"},"author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch","release":"./scripts/release.sh"},"jest":{"testURL":"http://localhost"},"dependencies":{"js-beautify":"^1.8.8","prismjs":"^1.15.0","react-copy-to-clipboard":"^5.0.1","react-element-to-jsx-string":"^14.0.2"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/plugin-proposal-object-rest-spread":"^7.0.0","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.1","@storybook/addon-storyshots":"^5.0.1","@storybook/addons":"^5.0.1","@storybook/channels":"^5.0.1","@storybook/core-events":"^5.0.1","@storybook/react":"^5.0.1","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/react-copy-to-clipboard":"^4.2.6","@types/storybook__react":"^4.0.1","auto":"^4.8.11","babel-core":"^7.0.0-bridge.0","babel-jest":"^23.6.0","babel-loader":"^8.0.5","husky":"^1.3.1","jest":"test","lint-staged":"^8.1.5","npm-run-all":"^4.1.5","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.8.4","react-dom":"^16.8.4","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2"},"peerDependencies":{"@babel/core":"^7.1.2","react":"^16.2.0","react-dom":"^16.2.0"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"gitHead":"e413878b3127b39a154fc85304525535f0c2474f","bugs":{"url":"https://github.com/storybooks/addon-jsx/issues"},"homepage":"https://github.com/storybooks/addon-jsx#readme","_id":"storybook-addon-jsx@7.0.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.0","_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"dist":{"integrity":"sha512-2m2zM5EEPM3Atu1sGvqGdmawbxoFPUurgp/TNpTjWN61AN/cUUDtOD+yUmWIBoyYOR0Yn7nVjWK4hvHOSYMXkA==","shasum":"6d0a2bec826c70e204c9e50d0aa0b8536c535eeb","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.0.0.tgz","fileCount":22,"unpackedSize":1181703,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcjE66CRA9TVsSAnZWagAAbRMP/iJjGO/C1hSsbOARZnyM\npjGW1ECIdoyofNxiKP3S8yrxRtF/e1ws+nxSMId2XpisoKbmP/T/mUNWVD91\nw1gqYMutPbkj7GvsqrCmhSK4wWltgV0ypPW9JGkBpakfhEY1Tyry+syBEO0d\nbfV8lg9Ppd3tMLfTG1IpdoXIsiNRIAuaiLOpjwxbM/u2QcxANpIbQJep+4e0\nlOF6nm8Iwi3F6Fe/Up+MK3jZWaBKxFLufFrhzNg+K4KtIuij5u7qmxodPsf3\nfYPKO/O12pUJciyc///NPWqwsVq/tvsNGxrcX4mwAGvfpdQS2U1nfMCsJtdp\nWV5WgCgGau1oom14sz//hlKpn2dvjEp8DFlYWCoFtWaOow8UVJ4w/1MGfBeL\n3DWXPi1KiDgr08BWHqs3EL6TQ+6/uXuBU7dtBhxYTDO+RPqUtSNok3niIjvj\nZhjdZUzStl2ma5UiT/FerHrgWUImbE4irjtbjKlefzRtoR9Uvq783UWHxSXV\nBwQTmzaNsLwlo+gWFZpkRFWJyR1zra36WduXYQArbS3G4hdfqN3VB5FxL8PO\n2cejTycMiGixFOTbc1jXqFvBTbAtwwlaakx36Zc1hYN+r7Iz3awcPaCgQ0sd\n8r+wL3EmNcPeU6+RQixOPbVcJ9aYMWA3vXCvxQGC69gktg67xtqK2s7opBIs\ndUrY\r\n=rlZg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUdUY3LmQJcfwRvM0OxFwYZiy91+c6bZ/qHyKiUDrN9gIhAKvw37tuUhdXzZffnK76x6jkMQQekhQtP0+rlGO6/jbG"}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.0.0_1552699065842_0.4048599009590099"},"_hasShrinkwrap":false},"7.0.1":{"name":"storybook-addon-jsx","version":"7.0.1","description":"Display the JSX of the story","license":"MIT","main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/addon-jsx.git"},"author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch","release":"./scripts/release.sh","build:types":"tsc -p tsconfig.json"},"jest":{"testURL":"http://localhost"},"dependencies":{"js-beautify":"^1.8.8","prismjs":"^1.15.0","react-copy-to-clipboard":"^5.0.1","react-element-to-jsx-string":"^14.0.2"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.1","@storybook/addon-storyshots":"^5.0.1","@storybook/addons":"^5.0.1","@storybook/channels":"^5.0.1","@storybook/core-events":"^5.0.1","@storybook/react":"^5.0.1","@types/js-beautify":"^1.8.0","@types/prismjs":"^1.9.1","@types/react":"^16.8.8","@types/react-copy-to-clipboard":"^4.2.6","@types/storybook__react":"^4.0.1","auto":"^4.8.11","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.5","husky":"^1.3.1","jest":"^24.5.0","lint-staged":"^8.1.5","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.8.4","react-dom":"^16.8.4","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"gitHead":"d31b8357b7b24dc62836af4fb3a8b8f3c5331e37","bugs":{"url":"https://github.com/storybooks/addon-jsx/issues"},"homepage":"https://github.com/storybooks/addon-jsx#readme","_id":"storybook-addon-jsx@7.0.1","_npmVersion":"5.6.0","_nodeVersion":"8.11.0","_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"dist":{"integrity":"sha512-vA9d+yIc6iqNWv6QxHC5TBAf68nEMLihxNIXyTm99ifP0WFHWKvn+8BWTIT/VLDSF/br3W8ljXl1d8TyFIuaug==","shasum":"4bde85ddc00fa51ef5f2a91c185a888fe4834d6a","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.0.1.tgz","fileCount":28,"unpackedSize":1192724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcj+KGCRA9TVsSAnZWagAAW/sP/jALrg6SuW0mJBLJxOKd\nYD6WWkGH13LdJA93dmgCrXMe8hY+LBKabA/3BGFCYks/4lidvab+IJUETHBb\n/HPzmcJ7CREfVrFbOQQxa+0fEnMVwddxi3649e0OfOuN26gQ1vSfZkZbROHt\nwuyYhgd4AfG/GzkzgfJABc1/NfBEFpzTUeRdZSSbWaUzltTWWBczNoUYzQKR\nNdGWmt4P03NXA9tRTJPEPx2+rE3GE++HoDxznhlVzgpHy9ySD7YWJ4Y2bVIU\ntGyJseePmcBNx46WoYpFhJ1QmJ5X9aCBjocU9SRmIX1pwD1azaxak83hfCjL\nexAX1MumFWWL9Gg/xbxSh/jvBsD50MQsWXvnzPHca0E9bw8B7GfIz+uSR2K0\ny09edhr2QhWbPH+CKCdx26sRvoRh4Nq7QMWl9bZkGoped8UskP11+eqTt/rH\nxSbt21QFDdr/kT9mJkkjxzvaTPFm3fPs5Sl85eqhvtY+vdB7euvIgWr7vgKP\nd1qw1u/j0avjpKLFc9yBf9zDIgJ1fOfUSQ9nzBIp/lVcFSCtKTOhieBhegun\nftdegDfEh/RsHo6fQPh54GnvSZDtR+fCffUUB9ZODMm+NzvnM4AoX8kjmhR/\nDCpLn8doyhOmVvPVovwupiq6pUcWpoqBD7M543OYnIsbM8JtQNtTNEpHYY4i\nAAs9\r\n=LJPp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3IQyRclfaWzkkh6+XGqbTI8f4xpddX7X4HrJUPRMirQIhALgLMvYsrZeQYMmxaIlM5ugk6zMdE5gA4RvUguMeDun7"}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.0.1_1552933509799_0.6395941576131274"},"_hasShrinkwrap":false},"7.0.2":{"name":"storybook-addon-jsx","version":"7.0.2","description":"Display the JSX of the story","license":"MIT","main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/addon-jsx.git"},"author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch","release":"./scripts/release.sh","build:types":"tsc -p tsconfig.json"},"jest":{"testURL":"http://localhost"},"dependencies":{"js-beautify":"^1.8.8","prismjs":"^1.15.0","react-copy-to-clipboard":"^5.0.1","react-element-to-jsx-string":"^14.0.2"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.1","@storybook/addon-storyshots":"^5.0.1","@storybook/addons":"^5.0.1","@storybook/channels":"^5.0.1","@storybook/core-events":"^5.0.1","@storybook/react":"^5.0.1","@types/js-beautify":"^1.8.0","@types/prismjs":"^1.9.1","@types/react":"^16.8.8","@types/react-copy-to-clipboard":"^4.2.6","@types/storybook__react":"^4.0.1","auto":"^4.8.11","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.5","husky":"^1.3.1","jest":"^24.5.0","lint-staged":"^8.1.5","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.8.4","react-dom":"^16.8.4","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"gitHead":"64215b618b37fea5253e7c38b224e152b2f65406","bugs":{"url":"https://github.com/storybooks/addon-jsx/issues"},"homepage":"https://github.com/storybooks/addon-jsx#readme","_id":"storybook-addon-jsx@7.0.2","_npmVersion":"5.6.0","_nodeVersion":"8.11.0","_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"dist":{"integrity":"sha512-eDpNY2BQgtwLFL1uCnLVTZBt6Cb0lP817duQBoWT4juLxW4hqo/r8B6Z7k0h/42RrAyn7iRkPZEOE601VjAitw==","shasum":"b331ef9c132979e10ee3afc24d9667a41c4094b1","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.0.2.tgz","fileCount":28,"unpackedSize":1192507,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckn1hCRA9TVsSAnZWagAA+14P/RQ7YaKMLSV1WNADsiaK\nZHkxDnN4U+EcMAhd8Qo/Qy4TSnARt8m4R6sN2hC4R2rjfLXsaYCsHj6CUxeV\n7fo69jF2aE/DBvqM5RuOQoZEzGwdMRHY3KzW2a7v2dqYcphJhlEN+HkZY2ib\nFWoRJC9XakOPozs0QpHheyoHolGpTkEGYYhn91qD/goW/8LoA4LeBRZQZf8i\nZdQqXOp1grqgPJoBnsxXjMlCwRPKX1TVILrOOvaeuH74dLU23eAAJ9eJ4Jx1\nHwjDinlGQ+L9w9JpLRx414o6FSszdrS7nv86tu3V4Zi/wo1/znQe4vEb3Ev8\nYlu6a+0WQkYVQty4HUt74P5OZsXKIlXzdEkAtiLVm/uDmWYw/dKAgAVu/uJ6\nF9/UQUpcp0LOx/mVzf3SU4kH48r7lncAI61Gwk4d/EOlKLsKIu9n4mrgKNH8\nSdd+Z1kmSWLOtWToyUprQBuxvt7tbNbw40COJv3bf1ri8N2E+FzD2dZJGRyt\nujUXZnMkyhk0+WBM7TgUpG1EL4VgKt3BnZpMZhWkLjA57+VgDf0yZPYR0ULR\nhDxh/yj8gd7kgiBe7kIW+yKAWMeoEJQxMR2/7VipYytoryVZM4skdSiEfeYm\n8y9+YcOL6fqYWsogGk0C+XzYfrDutxN9YzzC3L70sMjZxwLZCbBbQ6EcgIWK\nO9GM\r\n=Pd16\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCE0OUmR+Jk8bpYvfQGGEWrK3DTQGarI8gt/tl2HrQxwIhAMmVvAaMdsZ9xX1PgsVETVUAIfYjegrVAwtmsU/UL608"}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.0.2_1553104224878_0.2932882703682813"},"_hasShrinkwrap":false},"7.1.0":{"name":"storybook-addon-jsx","version":"7.1.0","description":"Display the JSX of the story","license":"MIT","main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/addon-jsx.git"},"author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch","release":"./scripts/release.sh","build:types":"tsc -p tsconfig.json"},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","prismjs":"^1.15.0","react-element-to-jsx-string":"^14.0.2"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/prismjs":"^1.9.1","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^4.8.11","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.5","husky":"^1.3.1","jest":"^24.5.0","lint-staged":"^8.1.5","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.8.4","react-dom":"^16.8.4","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"auto":{"plugins":["npm","released"]},"gitHead":"ab41ff19a0f82583ec424b3c0c59d41154591051","bugs":{"url":"https://github.com/storybooks/addon-jsx/issues"},"homepage":"https://github.com/storybooks/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.0","_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"dist":{"integrity":"sha512-misUBJ/vdcf+OjI6pAQOWFu4V3vN9h8lP/HePSZLlokyPnFbF/gREiVqBOW5YcNzux6exelJoIJmoZNWovUNmw==","shasum":"d80dec7a91eff45180068db1be925a3295d42b4a","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.0.tgz","fileCount":32,"unpackedSize":1203396,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJclTFJCRA9TVsSAnZWagAAmi8P/0XFxhZpPdRXfVmMpZbf\nSA3LfVbWnnrgdls/y9BsDFNcIeKp6flbyFe5PtU7HJ/3ZUEoTqSCQvinJ+Sf\nGBqmpXjNfQau8lQN3FBMPct0peMPXguB3HDzCf2h1uykuzGl0/ZP5fIbjrzi\ncD3eAMd5OlHaxNUM4Jli0RctPAWadNBF0RPW3kF1NngxIxC+EP+KFhRHeIl7\ne1WRPF4/iXqiIBCuDc+R6RSaKrsn9aFkAzw6mQGivskje2ZsEDZbbnp30byM\nqlDedIrVhSlW3VdoEUSTZaCA4MShXbJvAA2Bn1ELhXAXbKicbq2ao/XwdRXP\nVGPjEzPBiygXJP7rUWqaAv8eWfeFQAhKuMgfFinnOabdWvJVxlIOUkMGu3/8\nqDhDCdH1aU7rlc275DUIB8DjQ02j+sQhRBDOUJZ36ZU0ONRGIr+UZ2rpAN2A\nlXqIVCV2Tzi78UN0ZHivJZ0gK5a8xBMI28Cj0wfxAc0gvBkVCoHpfHroPqBX\n4RxESb+msEdsZ4TVnE3CW5mCKLvcZAnAtUWR2qtx+wh/FVte3idIkDyR+wP7\nJBX6/mKwiDhJPbJSENvw7qh9YfNsD1p1splCnkNmnbQZLrM+ecRTQeu/CLEA\neBlda/9xtm+Tkif/fsJvPvYJ216iYbuiQE3MmK0hvF005JgNB2axDJ0X1Jbj\nNpsd\r\n=gxhn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE+fC6Q4uPlREEywTM5FzqE9MnMDkywYpMOwjzHn5HkCAiEA87Ypc7z+jddolSfVyAOtmlltf6L5AxKezzmkxePSkcs="}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.0_1553281352909_0.8061710680038885"},"_hasShrinkwrap":false},"7.1.1":{"name":"storybook-addon-jsx","version":"7.1.1","description":"Display the JSX of the story","license":"MIT","main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/addon-jsx.git"},"author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch","release":"./scripts/release.sh","build:types":"tsc -p tsconfig.json"},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","prismjs":"^1.15.0","react-element-to-jsx-string":"^14.0.2"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/prismjs":"^1.9.1","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^4.9.3","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.5","husky":"^1.3.1","jest":"^24.5.0","lint-staged":"^8.1.5","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.8.4","react-dom":"^16.8.4","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"auto":{"plugins":["npm","released"]},"gitHead":"61d0e07d542f41f189d51df893cfed86f47c6f6a","bugs":{"url":"https://github.com/storybooks/addon-jsx/issues"},"homepage":"https://github.com/storybooks/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.1","_npmVersion":"5.6.0","_nodeVersion":"8.11.0","_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"dist":{"integrity":"sha512-/p+gCq/Or6WGREbpFvlzR35b5pOD9tdyhQK53GVyQaoS74upw+LvRTomh2CpEL5lF6V/Mtl0IXCL/uRgl+zWGw==","shasum":"f551d269d77a5f91e558697f5b38ccb3f0389c31","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.1.tgz","fileCount":32,"unpackedSize":1207328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxKt9CRA9TVsSAnZWagAALSAP/2dnCXdjZX7/SBpgDhXx\n5HM7hOdwAYnXdqaG0XP02tGTKPlML2tL8p3pU2Q139XPdtrBELs45N5ysCeO\nuVtasthzKW0O9D5/GZWOccaeFHoennGVXf49+q177QDudmTK147LZbP/UeKi\n52pE+i5Jh2M+SGdfjzwkmp4+8cBIrSJ26hF/11Y+1YfXbikt8VAAXhMqQsA5\ngmgD60JxdEghMc/eQFXwvrFv4uiL/USyEwAHdHp/h8MSsT0p5qEsSQ8zwphk\nUDeoHtEhaNrT6gxWCqE+LLJP2e9osx5FJixLi+82VCDyDY5a2f3tIF6RnuJD\n47achrR2fkCASWkhtybr3TQnE4QX1taQOGI3EdoKcyQes9KyMjGIMR20gsr/\ncWVChKiNPJCkh0XbHB+QdUqnSPKD2MM/gbaIUzGSUqQGmyVLoOl8c0y0FDwE\nB0V2JEbCNpoiUSEtxBb71XftVEO9Pwf5JGnmwBybQZ7DMTBGM/AYzICxrH4Q\nIL1+GL2VOqUcHVIeCzBQzRqa+/Ei9B3GKSwQfU5JLa+0ygrQGP/0MV3voWSM\nq9jH6retvZU07yugWsEQEsGsyR+q7Ars2vLiLV42p3fKVU6dWGyph4xV4k+s\nOsLJkFbep3FlDqb+Y7JeRV6c8+DuVoMkOTi5wY99DLenF5xH+tF6lbHkAYld\nH9om\r\n=PgEW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDlOugom0WRUaU6p4tCYt3Atawh6bTbF0qjq1fp+wylgAiBy82stVC0xbw2KqGvpgbYlBfGzA8Ar29OsH++tETqYqA=="}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.1_1556392828607_0.5322984275871798"},"_hasShrinkwrap":false},"7.1.2":{"name":"storybook-addon-jsx","version":"7.1.2","description":"Display the JSX of the story","license":"MIT","main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/storybooks/addon-jsx.git"},"author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch","release":"./scripts/release.sh","build:types":"tsc -p tsconfig.json"},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","prismjs":"^1.15.0","react-element-to-jsx-string":"^14.0.2"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/prismjs":"^1.9.1","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^4.9.3","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.5","husky":"^1.3.1","jest":"^24.5.0","lint-staged":"^8.1.5","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.8.4","react-dom":"^16.8.4","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"auto":{"plugins":["npm","released"]},"gitHead":"7037b348bdb14a12bfb1da7b032eab19ceead95b","bugs":{"url":"https://github.com/storybooks/addon-jsx/issues"},"homepage":"https://github.com/storybooks/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.2","_npmVersion":"5.6.0","_nodeVersion":"8.11.0","_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"dist":{"integrity":"sha512-a0XARVom72sNMvs7KkBvZXzoLQ0Q2X/T6ibjGA8glyhBl3WNL4nfgLtRTgquVxwhpj51UEouNOUUYWG4Aexs+g==","shasum":"ec569f4d85ea9f10556f3837c837737372845385","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.2.tgz","fileCount":32,"unpackedSize":1208997,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxLjPCRA9TVsSAnZWagAAJdkQAJABJGRdrU2CiXfIm4TU\nVmngvwzYil3Mr7KddPgI73t67pMw0WIYh3q3Nq/+DvhDkzhEqys73C57Rxby\nIr9lcWDdIXdHvWj3PlM78E2bUPPF4zFF9dgh6nB9La+h7gZGq82e8hIK/Yfc\nrKjdbB8YqVruNr5IyQpTq+JLPwRsyaAu1BAgQHUyMhE5KQ2dh8DVmLyfR6e+\n6dk4qNnllcG1fw04dcRfII7WCQFRZbBRITtX3jGSKEtMUqsx0wFdqIuh5sGt\n5QTptFBXBQaNkUuHCGIk7nz6LQ+3T0s0Dg6b/6JOyp3Ey0YN+is0eQtjHO1p\nVnJ98V9wSzbk44Dx4vE9lZew4K38fHZsoVX8BfRcg/LuYmDu1VZGH+yZpNXM\nKTUafMNhLbJgRxDDUJ+SwUTuKocUA4XbWNaduP6rc6Qd4U68IT1tChwTfMfR\n8jhNp22NSWaP6oDoofcF9B4+yDpydpytCSoGya0QYvEipKDTXmXu/FvHBHhr\nrqKeCx+KRTijkAfDT5W5tUDOuefoCe7xU2EqUoQvy2MatJcMjHhFLErKDtVW\nS6BPr0F5wpRpOG4OwS7NlwAYzzde6rZUiwyJ01wpeN2ztamRCwdMLxV5TwSI\noGzmLTwTS8+TqX2uBSpFMEMTnlV4Iy/X1JJb8xrLlU3KSu8+CYIi2LerrjYt\nwygs\r\n=lNND\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/BzpI+A9Xm9zEVPbzyyRfhIw4sOLBz/8Jpp+XpF+UpgIgGDa8nnrMsqOlTfGGKIPrRtv8LTO/+uwATACMm6i8I90="}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.2_1556396238331_0.3395450762423562"},"_hasShrinkwrap":false},"7.1.3":{"name":"storybook-addon-jsx","version":"7.1.3","description":"Display the JSX of the story","license":"MIT","main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch","release":"auto shipit","build:types":"tsc -p tsconfig.json"},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","prismjs":"^1.15.0","react-element-to-jsx-string":"^14.0.2"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/prismjs":"^1.9.1","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^4.9.3","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.5","husky":"^1.3.1","jest":"^24.5.0","lint-staged":"^8.1.5","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.8.4","react-dom":"^16.8.4","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"auto":{"plugins":["npm","released"]},"gitHead":"b527350728b6fab824c96ff2d665f54f27d87ff5","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.3","_nodeVersion":"12.6.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-qKO+E1DF47piJ5jbdjf5dqDIPdMTlnkE1aEidV7SBKyxVqw7oRecZDcmWc8fFdLxP9FQH0dThg1uazEKxa1+8Q==","shasum":"bb9c8a92021d6b4fbb3253fc6e74c6806dbc8425","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.3.tgz","fileCount":29,"unpackedSize":190316,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMgbLCRA9TVsSAnZWagAA+zsP/RXg9KC7AL1Kqaf0dqxq\n8ZI+OQg1bNFzEuP0pIXfR9UGLe8+hydr6+98rA2YJwmea59UvXfUuC5fWC60\nm2IrgUCOLJC99WQ31yRVEGE8UbO21L2bEJWTc8KA6ygRPicos2urSBNkiyfZ\nejFWULgr48cH23cCkAcx6bC6Xivfqq2DHSwTSfy7eIhkFnMNrqp6vRjtGW1N\n6JwUbR2BLA0JyM7/UHJzegUwySqZTKU/drLc21v4OC+NrkUALhU3UWxE1jRD\nZNxNbzPxXHDbTE2I/4Z4Ox8NKYahdDohHi5tc8e3mpAXVVG3wmMgQTRVmVwN\n6jH3Xd7kvIE2KZ4xkxri98UEzRazKOeKy84u/YLpa1rUya19Rq09oR8V7Jzb\nuelVtBBjsJQTnqwa7tzfrYfhTi1efuUk2nIyuYj7DKmpVIS86cEbNAkVjbZW\nj4sgWnl8RedF7EX3i5D8Q4sAbvpGG+Bor3X+d8T5o/tMw8T9lN6x02y7QcCU\nULwA60kf3gTVBtM7pXV5sMj4KmCgNuYW73LITpmPxd+NLl1AqHdVugIOMl+6\nOmkwSvSR1Hn3CwIMOkj/XSU4rIwujWD+U0BWvzghdTJldhe6pKgu9qF9hV+b\nzzn3NZTfno+QCdJMDergwNHVtzy4bSuvTa3FIUJfYeBcp7Jd/9wUyPVbtae3\n38BS\r\n=IpZf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG8x/KNd7c9FLRlhCO6XUgo6uN0J4VB0Z0ldwV2orFvxAiBGiIu88NN9bXfkaN9gBLAIurCTydTW0TybYgUXqys7Dg=="}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.3_1563559626671_0.37624925441948465"},"_hasShrinkwrap":false},"7.1.4-canary.171":{"name":"storybook-addon-jsx","version":"7.1.4-canary.171","description":"Display the JSX of the story","license":"MIT","main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch","release":"auto shipit","build:types":"tsc -p tsconfig.json"},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","prismjs":"^1.15.0","react-element-to-jsx-string":"^14.0.2"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/prismjs":"^1.9.1","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^7.2.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.5","husky":"^1.3.1","jest":"^24.5.0","lint-staged":"^8.1.5","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.8.4","react-dom":"^16.8.4","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"auto":{"plugins":["npm","released"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nIt can be useful to see what props you set, for example.\n\n![Storybook Addon JSX Démo](screenshot.png)\n\n## Getting started\n\n### Installation:\n\n```sh\nyarn add --dev storybook-addon-jsx\n```\n\n### Add to storybook\n\nAppend the following to file called `addons.js` in your storybook config (default: `.storybook`):\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\nIf the file doesn't exist yet, you'll have to create it.\n\n### Usage\n\nBoth have caveats and you should pick the best for your use case.\nThere are two ways to use `addon-jsx`.\n\n1. Decorator - Order matters. Will include JSX for decorators added after the jsx decorator. Use `skip` option to omit these\n2. `addWithJSX` - You must change every `.add` to `.addWithJSX`. Extra decorators will not effect these.\n\n#### Decorator\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .add('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => <div color=\"#333\">test</div>);\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n#### addWithJSX\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { setAddon, storiesOf } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addWithJSX('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .addWithJSX('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module).addWithJSX('Paris', () => (\n  <div color=\"#333\">test</div>\n));\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n## Options\n\nYou can pass options as a third parameter.\nOptions available:\n\n### JSX\n\n- `skip` (default: 0) : Skip element in your component to display\n- Options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string)\n\n```js\n// Option displayName\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => <TestContainer>Hello there</TestContainer>,\n  { jsx: { displayName: 'Test' } } // can be a function { displayName: element => 'Test' }\n);\n// Output\n// <Test>Hello there</Test>\n```\n\n```javascript\n//Option skip\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <Test>Hello</Test>\n    </div>\n  ),\n  { jsx: { skip: 1 } }\n);\n// Output\n// <Test>Hello</Test>\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\n/Option onBeforeRender\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <div dangerouslySetInnerHTML={{ __html: '<div>Inner HTML</div>',}} />\n    </div>\n  ),\n  {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n        return domString\n      },\n    }\n  },\n);\n// Output\n// <div>Inner HTML</div>\n```\n\n### Not JSX\n\nIf a Vue story defines its view with a template string then it will be displayed\n\n- `enableBeautify` (default: true) : Beautify the template string\n- HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n```javascript\n//Option indent_size\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => ({\n    template: `<Test>\nHello\n                          </Test>`\n  }),\n  { jsx: { indent_size: 2 } }\n);\n// Output\n// <Test>\n//   Hello\n// </Test>\n```\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n","readmeFilename":"README.md","gitHead":"52d948099efc11fee8593d10b7b0fb58c1ba4f27","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.4-canary.171","_nodeVersion":"12.6.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-Xczbb42Pj3cl7gnnEXQtqdmCyIBTZmxk5xwV/KZh+JXoCIigPL4x+rydUCjPi60e//PR3T63+WebfJG0zPPSRw==","shasum":"3512fa7e5ca6d17390f50b9b39b5263c18a796e4","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.4-canary.171.tgz","fileCount":29,"unpackedSize":189759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMgfvCRA9TVsSAnZWagAADjIP/jbNgktBOJfY6MmGw3iA\n+1j5zzJj2RrI5bfyTWMWKyMtAAEOrabmZ+j9DaR87nw9lXGXtZ3PNvTQ1stJ\n8e6qact2BGTMDRZls6LnLCo7ZAeIMaj1rSLuiaU/METq+cyePzpxHXMlIUKI\nMYhAa+FTzoiJQljrjrRl4JcGtfJLLYmKWh+PyFL0l0oBzKujZJoRvn5kEHPa\n+uks2349NTnoifI/xI/OW21YSk26ivFozzjjcaOTJoaPrOdIg7w/5M+O3G4u\ny5zqnejmStKVn7YSHQBH76rXl5ZUg/RvRS1KW6xdFxE0joNAeg4FMMtsG4Xb\n1QcGh/te2ecppwLaB6PzTwxz84ckMfQmd5fc/SEMtpRFjR8rFpcHH/uyyPeK\n5vX78i+idAA35ENc0VgYL9ZCDKzXbAWZO7FaA2nK8oZwLBDf06ADGtbvoFWY\n0dHh/fMv2cAY4H7jKmRa4NG7zit4Ex8fMWuk89wbyukpWF8olSTVdNq+JOf7\nmoUis7j9hbxkKwtHKoZDy/RdbZgPSCpiSMp17cHSDHkRe1OMMl2PVrKdACPP\nC8egSsftWKui/+6ikmphM/J+PaFSJ6O4o1n5OhgHD1+kg/Fk1C+qYflT5GGR\nsaj8Z89KxcJxi3Px4FaUm1IjfX3qUa5YQ1PtIYaK6Xmx4IBkqO9bSG++92tq\nmdcJ\r\n=iU79\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSP20Tae+kNFMLQ/q4kyEGAwLS1h+cOlNUkmtr3YddfgIhALcECZ/EzNrk+orE6tDwCcflT21h42+0j/Vsqh5b2iND"}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.4-canary.171_1563559918306_0.4573040400735142"},"_hasShrinkwrap":false},"7.1.4":{"name":"storybook-addon-jsx","version":"7.1.4","description":"Display the JSX of the story","license":"MIT","main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch","release":"auto shipit","build:types":"tsc -p tsconfig.json"},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","prismjs":"^1.15.0","react-element-to-jsx-string":"^14.0.2"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/prismjs":"^1.9.1","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^7.2.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.5","husky":"^1.3.1","jest":"^24.5.0","lint-staged":"^8.1.5","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.8.4","react-dom":"^16.8.4","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"auto":{"plugins":["npm","released"]},"gitHead":"318892f25c9195bc2ae869bf507d460a1b943f01","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.4","_nodeVersion":"12.6.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-+jIV3Ia+G5adYE655Z1l3KcVcXiE9vMFkp/jVx6fjWLkIYKbnNE9K5Y1RH7F3nxMEEiiWp2G2ZjQyc2rHP8wDA==","shasum":"f9114c3469cefac45089e45373a212f6f1c78d0c","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.4.tgz","fileCount":29,"unpackedSize":190235,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMgjdCRA9TVsSAnZWagAAhx8QAIDLT3S2O+x6ABVn5ynP\nFV2XVkHw3/0raGBg/9ujFkAVEtCd937xvP/1F/NpHSh5UO1b0+aGIQST5TjJ\nsucLSru3H65CySD+eMYKnfY0Z7bFEnWp7BgCyDSh68/T0IMlp/QljyBnYKQg\nW8auPRz353tDyAHZiQeaIRmrqRSSVnkYP0aDUorY1q4JhXKwt2NoOWJkC8s4\nStly4n0c1HL00iwntgKQw29fYi+1RWas9/h6AEscZdO2UZhlR/PGLXy+tWxU\nAD+5WRaMLNYyj9MypHQo2BrcszNf3RtvHl8Jz1in6CQxNVgfcY2dFtZvFSTa\nhrhxLPYAdURCSfsxCvcbn0XQQz/aatd1lNnVoIuWLLYWxrTFV3VVeLYNGRIV\nNwPXwovauWlStok9+PbNbEJqDWZzximcQZVpCILsOdZ35O/oRizuWxyiAdq3\nPcaiE6QdiQi6LC7DqNxugKpt5esSCDY4drg5y7dq8GMDJUJs7ogrMxJo/wRM\ni0h0ynQv0Li1yRUrA7FzeQaFBj4mclfrolsi2/42aBIHBqrUN3qas7yNA+bs\n+bZdNpMirfrqsxCsaZ+ttSAqRfmPLFsArazA4kSg4XJj8H2pQjaCiPaOQCLM\nuofqyQMHCXzkwQjhseN8iiL+iwLD6h5xI9NIJX2JtsKslwVanqeqhoBtqmMh\nSiyy\r\n=z0b5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYE0ejelvC7zgaCTGoXYFMwusR1JeggtrpOWVNeivu7wIgTsorVW7GEz0yyXKwerPcF6Q7z9TFmAUJ2rOXuG07aOE="}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.4_1563560155096_0.43936426738191336"},"_hasShrinkwrap":false},"7.1.5":{"name":"storybook-addon-jsx","version":"7.1.5","description":"Display the JSX of the story","license":"MIT","main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch","release":"auto shipit","build:types":"tsc -p tsconfig.json"},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","prismjs":"^1.15.0","react-element-to-jsx-string":"^14.0.3"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/prismjs":"^1.9.1","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^7.2.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.5","husky":"^1.3.1","jest":"^24.5.0","lint-staged":"^8.1.5","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.8.4","react-dom":"^16.8.4","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"auto":{"plugins":["npm","released"]},"gitHead":"e7387250119bc95ae951e465e6851e2ce3ead48e","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.5","_nodeVersion":"12.6.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-OU3JcBYGmFHeZjkvG6nbEOKy8AesURi+s7CcT7Ud68adAP8cJEDNxL6DUXWdJyt5DUKUivxewRmyQT8B9v8qWw==","shasum":"f57b4fdc7da5d07b85b1da6a9425207bffbc2fb1","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.5.tgz","fileCount":29,"unpackedSize":190270,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMgnXCRA9TVsSAnZWagAAmfoQAIc2ahthVrHM+c1Rb6Fo\ns8ILoku+l5lChp54NcwBDAU1ua60Rs6TKaeqiFEKwoVih+Xn+jRVdCVJrwCV\npRiXN+LHgweh9IaeGk3kBpbpyyTHD3o9GtuuriFtnd+rKs6q0WyH0S6+QyXd\nHl8FVKGjwW9Z0F0AU7aXSKuZw4+RwH2kP7+2JvGWfskMQ2IYMgsiXHn7Nciy\nfyAJOYCvGrcja/PaslrPnMHGZb69u5eKM46XOc1GpHTi7H3r2O+ceU1uINCL\nK38y4XvWkD63shA3CLMluX3zTxcB6xqBl2etwVPdpRy/PO+3BqXlOQkS4j9G\nhK8iIyHAVARxMGIaUEK459EdXwmTx8dEvoFDSfXazDZ/apqaUxycep8+BeDT\ng496SiE5VGlkgqbw1MtQQ7TaOkd/kQSPdDK6ynTzdz4XC2KWYQyMeJEAsoB8\nIxHZT6GQWlS2oJ6ZgedJ0sa310gK4MUqpiVpV0TmIO9AL+zUPjN04mm22WuT\nw1mjgL5500AZ1NY0ApGnkW4RCXFyE49vOtQJXzzp5g+VomdGbM04y7G4SOQO\nBB6h4bJBFrxZQvX5qcb380cNmvAaU3xXlprchXF3phvnZ37Pvvdy2cycXVU1\nctNozEKKFtvMDFKWLsa/gJmBSuS1Nz12xFC3RzWknLqnn6lNEf3nym3PY3/c\nCAwa\r\n=NStB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgQZ/DwlivExFotBqj/kphizUFxlDEvSWJACqKBlWQsQIhAPhwYI0a70MGNxOk3NArq/1cLNNVS9Q/P+dA+x2DyeAc"}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.5_1563560406279_0.6806993861358583"},"_hasShrinkwrap":false},"7.1.6-canary.185":{"name":"storybook-addon-jsx","version":"7.1.6-canary.185","description":"Display the JSX of the story","license":"MIT","main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch","release":"auto shipit","build:types":"tsc -p tsconfig.json"},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","prismjs":"^1.15.0","react-element-to-jsx-string":"^14.0.3"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/prismjs":"^1.9.1","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^7.2.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.5","husky":"^1.3.1","jest":"^24.5.0","lint-staged":"^8.1.5","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.8.4","react-dom":"^16.8.4","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"auto":{"plugins":["npm","released"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nIt can be useful to see what props you set, for example.\n\n![Storybook Addon JSX Démo](screenshot.png)\n\n## Getting started\n\n### Installation:\n\n```sh\nyarn add --dev storybook-addon-jsx\n```\n\n### Add to storybook\n\nAppend the following to file called `addons.js` in your storybook config (default: `.storybook`):\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\nIf the file doesn't exist yet, you'll have to create it.\n\n### Usage\n\nBoth have caveats and you should pick the best for your use case.\nThere are two ways to use `addon-jsx`.\n\n1. Decorator - Order matters. Will include JSX for decorators added after the jsx decorator. Use `skip` option to omit these\n2. `addWithJSX` - You must change every `.add` to `.addWithJSX`. Extra decorators will not effect these.\n\n#### Decorator\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .add('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => <div color=\"#333\">test</div>);\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n#### addWithJSX\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { setAddon, storiesOf } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addWithJSX('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .addWithJSX('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module).addWithJSX('Paris', () => (\n  <div color=\"#333\">test</div>\n));\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n## Options\n\nYou can pass options as a third parameter.\nOptions available:\n\n### JSX\n\n- `skip` (default: 0) : Skip element in your component to display\n- Options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string)\n\n```js\n// Option displayName\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => <TestContainer>Hello there</TestContainer>,\n  { jsx: { displayName: 'Test' } } // can be a function { displayName: element => 'Test' }\n);\n// Output\n// <Test>Hello there</Test>\n```\n\n```javascript\n//Option skip\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <Test>Hello</Test>\n    </div>\n  ),\n  { jsx: { skip: 1 } }\n);\n// Output\n// <Test>Hello</Test>\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\n/Option onBeforeRender\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <div dangerouslySetInnerHTML={{ __html: '<div>Inner HTML</div>',}} />\n    </div>\n  ),\n  {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n        return domString\n      },\n    }\n  },\n);\n// Output\n// <div>Inner HTML</div>\n```\n\n### Not JSX\n\nIf a Vue story defines its view with a template string then it will be displayed\n\n- `enableBeautify` (default: true) : Beautify the template string\n- HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n```javascript\n//Option indent_size\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => ({\n    template: `<Test>\nHello\n                          </Test>`\n  }),\n  { jsx: { indent_size: 2 } }\n);\n// Output\n// <Test>\n//   Hello\n// </Test>\n```\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n","readmeFilename":"README.md","gitHead":"3c6500924af1737e79789cdeb168b007f63210ff","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.6-canary.185","_nodeVersion":"12.9.0","_npmVersion":"6.10.2","dist":{"integrity":"sha512-3VUASormxtAa2mRJVjSFGYLOXcd/vSUnBrFiVgyX3P3MQoSvaHMZkTBsKG1DmoHTyFsuaVNaH8qDJ71lcB0tTA==","shasum":"d0840bc5d6b0f48ba59978f70bc2f5eb0315f8c0","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.6-canary.185.tgz","fileCount":29,"unpackedSize":190281,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZziMCRA9TVsSAnZWagAAxK4P/0pOg79emZVXU1+KjPAw\nOd/P3XZpXpPnEF+cf+Gis+m9cX8VaQ63pMqemeY1fHQmZLQ4hf/KwHKuZ/DJ\nOvFmkh6wDqeaAlFS+vCpKR0FQfpRRF5wfbC3CfK4HTEwFNkSkEM/MRpnKjyz\nH3AoWzPz2nCAgVhaR4AYbeCiOThhQzmlGylLFq/vAU097o8lh94klm9jGlEC\nJDvh+6svdJRtaBTzYR5R0BnziEl3vQKM2f9wbFeNju9HzGdMz17SH7TdtQl2\nDFj62goaMuhXTTyQz3Huk6IpfylLXTkkSJWcPN4N7pvqcR34/rSp15WyKiOF\nrcmh4cWf1gbImIvc64lrJnhY17pSqZVpnWd1jLntOfByDtB6HsllRQ1jT+bT\nt5e9rhYhju/0MBqUKWpfRC+NvkoJhpKf6bM5is5bFkH+nw1csZCmtX33aDxX\nt0GjtffdLy2A4DJUk8d6nONXc4ACHVlC6LE4NUwWnN3SsasphoF8H1alTLbL\n6HunomEsA94rernFgtb8ytUxbQwpoIn+KbXSXKHk/koW6ORpf3Zudo9LKVDk\neYRGfjh/7gHlxTqPnq+QDzBFIyjtxXx+KCh1cyrmUeq+ULVHYHPRjJvqizY0\nXKC1+p313t82sN93FFRotqmJfGvnZqMGuR09rGbmqSss6Gy0zaIu66SCWzx6\nVPtS\r\n=fzw+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAJu76La2TRG+kLRBA/4fK/rHfRvpuqne+V3anBB6HG5AiEAsBfHjO9XPwC/GNTa0N9popLwFUZS4HJRWVcZAAADWGc="}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.6-canary.185_1567045771880_0.33691381117204977"},"_hasShrinkwrap":false},"7.1.6":{"name":"storybook-addon-jsx","version":"7.1.6","description":"Display the JSX of the story","license":"MIT","main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch","release":"auto shipit","build:types":"tsc -p tsconfig.json"},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","prismjs":"^1.15.0","react-element-to-jsx-string":"^14.0.3"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/prismjs":"^1.9.1","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^7.2.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.5","husky":"^1.3.1","jest":"^24.5.0","lint-staged":"^8.1.5","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.8.4","react-dom":"^16.8.4","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"auto":{"plugins":["npm","released"]},"gitHead":"a6642ee15be657e7e67e85e51cc6e9125e6fad22","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.6","_nodeVersion":"12.9.1","_npmVersion":"6.10.2","dist":{"integrity":"sha512-1aCF4xFYImjwJDJhI9f7l8PEt1ScCNfkgvofFRB7CwxFf4chepM5HirH4wc2kSWhFcBRoQhx/Y0cNxnlsJAN4A==","shasum":"56177cc0c98d836fcec837c8bb2f7e2c64838f7f","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.6.tgz","fileCount":29,"unpackedSize":190305,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbA0WCRA9TVsSAnZWagAAgxsP/0b3+ONgqSwFVyBOmIoJ\n63NC94hSoD+Tve1xYtfYzomOM7xol/fwBth0NH9rEj28NCzg4JU+SSe8RtqZ\neTJBBNfrOKMUrWUFP1cfM5HK+enItjtlThDfZva/i0Klu4+5UqevYrifDZ3P\nEO1Duo1+Yohvune9RIWPkdOsXsaF+t4FY8Ot6xidT8whchRZmtBLmc2sxc5Q\nGFU6Ih0iuxFGHjK5RTaBnZRy0uNvzgPNptQyZ4hWyahFGV+MlfFCDl7HpKuW\noOF8fROWyDQi8dMRa3/V5EoIj0pdtVU+Q/ifMA0Qfn/Ij8tQ4ClVrhcUjVoa\n0LhWG+cQ5M9r+Qp8K8N1c9fjTK9/+3Eq0DbUYrb08BQWEwa0IGw5tMepURGF\nPPDEI5alHoBXp3gvuSCzacaBwW+ryPL0LnhMYTp61jJ1nxKEehYo4ep3gJxU\nhnyz1apl0QSUMs2AnNJHFsrRPeRCC0PINT8nVKDZpK8TWHC6xbpj/DBLn4NI\ngX8pStpcTsgZfwJSQg3zuGtfexXLubbWT6FKwxfVWjaDnS4cT+JzvRvHkcww\nh/nqCHTvguQUPhBnVnQfXgJ2Vjf9aPnjEuAYmLzSRYNnWDVnvv1hEiDgG8/P\n/OdhQHuBGkt5eiKTnzbdvMp02phK5bbG/AcDn784RB9RTTZJOPBR88wBOhGR\nML+9\r\n=39Kb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfIKrBRwej6Ewe9cu7haqshwueT96E8uXQYLziNRqVbgIgQfDc24N7cs+VQdyRTGAZrOwfNV6X6+y6YjIcD0Ej4kQ="}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.6_1567362325857_0.46026587015459675"},"_hasShrinkwrap":false},"7.1.7-canary.90.195":{"name":"storybook-addon-jsx","version":"7.1.7-canary.90.195","description":"Display the JSX of the story","license":"MIT","main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch","release":"auto shipit","build:types":"tsc -p tsconfig.json"},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","prismjs":"^1.15.0","react-element-to-jsx-string":"^14.0.3"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/prismjs":"^1.9.1","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^7.2.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.5","husky":"^1.3.1","jest":"^24.5.0","lint-staged":"^8.1.5","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.8.4","react-dom":"^16.8.4","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"auto":{"plugins":["npm","released"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nIt can be useful to see what props you set, for example.\n\n![Storybook Addon JSX Démo](screenshot.png)\n\n## Getting started\n\n### Installation:\n\n```sh\nyarn add --dev storybook-addon-jsx\n```\n\n### Add to storybook\n\nAppend the following to file called `addons.js` in your storybook config (default: `.storybook`):\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\nIf the file doesn't exist yet, you'll have to create it.\n\n### Usage\n\nBoth have caveats and you should pick the best for your use case.\nThere are two ways to use `addon-jsx`.\n\n1. Decorator - Order matters. Will include JSX for decorators added after the jsx decorator. Use `skip` option to omit these\n2. `addWithJSX` - You must change every `.add` to `.addWithJSX`. Extra decorators will not effect these.\n\n#### Decorator\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .add('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => <div color=\"#333\">test</div>);\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n#### addWithJSX\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { setAddon, storiesOf } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addWithJSX('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .addWithJSX('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module).addWithJSX('Paris', () => (\n  <div color=\"#333\">test</div>\n));\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n## Options\n\nYou can pass options as a third parameter.\nOptions available:\n\n### JSX\n\n- `skip` (default: 0) : Skip element in your component to display\n- Options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string)\n\n```js\n// Option displayName\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => <TestContainer>Hello there</TestContainer>,\n  { jsx: { displayName: 'Test' } } // can be a function { displayName: element => 'Test' }\n);\n// Output\n// <Test>Hello there</Test>\n```\n\n```javascript\n//Option skip\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <Test>Hello</Test>\n    </div>\n  ),\n  { jsx: { skip: 1 } }\n);\n// Output\n// <Test>Hello</Test>\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\n/Option onBeforeRender\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <div dangerouslySetInnerHTML={{ __html: '<div>Inner HTML</div>',}} />\n    </div>\n  ),\n  {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n        return domString\n      },\n    }\n  },\n);\n// Output\n// <div>Inner HTML</div>\n```\n\n### Not JSX\n\nIf a Vue story defines its view with a template string then it will be displayed\n\n- `enableBeautify` (default: true) : Beautify the template string\n- HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n```javascript\n//Option indent_size\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => ({\n    template: `<Test>\nHello\n                          </Test>`\n  }),\n  { jsx: { indent_size: 2 } }\n);\n// Output\n// <Test>\n//   Hello\n// </Test>\n```\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n","readmeFilename":"README.md","gitHead":"872fce79b5794d1f477968c096c2fd4fcebc3ed5","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.7-canary.90.195","_nodeVersion":"12.12.0","_npmVersion":"6.11.3","dist":{"integrity":"sha512-v78GacIyFYgtuNfq4bie8KmE6hw/LaaRZy1ao/a1D2RN2JLvlObUX686YMh2j3qw1WyBfon/ZSmiiZGeYw0jmg==","shasum":"36b7f56f85be8410213c2fb518d1ac937010c2e0","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.7-canary.90.195.tgz","fileCount":29,"unpackedSize":191439,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdrtsdCRA9TVsSAnZWagAAOUwQAITR3YB1fHGZgBVnpGvq\nJFqUUCvpgk6fSiXlPuJpo4Xc3Ac1IQFxQkR+ddJsnm78AsqXTA8m8Rsl+qWu\ne3nUTH+kTj4lubwEHiV1rZ/PK0K3xpRbgYlHNUTLuzS0Fd84kQqpotPwisgI\nb6MQCjJYFgx5znZkReoNBZN6EaGezGjMp5cgZq+BKBaQWkgiZadPDS1/sD/G\ncNjJ+fwG+RSsxtN3y5tPGm3EVGAJmmLwH2ZCWujkkUbFuV0hQxKNTp08+RM7\ndZbxBpdVbUluUn6Qty/2NRsuALjlpJ57AdVL8YqewBkAI9pn4EijBOO7rajz\nwO6tkKMXDgSnNfRW+SZrGwJDP30RM2wWvl+uxYa288+NGxV+rk1B50hVuPAN\nJJv4zLWL+fFLHDcVP+YqnyU+FQMqy6kGumtdw9KjpiilwH7NC+pEhCcBwCIZ\nPlRq4rSoeqrFIpihg65wTzZwS3BoIsSkftCRtWWPfSOkS7pvVBRV9xBq6XtD\ncyyfNsq93s41mA2lSXqyyv/s8fQl/hS0/92QjSUwxcj3T00yMwo4UoL7TzwO\nFlwmfCiA+1rv6n6yXPoeBrIfcJFr6uSE8lmbYcNocAOFNS7GW9QczFKdz7AU\nw6UtiCcEKFNEsf2HbVPamGpWFd3ksbauFnZVH0JVkg4T2jSFanoOdrWQu8Dy\nPF9V\r\n=OR/8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJI9cq6wSOe1pqOLeeEpnfPzLocRCnQi6hL7IGAeVIoAIgMtbyGznYElEys03L71mMz9u1GYBz13bexfGKgCCmfV0="}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.7-canary.90.195_1571740444976_0.43772837388010655"},"_hasShrinkwrap":false},"7.1.7":{"name":"storybook-addon-jsx","version":"7.1.7","description":"Display the JSX of the story","license":"MIT","main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch","release":"auto shipit","build:types":"tsc -p tsconfig.json"},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","prismjs":"^1.15.0","react-element-to-jsx-string":"^14.0.3"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/prismjs":"^1.9.1","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^7.2.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.5","husky":"^1.3.1","jest":"^24.5.0","lint-staged":"^8.1.5","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.8.4","react-dom":"^16.8.4","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"auto":{"plugins":["npm","released"]},"gitHead":"7a82bbe35d14088d7cd9aa5929177a01290845f4","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.7","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-vdwhXLSjrJc/fCHtVdZWmvrko8Ge+4vbLwqFrgfZQKWGQaSI7XkE25jUYV0T8+J3/S+SDArxmieW9okltrOMxQ==","shasum":"a8189853cc39cd7942748267d9bda2a2bc0ba2c4","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.7.tgz","fileCount":30,"unpackedSize":190787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsFE7CRA9TVsSAnZWagAAZggP/iEgJAGx/xw9RhIGcQpO\n54XpmE0xEwI9wQ85PZRHF+u0l1TVqIplTSM50g8EyKV220RxJAKLZ7vADhF1\nBfLZGRB+OlVYdn9+pdJstxw20TZl093TChwaxHFK0lEoAL/2J27/b7+6c3ZD\n8/UKCpMNsU+gYhF/b9Oi414o7OImZSHUCF9vk1fEQ0JoOj/3uSSq/Yn0w9Np\n7QyAyaZauPKGcYsbC3Ak9nFo5vacCvPzAA7lDj5qWiYetQRzvgq8mM0mcp1N\n/sgLk95B4Un81heGpzFch6XSyK2H6mQtMz3wrK/fWm467B2KONJyWWpttkuw\n8H8GVLGwP/8DObtMAPRNPZp3b1a+pmOw0SW8pi6akrfunmxcxaw4tmdrlaQH\nHMogBI/2nYCr2whYanl+lEa4g3vFZJVbsK7D4P67yV19sARJqFKR/Sc3SnMj\nUf4bh4DrFh8NWUsZTM4ZY3fefIguinDdmoy1SMSpLr4IABiq9/e8R/HxMHqs\nmiMOUZjZIwi2/gKg0C6dL9ZAfdRkQkQZyVrwtM/UOeblz3y+toWBUIB3kcCj\nSM6uPioQghCZ9dKziMx9AozGPExgAbveZzcgHtT0MBdu3CzlppT1HtK5+Es8\nAT4j4LbyvtAHlwBWT6pY0Sy0P1HN0UsudieZ3Ih2uCyBl1jgvphNUwI8m5oR\nMGAM\r\n=/va/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA0bX1Po71ZaiMjN2Tj/Aw0wsXDkOvCUXfCaywGAx0CCAiEAm0/zqHkfZ5ojuMys6EzPkFqXtL4kqCHAsmqlg0caHyw="}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.7_1571836219020_0.13812150522605005"},"_hasShrinkwrap":false},"7.1.8":{"name":"storybook-addon-jsx","version":"7.1.8","description":"Display the JSX of the story","license":"MIT","main":"lib/index.js","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","storybook":"start-storybook -p 9009 -c ./example/.storybook","build-storybook":"build-storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch","release":"auto shipit","build:types":"tsc -p tsconfig.json"},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","prismjs":"^1.15.0","react-element-to-jsx-string":"^14.0.3","storybook-chromatic":"^3.0.3"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/prismjs":"^1.9.1","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^7.2.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.5","husky":"^1.3.1","jest":"^24.5.0","lint-staged":"^8.1.5","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.8.4","react-dom":"^16.8.4","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"prettier":{"singleQuote":true},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"auto":{"plugins":["npm","released"]},"gitHead":"d64e9b1c8759664dbebf80d10800b43d1fc1123a","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.8","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-vPSi+Nwfv7KPWm8iW0uhZyjdNof0VkD/C2Jr+TTxblIiPIUJk3ygHNxQycPYKFwIcXTeC2gxg3UJvQjoulcDdw==","shasum":"a4a97663fe7911272b626eabf8eb1c6b0f04290a","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.8.tgz","fileCount":30,"unpackedSize":190970,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsFGaCRA9TVsSAnZWagAAClIQAIid/j5YVCbed3S12SpR\n80zFsU2IunmCp3vkhd6I+8SEwRjptgX3qPCTC+uQ2oXlUcuw/DgdL/iCmau9\nzyyxOLZIpZaT5dI9EeDBzDzt6arjJSmJgvakdj/gwwRMhrNebHOmq7Y3SHC0\ncWv7FMh0JhbIGqMlXRZ3QuE9PIoIZsGaL30TKCbfGnchO+K+0NdeSjtuv0GM\nU9NInQWvaA5o9Y6ns3zgVE2xSl6yxsi+dEB2/Ol7dhZz8xtpeA/3Zwi9JjUB\nfiS40yj98nA6FfndFRo7ReHuvwqIN25GicY1Dl3X6mHr1+r4BnD8cuiA5GyJ\nUiCMNC/WHI++0pZ0TpWt8w0SXVLuIjpU3hojCtxgg8F7A/JNrnG6g7P7IiLN\n4EtbRNoXPPkCFKeyn2IYKiKHLCPz1NiGOrfh2l9vdznHswvpdMYuKBBHlpMo\n2QcsiramFuzrvdA87Ku5IhgpPFDV9pTzHAWUZN7b71ZwTFhcLTz54/pTrn5i\n5YszzRBBWUl2a7HvoA9m2Tz4Xsr4fcs7k2eRbDNreKGueoTrITQud2xMnn/n\n0jgouvXfjODc2s32B8m1Xc0o7cyF4jPqQAgO1rAoizWSEzj2hk96uk43OLjl\ng00b800kRbFChwWmi6fSCeD8PRfYOcPRqbG52eVDYC4D5G+CeVkiNU8mPx+D\nerxk\r\n=hW6I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFgvuXiUwTcWHMuTWW6+LjCGQPwsN0CTgBZeTbdj2N+wIgLrGPZZeh99ljHWkSCyk8hTaAF2oOm6dm9Dj2rTYQpoQ="}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.8_1571836313696_0.30541347562800136"},"_hasShrinkwrap":false},"7.1.9":{"name":"storybook-addon-jsx","version":"7.1.9","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","prismjs":"^1.15.0","react-element-to-jsx-string":"^14.0.3","storybook-chromatic":"^3.0.3"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/prismjs":"^1.9.1","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^7.2.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.5","husky":"^1.3.1","jest":"^24.5.0","lint-staged":"^8.1.5","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.8.4","react-dom":"^16.8.4","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"gitHead":"51826c51e3052ee97bd68fb507c22aeca1dd40b7","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.9","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-yC1aXkjiRuySSE/Rnaa64iahBW4Z/YApRsu5G8BMi9YBh/FnSGVjapwRv97T0VpWULfLtUxfWfdGQ/0qAGhKtw==","shasum":"28b8b41256adf4ca3e85428dcfb5935760a7420e","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.9.tgz","fileCount":30,"unpackedSize":191237,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsFN/CRA9TVsSAnZWagAAanAP/05d/32Vh+Bm7Qpnz/Af\na/4D+pYg1y5JokrI7ORHPNggCVRqaQQoi0onwsKkYGU7pBCDZa9V37piLgde\nybb7r5FD6J1Zav/6uFJz6PLGpfmSI8uRvMkiEZ+NqZttvaZ+kkU+RJtwY09D\nvOnNu0YmYRO3E+YFDy8u1jrwwHZaLiiQdq+igNjF1xPT1XVsRJLRD/48BUjg\npJz8KFo8Z+fVeJesUS7aduGqPVkry22Seme3f/JugNtD99owCsSwlcEPyZpA\ntNbhfpNp+0xGhV+c/eS8jkAOd1OVXebgRfv7XkcrwWaIS3bnU7I0jFDLKn4Q\nIgLoLedEz+JOkCNzGQp3kCorkofl3SMmYTe4Ezs/IO0kG57yV5U7LbnODLHM\nGD4ia+VCg9QlVlWkMRHv17/IgecKCCOLCoK2GwjThbAki+icj7vx4jSnGYod\nNhFhipbHMVtOxdxaT+3Qgsw6v09WDSPA/KoMpKoeA2S7vaIgVPJKTro9i6bT\nbn6py2IlI2Zxl/ETklgerg09nJWl02PsUCnUUbTgAtMDc9qT0RJ3ULlqYP/y\nV+rCoTWvwW145Bxs90jJbQxNUdlWwecxTWK2y9oa9WsQtb94Nri6yPdMmiJy\nLjTmWgA6bDz00eRxg5UJ/pFhEkLUQq0jLAcSzyT83pyFnH85h44m0EJnjhk0\n+WKg\r\n=A5ki\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEwNxeWuvUA2+YmKAqZw/Wqt6XwtClm5A04ubjkhy/ngAiEAuaCHIqWBAxwzd+XGnP6ttQInrZD1YxJNqRRLGD1HRnI="}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.9_1571836798923_0.7193017511432505"},"_hasShrinkwrap":false},"7.1.10-canary.90.213":{"name":"storybook-addon-jsx","version":"7.1.10-canary.90.213","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","prismjs":"^1.15.0","react-element-to-jsx-string":"^14.0.3","storybook-chromatic":"^3.0.3"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/prismjs":"^1.9.1","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^7.2.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.5","husky":"^1.3.1","jest":"^24.5.0","lint-staged":"^8.1.5","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.8.4","react-dom":"^16.8.4","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nIt can be useful to see what props you set, for example.\n\n![Storybook Addon JSX Démo](screenshot.png)\n\n## Getting started\n\n### Installation:\n\n```sh\nyarn add --dev storybook-addon-jsx\n```\n\n### Add to storybook\n\nAppend the following to file called `addons.js` in your storybook config (default: `.storybook`):\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\nIf the file doesn't exist yet, you'll have to create it.\n\n### Usage\n\nBoth have caveats and you should pick the best for your use case.\nThere are two ways to use `addon-jsx`.\n\n1. Decorator - Order matters. Will include JSX for decorators added after the jsx decorator. Use `skip` option to omit these\n2. `addWithJSX` - You must change every `.add` to `.addWithJSX`. Extra decorators will not effect these.\n\n#### Decorator\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .add('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => <div color=\"#333\">test</div>);\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n#### addWithJSX\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { setAddon, storiesOf } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addWithJSX('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .addWithJSX('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module).addWithJSX('Paris', () => (\n  <div color=\"#333\">test</div>\n));\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n## Options\n\nYou can pass options as a third parameter.\nOptions available:\n\n### JSX\n\n- `skip` (default: 0) : Skip element in your component to display\n- Options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string)\n\n```js\n// Option displayName\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => <TestContainer>Hello there</TestContainer>,\n  { jsx: { displayName: 'Test' } } // can be a function { displayName: element => 'Test' }\n);\n// Output\n// <Test>Hello there</Test>\n```\n\n```javascript\n//Option skip\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <Test>Hello</Test>\n    </div>\n  ),\n  { jsx: { skip: 1 } }\n);\n// Output\n// <Test>Hello</Test>\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\n/Option onBeforeRender\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <div dangerouslySetInnerHTML={{ __html: '<div>Inner HTML</div>',}} />\n    </div>\n  ),\n  {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n        return domString\n      },\n    }\n  },\n);\n// Output\n// <div>Inner HTML</div>\n```\n\n### Not JSX\n\nIf a Vue story defines its view with a template string then it will be displayed\n\n- `enableBeautify` (default: true) : Beautify the template string\n- HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n```javascript\n//Option indent_size\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => ({\n    template: `<Test>\nHello\n                          </Test>`\n  }),\n  { jsx: { indent_size: 2 } }\n);\n// Output\n// <Test>\n//   Hello\n// </Test>\n```\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n","readmeFilename":"README.md","gitHead":"bd056ba634814758a8db3a1ac62fc26c0625b72a","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.10-canary.90.213","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-lX84NW0IK8jxz4ofq0fUyPy0ZpyEFIQKZnB2YaajgIqZqbOu5F/9QEWPL+SOV1URbQoD4LgAduFBfYUYTCRZbA==","shasum":"42ad58f3e172a1f42cb1920d9231a438fd37c15e","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.10-canary.90.213.tgz","fileCount":30,"unpackedSize":192099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsFQKCRA9TVsSAnZWagAANx0P+gJuCNrmoxVgFEonEfxV\n50whK1hjI34/i1qDdOdfK2nMacWP0bVVzco2X0dbOalv0+gETRS+OnWnXrCP\njWkiGbZ1t53+/+l2cSW5Hvin7zr/OozGJpeYwsFiTjui/wNNZKHiBoMTKCXC\naHoEBaIY+zAAc57RTDfhii545CIArZIGm0oYTPOHtx8Y6OVPEIWFvL6/x+ac\n77f0IWB9AunccBHIYAg2VBFCyS/bNDqTlRcNpeLVykg/qgW3L5Nu7hVk7LMA\nWOR0/6ISpcanFmbO1QdRARlOOm+zT/gPftcQNrXmpw/PBcH3OzugVFzonY52\nrQjJOJplqX/zU6vtBM/qe415fP85z2EhwASuzGMu40ekivV7bP02Ya6cBMqI\ntQzdyiefT/Hp6zSPv+ku44jdupvJmRp0obQSh0I6J3nNyGkXmeowB4U9PFPX\noPjdDmT6+3ZV3cwumvJmfrngPtFi9L9g185WmjMyxnWKXvz9Ip4mlEBZEK+l\n4i1xdbDVMbvfgjdZ05LWMyMivK1XkaJut4RgcPy37Qnsqs1CAR/JVz6PUbnz\niTfoxjpgvWyVWi4ixD+yK8ikV9695EialdXagSphYrr5nF1zbWmy6MwtZMWN\n7Q1nRXhVV1Kb40jh58isQGyrXDM22oQcjOCNXIKQ+FE0ahVn6amjf+Og1igY\nQjmM\r\n=GHr4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBh+gtlQ3uGfzmoh0aGWuwzN8XogwWrX145dv4hBnMRxAiEAk7j/Ct/wlqM0grooMdd23+JTVQZW4p60WONuQtFz2I8="}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.10-canary.90.213_1571836937758_0.728947630895753"},"_hasShrinkwrap":false},"7.1.10-canary.90.217":{"name":"storybook-addon-jsx","version":"7.1.10-canary.90.217","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","prismjs":"^1.15.0","react-element-to-jsx-string":"^14.0.3","storybook-chromatic":"^3.0.3"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/prismjs":"^1.9.1","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^7.2.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.5","husky":"^1.3.1","jest":"^24.5.0","lint-staged":"^8.1.5","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.8.4","react-dom":"^16.8.4","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nIt can be useful to see what props you set, for example.\n\n![Storybook Addon JSX Démo](screenshot.png)\n\n## Getting started\n\n### Installation:\n\n```sh\nyarn add --dev storybook-addon-jsx\n```\n\n### Add to storybook\n\nAppend the following to file called `addons.js` in your storybook config (default: `.storybook`):\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\nIf the file doesn't exist yet, you'll have to create it.\n\n### Usage\n\nBoth have caveats and you should pick the best for your use case.\nThere are two ways to use `addon-jsx`.\n\n1. Decorator - Order matters. Will include JSX for decorators added after the jsx decorator. Use `skip` option to omit these\n2. `addWithJSX` - You must change every `.add` to `.addWithJSX`. Extra decorators will not effect these.\n\n#### Decorator\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .add('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => <div color=\"#333\">test</div>);\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n#### addWithJSX\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { setAddon, storiesOf } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addWithJSX('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .addWithJSX('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module).addWithJSX('Paris', () => (\n  <div color=\"#333\">test</div>\n));\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n## Options\n\nYou can pass options as a third parameter.\nOptions available:\n\n### JSX\n\n- `skip` (default: 0) : Skip element in your component to display\n- Options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string)\n\n```js\n// Option displayName\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => <TestContainer>Hello there</TestContainer>,\n  { jsx: { displayName: 'Test' } } // can be a function { displayName: element => 'Test' }\n);\n// Output\n// <Test>Hello there</Test>\n```\n\n```javascript\n//Option skip\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <Test>Hello</Test>\n    </div>\n  ),\n  { jsx: { skip: 1 } }\n);\n// Output\n// <Test>Hello</Test>\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\n/Option onBeforeRender\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <div dangerouslySetInnerHTML={{ __html: '<div>Inner HTML</div>',}} />\n    </div>\n  ),\n  {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n        return domString\n      },\n    }\n  },\n);\n// Output\n// <div>Inner HTML</div>\n```\n\n### Not JSX\n\nIf a Vue story defines its view with a template string then it will be displayed\n\n- `enableBeautify` (default: true) : Beautify the template string\n- HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n```javascript\n//Option indent_size\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => ({\n    template: `<Test>\nHello\n                          </Test>`\n  }),\n  { jsx: { indent_size: 2 } }\n);\n// Output\n// <Test>\n//   Hello\n// </Test>\n```\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n","readmeFilename":"README.md","gitHead":"466d2190dd10791e5e57585aee080212b27ab43f","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.10-canary.90.217","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-N8Du3IyPDdQTsPQAnL9VvCJTQjRTTgAWChB3QkXWm968+LTElhbA7LGh5F2b71HB05aOfO8/ytE5o8Dmi6dTaw==","shasum":"dc77a838010bbc99f16ea8970ec04f870d3d5ed2","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.10-canary.90.217.tgz","fileCount":30,"unpackedSize":192342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsFSfCRA9TVsSAnZWagAAFrYP/RewQmSA4b1dOM6jumTG\n0wWwWJKE68qVNeWpUJ3WB7cjtOW6HMwLwfA7jUUhAfPCAL2xIQlyOpVuVVce\nPNG59VqSCkn94VKPpBf2/67ov0sjAlp+h9B4GWKCIAaFCVDAlTmogcRJyPRj\n6qbu7y3SN7RoS4WbgVll2pcuD9ZntPL8u230Iiba7n5LjL6PrIQzYzofY0mE\ngJLfWZC0YLdl3GknjH8cDEoSWWhEdRVjtPcOmCrDlFhXYmSWyHXO+jtHJcTu\nZGASzsTrqHSNeOJ4TeJumqFiQekv2TJD12QCv9LQadVK9/1hhI6rKuVO2ysr\nCxEt10kySsTjdBeM/n57E/UWjHejilHcuKR9a2joNtp3AT/lPrWmiqvjsRJ8\nz9sASKTDGe7Uzwwp0jiYYdGYYmttdWfUMH8gFjhRtdD/ESJNJIk/7hBmvf6N\ndnRaJcs0qeJu6Qtm1bTuU79SbrXJD28M6zn87YfvvyQEtlD7Uee4CsesGj4Z\nAbvg0cvB7LZv72YBNhej39iRISFjmUwfTvd4t+E5ooyIDogfJpMflT68NEG7\nWisPRRs966gzuW0WFP5EXwjV6BfZTf0E/Gd5t+dtSIPGp40FNl2Gg866pSj1\nQRfOMWJsso1nAX/O5eB022REHhZbYEPqKSwP2GHdkb3i5zE7QlxJLGjpnMpZ\nrUqy\r\n=qfaK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjd0VOFDWzIlgjGf+pZNxtzYcveX+29WdBeJpuqmDdeQIgLEVXgC6ZhOw0GfnyxRSjVX3aIREMW7GP+UhLwuoCZ38="}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.10-canary.90.217_1571837087185_0.7723691215587793"},"_hasShrinkwrap":false},"7.1.10":{"name":"storybook-addon-jsx","version":"7.1.10","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","prismjs":"^1.15.0","react-element-to-jsx-string":"^14.0.3","storybook-chromatic":"^3.0.3"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/prismjs":"^1.9.1","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^7.2.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.5","husky":"^1.3.1","jest":"^24.5.0","lint-staged":"^8.1.5","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.8.4","react-dom":"^16.8.4","react-test-renderer":"^16.8.4","regenerator-runtime":"^0.13.1","rimraf":"^2.6.2","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"gitHead":"092689e489cb2e4434cbde7612b352175c6039f0","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.10","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-HAiYXEsgsa6hkOwnSild+Sbt2U+I1ZfTYQiuYU9xsx6oer61zfgDrBksIPpiyRwUkE96R8Ipvu5nNVEm78TH3w==","shasum":"088c13015499324083375feb823c0d39a21febc5","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.10.tgz","fileCount":30,"unpackedSize":192679,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsFWsCRA9TVsSAnZWagAAX+MP/j2/idgDgaLofnD+bCZz\n7PY0W64rb72IDN29FWaUdA1ImnV/g3bwmtHlnhdJ4M/2hX1fq/dEv8rYC3ex\nGYximEO03U0O3FuMrop9spyzYFeO/UXFmzK1WnwLEHzJRsed9n5gbLQl76uh\nco371MQnRX+r9K6E7rtFITSMuTAINWZcAimAY6/RjtUSVw8N/1HA++1CJoF8\nPg36QKo1JiNrOzgLJP5Z0nMiLoEbKHBfwQQ9bbw/qE8HkIXNGUYWbEIXM2tk\nlvoHVOaVimxeAvEZ3UyWlezEH7ShFeMNWyxgp30jrAovoPjMVc2UWO0cENyz\niLQUDweWMr9jXF8eicAjuRiKV+BRy7OI3MtaPYlt25fB3dDOuGgJ18veXIYh\ngf0G8rv5r5EjiwtrIkmc30sQNBD5/NA5NRX/KtrN3Z8Cw+ZCKjVvcl37dTFV\n83y/Rsk6zX3BnHbrcGQAhGU8Wc0a3NP+nn3a+90AWgX6phsw7d2/+LddeG0v\nXO1wj2mm3/yTjqwwIb7+goTrYgtTAEVqC1Xb7FccFmQDbte/nTWIIEF0bi43\niAvu4h1so7/ZvE21k8hKFwLm9HC6L2t9UPZ/p462JGOKZaVazw9+Z+e1OCr1\nSfQ/Nrnc+A8yN9Dnw61VwX/8ONsQJdvZyEiJmRZB30dnD3C53AIudATWqoJ3\n2xag\r\n=TERk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChvb6S/VTGPfVI7Wp1Yyczay08UnV4Yjo+XC+DW11jUgIgVCJ691hTLrg1lHNCCIx8rJXk/lcJXkmysl+57VAygl4="}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.10_1571837356292_0.6555675970315824"},"_hasShrinkwrap":false},"7.1.11-canary.91.226":{"name":"storybook-addon-jsx","version":"7.1.11-canary.91.226","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","prismjs":"^1.15.0","react-element-to-jsx-string":"^14.0.3","storybook-chromatic":"^3.0.3"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/prismjs":"^1.9.1","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^7.2.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nIt can be useful to see what props you set, for example.\n\n![Storybook Addon JSX Démo](screenshot.png)\n\n## Getting started\n\n### Installation:\n\n```sh\nyarn add --dev storybook-addon-jsx\n```\n\n### Add to storybook\n\nAppend the following to file called `addons.js` in your storybook config (default: `.storybook`):\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\nIf the file doesn't exist yet, you'll have to create it.\n\n### Usage\n\nBoth have caveats and you should pick the best for your use case.\nThere are two ways to use `addon-jsx`.\n\n1. Decorator - Order matters. Will include JSX for decorators added after the jsx decorator. Use `skip` option to omit these\n2. `addWithJSX` - You must change every `.add` to `.addWithJSX`. Extra decorators will not effect these.\n\n#### Decorator\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .add('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => <div color=\"#333\">test</div>);\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n#### addWithJSX\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { setAddon, storiesOf } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addWithJSX('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .addWithJSX('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module).addWithJSX('Paris', () => (\n  <div color=\"#333\">test</div>\n));\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n## Options\n\nYou can pass options as a third parameter.\nOptions available:\n\n### JSX\n\n- `skip` (default: 0) : Skip element in your component to display\n- Options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string)\n\n```js\n// Option displayName\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => <TestContainer>Hello there</TestContainer>,\n  { jsx: { displayName: 'Test' } } // can be a function { displayName: element => 'Test' }\n);\n// Output\n// <Test>Hello there</Test>\n```\n\n```javascript\n//Option skip\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <Test>Hello</Test>\n    </div>\n  ),\n  { jsx: { skip: 1 } }\n);\n// Output\n// <Test>Hello</Test>\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\n/Option onBeforeRender\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <div dangerouslySetInnerHTML={{ __html: '<div>Inner HTML</div>',}} />\n    </div>\n  ),\n  {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n        return domString\n      },\n    }\n  },\n);\n// Output\n// <div>Inner HTML</div>\n```\n\n### Not JSX\n\nIf a Vue story defines its view with a template string then it will be displayed\n\n- `enableBeautify` (default: true) : Beautify the template string\n- HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n```javascript\n//Option indent_size\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => ({\n    template: `<Test>\nHello\n                          </Test>`\n  }),\n  { jsx: { indent_size: 2 } }\n);\n// Output\n// <Test>\n//   Hello\n// </Test>\n```\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n","readmeFilename":"README.md","gitHead":"0f26a2f8f10a62716807a76fa5d45788e67af7e9","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.11-canary.91.226","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-HPplNhpHpnl9nKQJIS5XoaWKsLKijbvXOSrm1OSqNjgGywSa6RdVnyXgRbN+xz/RDttr8M71B/AQxwfWeqKGjg==","shasum":"4bed69c475fc77e780548d87c1b80d92e00826d0","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.11-canary.91.226.tgz","fileCount":30,"unpackedSize":187533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsFYMCRA9TVsSAnZWagAABBcP/jQWPceG6o8qkHwmvuUG\nDwelOPSPymn7KFFSKHYw+chivKs3UWn6aoqQHMkaODBGwwo1Y2h55sfpAEZJ\nyvJZWIhfJ2ugtwnJ4iFLVCkDcz7ga5NxFJmxvHhiKHCOzjdFwt5HFufHoqpA\noNqruMyM2Pe8fRr7JCyY4OTH3+p5bZuxN4YU5BQka3pRKci36h45/RFIfMCl\n7zCqfHJvpdRip3fZsTfavhsR592FQLMAfCYEYkuaWFLR89bxMbrJSIlxNDfK\nbnhUm5IBpjqtHwv8B33LRXlNf3RYPcmMIiHOWJokdNrqgX3/qmZQwKqYrDNP\nSRsGsixW7Vx07ETOlHanP+1hQqjrUEmbnD0CNUwYrbfWHzr9zjvNgFZftLr1\nrFLMWkYJBmy1/qjnAlhiHZosCaJBVzUptuOqcZWqX9Oouhn5wM1SfvyJ9rl1\n7uTJ+kIaGIum6YcrdcqUq/kncyKpzKrU/zBfhD4JKE+A/I74YroFA3kCrdT5\nVP+7+7MWzH5Umbpem3fH8o4rnQ+ZH94XP6arhKYakkK4gp65Q31Sayq0E0dd\nYUm1z+xwLISSUiw1J7U0vUUcw7/d9Oai3H1wMgqdXg9IOgfll3XfzrGIGN/s\nOQf8aHMWC2NghE4U3CBLUYjwzNNE/GbGRwnZl3tb44I6y9cn6XhXPkHbS7QK\nB4W3\r\n=G2aN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAMU2Xiw1xAv0NhQG/q11dnlw9aENROlhcI+e4XwDSx1AiAMCs8FzbisP6s+5RTFpnZWP0V5fdahiRSUlw0M2gb4og=="}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.11-canary.91.226_1571837452041_0.8828751928629381"},"_hasShrinkwrap":false},"7.1.11-canary.91.230":{"name":"storybook-addon-jsx","version":"7.1.11-canary.91.230","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","prismjs":"^1.15.0","react-element-to-jsx-string":"^14.0.3","storybook-chromatic":"^3.0.3"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/prismjs":"^1.9.1","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^7.2.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nIt can be useful to see what props you set, for example.\n\n![Storybook Addon JSX Démo](screenshot.png)\n\n## Getting started\n\n### Installation:\n\n```sh\nyarn add --dev storybook-addon-jsx\n```\n\n### Add to storybook\n\nAppend the following to file called `addons.js` in your storybook config (default: `.storybook`):\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\nIf the file doesn't exist yet, you'll have to create it.\n\n### Usage\n\nBoth have caveats and you should pick the best for your use case.\nThere are two ways to use `addon-jsx`.\n\n1. Decorator - Order matters. Will include JSX for decorators added after the jsx decorator. Use `skip` option to omit these\n2. `addWithJSX` - You must change every `.add` to `.addWithJSX`. Extra decorators will not effect these.\n\n#### Decorator\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .add('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => <div color=\"#333\">test</div>);\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n#### addWithJSX\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { setAddon, storiesOf } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addWithJSX('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .addWithJSX('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module).addWithJSX('Paris', () => (\n  <div color=\"#333\">test</div>\n));\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n## Options\n\nYou can pass options as a third parameter.\nOptions available:\n\n### JSX\n\n- `skip` (default: 0) : Skip element in your component to display\n- Options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string)\n\n```js\n// Option displayName\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => <TestContainer>Hello there</TestContainer>,\n  { jsx: { displayName: 'Test' } } // can be a function { displayName: element => 'Test' }\n);\n// Output\n// <Test>Hello there</Test>\n```\n\n```javascript\n//Option skip\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <Test>Hello</Test>\n    </div>\n  ),\n  { jsx: { skip: 1 } }\n);\n// Output\n// <Test>Hello</Test>\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\n/Option onBeforeRender\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <div dangerouslySetInnerHTML={{ __html: '<div>Inner HTML</div>',}} />\n    </div>\n  ),\n  {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n        return domString\n      },\n    }\n  },\n);\n// Output\n// <div>Inner HTML</div>\n```\n\n### Not JSX\n\nIf a Vue story defines its view with a template string then it will be displayed\n\n- `enableBeautify` (default: true) : Beautify the template string\n- HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n```javascript\n//Option indent_size\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => ({\n    template: `<Test>\nHello\n                          </Test>`\n  }),\n  { jsx: { indent_size: 2 } }\n);\n// Output\n// <Test>\n//   Hello\n// </Test>\n```\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n","readmeFilename":"README.md","gitHead":"a5c777985e0694139c2882f3e6cf15e1f773c908","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.11-canary.91.230","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-Bact2zS9jo8h2XX4FciCC52XZ2v78LzLxgm/YA9ERbwOTv2OyHTRrUL+GfdKXOgZvQHLMEZbXpUpXKVsbf1vOQ==","shasum":"0610015cfcf04a1f81291c7965412bb17115e1f2","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.11-canary.91.230.tgz","fileCount":30,"unpackedSize":187884,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsFafCRA9TVsSAnZWagAAzvQQAIwL3Yielbw4pJ3XTQk6\nAxY9QtUC1ytwUkq5NlBSLYz1PIfCzpSIxO2dh7Q7tW+cKHs45+k4h09zx6c4\nAfvugowJj6ucuBu53ndlotwApf/CmktQ32UXRMuZ18zUQTkpmBYGGvmNeJsw\nxqm9el7W6ZN90wcJodX6hKEBAxB5zr8c60e/Mpinrc30t6ghdZ9j9SeA0sFt\nSjAyKqyJezq8ycK5XnBng62THzsfqd5lva2MIqbeue/drFpvkg4nBEL6iMZh\n9r8gdoe48dcmkSmnTyXuqQnBFkVJjdoNHTUrS+muIGSV7mtbeA814JwJDcbV\nPB0GTVUN9kOZ2YusebsLhOgmLzDv4Tr1GseWrTAEwrdtJloEsMAONkhVkzRK\nz1paR7otznDoLu1OQhluyPraCX1uLUX83AGg/w7Q2AAeS4NC9gej9vNimxC+\naycDx5AqUqWnuwhDTVGS1C/9veES6+oTtsblMrKDb90tJNCDXMdv+tn9EiKE\nSBnW3syeXQ5lIW20nQWiFvRDjOZ6xPkFlFjRqZmMfrE+nKVSs0+MtvpU64JJ\nzMD7QtHZEuG2L5w8wiFix6pl7Omsoc88HKmP64Y7s9DwONsdpWNE/1//dlyx\nuWnrmLuguNne7BGj7jh/1YHtutasZR7RP1SGRae0QnbsfC9eusqYHsjhGrB6\n87RV\r\n=WdLx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDJGkxauCy88lf0P5zL660cuCjD2Q4stb3it+HYt2HUOAiB8icOyDeaKG6NJo1OuTlgyijr4fPuHkSxqP1VnnMMMsQ=="}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.11-canary.91.230_1571837598986_0.8925080079549526"},"_hasShrinkwrap":false},"7.1.11":{"name":"storybook-addon-jsx","version":"7.1.11","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","prismjs":"^1.15.0","react-element-to-jsx-string":"^14.0.3","storybook-chromatic":"^3.0.3"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/prismjs":"^1.9.1","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^7.2.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"gitHead":"49a477e14003791435ac8497840a7617a52ba952","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.11","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-cTcDSzNl8XmjGUM240ls9qz1mOkQrIeGbIChDk0iVbH07JQXLhcUDU6LcielrdUFHYtX6Mth/rc70hX12XF+xw==","shasum":"7f7ca3dceaa1d2b0d560f9c0db1cb3ce73bd0811","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.11.tgz","fileCount":30,"unpackedSize":188248,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsGPqCRA9TVsSAnZWagAAUgAP+QAsLYcQs8MgKl1Qtoc1\n4XYcwtD6qiOK88Ja4foxQVvci5naO9dHChv7JYthuFM7etTIFkyyNhP/xXWU\nnRELmCe0s6AWgSVGPO2T1SmIr5kEx765gQ7LlOBqztTXJuw6lN+I8APghofu\nezH/h8WLn5QHcT9008WcN5o+2Of9tmGdvtKMTlITN2258vJ1nQ11OHTZkMWb\ncDf9TyERxnR4k0s2nu99gqmJ48hWWVe207NpWla3vWCOT2yMgJe2cDuUldJJ\n//N05idgQzji1xZ/0+R+An5cnXtcgC8NsbGJaTdBA15vJcpBeJ5m24DZP+bK\n4kQcRC12SPZ6hNOxg/ekYbusjLlN+GBTQm4SLiEr24o6xh/0NHs22GGreRQc\n3PDpSf1nxWWQJ+Y7dPfUEmjEOweyqiwgaH/mXgwwExAzfQmr18YbSswoyXpD\nyZwcKYYA1pWTLF7zzKxROeKrJKXlD8CWF5afMKeBeNumuSqTD7j9/sVbxT/H\nbe5N1/71wiNOFmx9rQ8kIKEe5FjBmeSoVoyuLZrwdei5dQmfhKW1g8eQulLU\n3fjxahalj16bI/wVxkYIwPcGRq2FEg6x90qH83NbjOsUCkEc66WsUK0SPVzS\n2zAtN61l7DR3HNFW86Gv8h07ZbvldwjIGW9NB9ciCYqoWFzAA6v80vziucCG\nGTOn\r\n=gfbV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYhsdil2WkKrBjqvNXyhrqYQhEhsMo7VQYHhTBgQ0ZhwIgKHTayjSx5CNtISdr08L/bf/dGT5lL4e0e/qp2ZRsQCE="}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.11_1571841001502_0.6993641600483014"},"_hasShrinkwrap":false},"7.1.12-canary.92.246":{"name":"storybook-addon-jsx","version":"7.1.12-canary.92.246","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"@storybook/components":"^5.2.5","copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.0.3"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^7.2.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-chromatic":"^3.0.3","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nIt can be useful to see what props you set, for example.\n\n![Storybook Addon JSX Démo](screenshot.png)\n\n## Getting started\n\n### Installation:\n\n```sh\nyarn add --dev storybook-addon-jsx\n```\n\n### Add to storybook\n\nAppend the following to file called `addons.js` in your storybook config (default: `.storybook`):\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\nIf the file doesn't exist yet, you'll have to create it.\n\n### Usage\n\nBoth have caveats and you should pick the best for your use case.\nThere are two ways to use `addon-jsx`.\n\n1. Decorator - Order matters. Will include JSX for decorators added after the jsx decorator. Use `skip` option to omit these\n2. `addWithJSX` - You must change every `.add` to `.addWithJSX`. Extra decorators will not effect these.\n\n#### Decorator\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .add('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => <div color=\"#333\">test</div>);\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n#### addWithJSX\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { setAddon, storiesOf } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addWithJSX('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .addWithJSX('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module).addWithJSX('Paris', () => (\n  <div color=\"#333\">test</div>\n));\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n## Options\n\nYou can pass options as a third parameter.\nOptions available:\n\n### JSX\n\n- `skip` (default: 0) : Skip element in your component to display\n- Options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string)\n\n```js\n// Option displayName\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => <TestContainer>Hello there</TestContainer>,\n  { jsx: { displayName: 'Test' } } // can be a function { displayName: element => 'Test' }\n);\n// Output\n// <Test>Hello there</Test>\n```\n\n```javascript\n//Option skip\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <Test>Hello</Test>\n    </div>\n  ),\n  { jsx: { skip: 1 } }\n);\n// Output\n// <Test>Hello</Test>\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\n/Option onBeforeRender\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <div dangerouslySetInnerHTML={{ __html: '<div>Inner HTML</div>',}} />\n    </div>\n  ),\n  {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n        return domString\n      },\n    }\n  },\n);\n// Output\n// <div>Inner HTML</div>\n```\n\n### Not JSX\n\nIf a Vue story defines its view with a template string then it will be displayed\n\n- `enableBeautify` (default: true) : Beautify the template string\n- HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n```javascript\n//Option indent_size\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => ({\n    template: `<Test>\nHello\n                          </Test>`\n  }),\n  { jsx: { indent_size: 2 } }\n);\n// Output\n// <Test>\n//   Hello\n// </Test>\n```\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n","readmeFilename":"README.md","gitHead":"31b1f937a899adc0edd944eaec249f2784b7f843","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.12-canary.92.246","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-mADCk6amuG9mWlpqovEzUfJgQQH5MwqbJg6BHCF4WTRCXRyO8nrHP/GdtBMOoPYXVb+ic6hwz+5aa5j8GXY6+g==","shasum":"63a241568425dd58ddbfef256ea938e2ee5d5914","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.12-canary.92.246.tgz","fileCount":25,"unpackedSize":180186,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsGudCRA9TVsSAnZWagAAs/YP/0mvVkmkhluiE7TekCvj\nlOQMN9TPfwfnZxsEyoEEDq96uDWi1/VwSADd5t2MgdH7+IdsJNnFRZ5h7/pm\nDS6fJRD2ycojB/O+mMnTZZ3jo0RvXSohCP/zkl/TU35a3XyTZd/WSKCbPNm6\nBm90y5fyiVTEAaOc/aEicT3NXX9EbwZfU4gQRZeHoBirSo+sP7uEHxgFnN0l\nIR6lZ1hXRtRs5A+5z/3c7sriJBEA4ORE2dJdo3ID+vlzm9hNMNfjcQKmpJiY\n8jLJQAuGS7XieDmmJPjBQe8xDaUJXKJd1eu3T9V4YpCQh4eor0UgdiHNf56m\nvXcZRG/3uulRXnCQ9htHGnTgRUbCRiKP7MX+gOszD4VrFRtWSF81Cc2yKhRI\niK8Kv6LOn6gLPOBFU2uYu9zFg+b3CWTsnQbq+/qG6kkOdKZRhfMaqkhFbXa5\nVYHxAJ+cn8v0mUo9qVHAg9bQEL+gOAX6POgcbrYBW8YbGPi3Vvnpkjd/UWgj\nUjayrwKxOvdnOzHNoWjcJdJNH0mC67TTvSHEuNMk1XM8kZdVX8FRcXnyc76L\npD/atBN3WY4fzQMYYeD8Qy/sQ4vD/LHhCTgMreTJkDuWD+jxWbbThnuzvwC7\ngTLSrAFcvDHdv5xq69bMcTIv53U5aAYmVT1KOAnksedehDCbYbWd0pc3yP6M\nw/XT\r\n=ilEU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtbzxIO14ZpmLxUqRxy7k0+SShCLwJpMravzLhQNopNwIhAMaQ38KFNq3e0BsUlyFF2DxQlYdnfwh6dEqlVEESUvWb"}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.12-canary.92.246_1571842972682_0.8248584433222026"},"_hasShrinkwrap":false},"7.1.12-canary.92.249":{"name":"storybook-addon-jsx","version":"7.1.12-canary.92.249","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"@storybook/components":"^5.2.5","copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.0.3"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^7.2.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-chromatic":"^3.0.3","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nIt can be useful to see what props you set, for example.\n\n![Storybook Addon JSX Démo](screenshot.png)\n\n## Getting started\n\n### Installation:\n\n```sh\nyarn add --dev storybook-addon-jsx\n```\n\n### Add to storybook\n\nAppend the following to file called `addons.js` in your storybook config (default: `.storybook`):\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\nIf the file doesn't exist yet, you'll have to create it.\n\n### Usage\n\nBoth have caveats and you should pick the best for your use case.\nThere are two ways to use `addon-jsx`.\n\n1. Decorator - Order matters. Will include JSX for decorators added after the jsx decorator. Use `skip` option to omit these\n2. `addWithJSX` - You must change every `.add` to `.addWithJSX`. Extra decorators will not effect these.\n\n#### Decorator\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .add('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => <div color=\"#333\">test</div>);\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n#### addWithJSX\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { setAddon, storiesOf } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addWithJSX('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .addWithJSX('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module).addWithJSX('Paris', () => (\n  <div color=\"#333\">test</div>\n));\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n## Options\n\nYou can pass options as a third parameter.\nOptions available:\n\n### JSX\n\n- `skip` (default: 0) : Skip element in your component to display\n- Options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string)\n\n```js\n// Option displayName\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => <TestContainer>Hello there</TestContainer>,\n  { jsx: { displayName: 'Test' } } // can be a function { displayName: element => 'Test' }\n);\n// Output\n// <Test>Hello there</Test>\n```\n\n```javascript\n//Option skip\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <Test>Hello</Test>\n    </div>\n  ),\n  { jsx: { skip: 1 } }\n);\n// Output\n// <Test>Hello</Test>\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\n/Option onBeforeRender\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <div dangerouslySetInnerHTML={{ __html: '<div>Inner HTML</div>',}} />\n    </div>\n  ),\n  {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n        return domString\n      },\n    }\n  },\n);\n// Output\n// <div>Inner HTML</div>\n```\n\n### Not JSX\n\nIf a Vue story defines its view with a template string then it will be displayed\n\n- `enableBeautify` (default: true) : Beautify the template string\n- HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n```javascript\n//Option indent_size\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => ({\n    template: `<Test>\nHello\n                          </Test>`\n  }),\n  { jsx: { indent_size: 2 } }\n);\n// Output\n// <Test>\n//   Hello\n// </Test>\n```\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n","readmeFilename":"README.md","gitHead":"bc53f49cdf06ca1f8e51448d1c2e2a4447b3e4e1","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.12-canary.92.249","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-92g0CBTba37nwMCMpjLqmfMQ7lUv1y+ouaqBVsKY2EJruzW6IsAz/YncRanIu0MlfZaFC16YH07Be0bdSnvC7w==","shasum":"ff4c31a97664decb88bfb89fbccb852a52f9f1be","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.12-canary.92.249.tgz","fileCount":25,"unpackedSize":180564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsGu9CRA9TVsSAnZWagAAJTUP/3G09cm7M5O73/ZOX5VZ\nDuFiAYw74xGN5rhfWspcinwjBxNngXSqOZnx3ga3vmcSuSBPdfVE/E70Fp97\nCZsKvyR2DqPrXn577bEL2PgoS0oq3VuE/Vxj8YT9dzmU3+tTX3gziQVZlfgC\nGJAvBMA34YS7Hz3PdXwLUBfG27SAx53T+LOeLRkrPIV92lKj/g4Uh1bfKDzA\nzSxnUARiN9isN66OWg71KlN/wlnsPv9fufSD6ElMi3Oum5WG9btrzTfaUqWZ\nizLh6+m+pz9snlU0XWTdIoDAZzVnNMVaryBXPKn+lFGzu5jXoirYcEZmt+hu\nuz+Ey8+uzDuEcpYrBQoSPal1PpkHmZXaQ0xuMqD9ZQxImpzxIUQ0wKmerO5N\n7hIcZ0ChizezgMK8/vVlUQq0PsvQq36//62LuFoUSAMTxySXPZsE3U+71qeK\n1BOX2Bm2kYD3UqnCLttkF9Cu9ccL5idCD7fQcpRFIjJcfwp94Dwc/LNp+jxL\nx6HK297oXr5ZzGNshGzLjVOkyPDKeWbAFY2/ssfaj0L0IjYzSGL06u0Ga2Qc\nrGcBl3HkmTZHtowYcxXWOZXO+EnkPe/bgkXo8XJPkyQD5Jwiam4nENHQg9mI\n8z7GBi9qowtnDsuRb8j9eVF0bCU7MNZ0BPQN/3/k1QppTab7vgp/1X7w7fje\nDbNA\r\n=pVt/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICw8Roo2NsQcvBM0OEz1Gw7wz2FXG0PzQA6AL16vCLz4AiEA2lJeKSBCozo7bU9YycWaGFX/MCg2PlCPqZurSiyhQJs="}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.12-canary.92.249_1571843005331_0.7937648825984351"},"_hasShrinkwrap":false},"7.1.12-canary.92.253":{"name":"storybook-addon-jsx","version":"7.1.12-canary.92.253","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"@storybook/components":"^5.2.5","copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.0.3"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^7.2.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nIt can be useful to see what props you set, for example.\n\n![Storybook Addon JSX Démo](screenshot.png)\n\n## Getting started\n\n### Installation:\n\n```sh\nyarn add --dev storybook-addon-jsx\n```\n\n### Add to storybook\n\nAppend the following to file called `addons.js` in your storybook config (default: `.storybook`):\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\nIf the file doesn't exist yet, you'll have to create it.\n\n### Usage\n\nBoth have caveats and you should pick the best for your use case.\nThere are two ways to use `addon-jsx`.\n\n1. Decorator - Order matters. Will include JSX for decorators added after the jsx decorator. Use `skip` option to omit these\n2. `addWithJSX` - You must change every `.add` to `.addWithJSX`. Extra decorators will not effect these.\n\n#### Decorator\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .add('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => <div color=\"#333\">test</div>);\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n#### addWithJSX\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { setAddon, storiesOf } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addWithJSX('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .addWithJSX('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module).addWithJSX('Paris', () => (\n  <div color=\"#333\">test</div>\n));\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n## Options\n\nYou can pass options as a third parameter.\nOptions available:\n\n### JSX\n\n- `skip` (default: 0) : Skip element in your component to display\n- Options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string)\n\n```js\n// Option displayName\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => <TestContainer>Hello there</TestContainer>,\n  { jsx: { displayName: 'Test' } } // can be a function { displayName: element => 'Test' }\n);\n// Output\n// <Test>Hello there</Test>\n```\n\n```javascript\n//Option skip\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <Test>Hello</Test>\n    </div>\n  ),\n  { jsx: { skip: 1 } }\n);\n// Output\n// <Test>Hello</Test>\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\n/Option onBeforeRender\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <div dangerouslySetInnerHTML={{ __html: '<div>Inner HTML</div>',}} />\n    </div>\n  ),\n  {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n        return domString\n      },\n    }\n  },\n);\n// Output\n// <div>Inner HTML</div>\n```\n\n### Not JSX\n\nIf a Vue story defines its view with a template string then it will be displayed\n\n- `enableBeautify` (default: true) : Beautify the template string\n- HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n```javascript\n//Option indent_size\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => ({\n    template: `<Test>\nHello\n                          </Test>`\n  }),\n  { jsx: { indent_size: 2 } }\n);\n// Output\n// <Test>\n//   Hello\n// </Test>\n```\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n","readmeFilename":"README.md","gitHead":"69f8ff6486c93b910fbe7a3295ecb27857a8df4e","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.12-canary.92.253","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-1q3YwZKBGI5jWy9IFzApx2uNOjj7Lj+PWaHJ+io/nejSXG/+3g+YL1jaMSeHy8kvtXqOfsJVoQLBL7nItpyuFw==","shasum":"1a73fe5c7597e1aea30577d956cd794e04a9bebd","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.12-canary.92.253.tgz","fileCount":25,"unpackedSize":180527,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsKJ/CRA9TVsSAnZWagAAPGQP/ikm73bXfD3ScFrp14NB\n7stVjVdy+CIUBCfGVlfg8KyAwzGsKLJUDG7Dq5AyL/tlJhz6iRz+3cn/l7NP\nrPD/t1ey4LPZtFAVFmyNvXiC7VcRI88mppoOEX4BNvgl6o6dSJRZIUBT4oxE\nqodsM78XJc+icokd4Pd1/XPTZTt0VYE/OdMK0qatx3fNQQoH+Mv1t9VliCfh\ngz+OmyjAJSxbs4cX35WXsh88GAoDCAmj0pshjYAVrUg8g0cPc59Z/JHjFM/L\nrUUdZrrlfZO9IUaJi584qGtWVsqSIkWQmT7W7xxS+kk+mroPT3lun/XOCKYG\nCvfgc6KZQZQhBbyhQTHxBixGU/eqEOuzF2eqxVGBXJa/WMM6mdMp8rF0Svyd\nY3KjDdegAF4n7yDl8F6320K8QqgBbgdFz8z+T9BRwCDVfAA4rfXUj7y84uJ+\n4eCiHOPfPrrQHLcXyr8uKFCl+Tg794XE3WlqcfN4xJChTac/SH8ZstmBvWkh\ngnESxYyHOfolrSjhYFvLXbDdHWXMhgjodsAyUR7O7qnZuCqY38lLb6qsJZEi\na2hrzHYFWOFxd9RjbxNL8iYJbOLFL0gQiwE+7/JzCxglE51OQTHZrLWgEbSM\nk2amg/p4I8CthXVS/xbaYUDFx17Ec5jCY2WUUvBdpJ7JEQ8rPo9fMxhBMGZk\np6tg\r\n=lOHg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF6Oyi99P0v3r3LFIsSslLQ3ywu9WRYPI2WMNpRb8dRrAiEA7HHz2jRX580Fppe0PRJxwGbq9FLZkjq+VAYSDCyd/1g="}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.12-canary.92.253_1571857022583_0.3956245849826652"},"_hasShrinkwrap":false},"7.1.12":{"name":"storybook-addon-jsx","version":"7.1.12","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"@storybook/components":"^5.2.5","copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.0.3"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^7.2.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"gitHead":"f65e1e7210fb228d9cbc9750c8be5ca7a3938c96","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.12","_nodeVersion":"12.13.0","_npmVersion":"6.12.0","dist":{"integrity":"sha512-Eli8CkooBlHV68ZPdJLXexwIENZcMd38Ca/hhRKXPspX9VQoSo4bsYfp9sPa8RAiVtK7Ur+AcyJKskXv2joiKA==","shasum":"f8d5ecd463f8ebf952c398763e631ad6413bc197","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.12.tgz","fileCount":25,"unpackedSize":180915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsKNwCRA9TVsSAnZWagAAZzUP/RlMnTUHHUb/dXhZP4b/\nfKgClfAsrDKy4TBfVTCXjvWqplNW9jer59VXGS1EH8BhRLvZPPKLWx8yDLuS\nCU1ZoPgDrPbd/SP5yvTPdfceiAE+JL7qURI/a8akVZEnq9880ubrtSI49BLi\ndZQJiOc8Yiw9MCs0e/VCbLT4pdMbMUDbx0M5uarvw0lNs6xh6SfohHl2N33B\nGqXestcBWlq33wag1+pMAkhc9N9CKRsPh3nmeTD0VH3+Lc+sSyTJFQ4jXoLQ\n/vRFoFaR9/Oe2pJ1cWWrUNPhli7TIi493jG00nZdvXYlkb9nJSmVD6M9p+MG\nOjnR4LDbaujj+aFSm2FKZkA+/XsoGbDfIGURhE/IybB8jd1PVkbYXBPDtq3d\nlnlbf4v6xU6E53oQnPIHWCdAzZ62klZTSoojFW0UPtyydTG1ryIt/oRj6AVl\n552l5wj/TC1oA/VhQesM/SUMCJkhy1SAXnTVEzczD2bslLEjGIfeiqOevh5O\nEnWEQZyHpV8RCGXTUgVbe9GxaNGAP1gtqJICNEFn83xmwP9bpqOsKaL70tjy\niYRffQ4kYpX3e01pm8pMn+1aCi7qVF8gifTZD7AbBqiRYCXVYCS16uAB2Bn2\n4tbVZMEv8+kWVFMn6i7XvkMXiuFNtI6Wxr/3o+xuEe+HypSms08Cajl6DK7i\nHTBW\r\n=bbPz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE/MhVW9VG3+/mSH+EYiR4WrcV03+s4Z1IC3matX+Ni1AiEA9lZLmtUARhJZLbwJnzbJ3MzgMlzvLcSUk52bSS7HvEQ="}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.12_1571857263899_0.5914851484798955"},"_hasShrinkwrap":false},"7.1.13":{"name":"storybook-addon-jsx","version":"7.1.13","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"@storybook/components":"^5.2.5","copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.0.3"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^7.2.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"gitHead":"602dc626647496339b320a40880213bc77b156e1","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.13","_nodeVersion":"13.0.1","_npmVersion":"6.12.0","dist":{"integrity":"sha512-JHWbVUzpkyIMiGeFWFkxg6qNkR0fLeT++v1Q4IN9s7JfxrHksPskMnCkDra+rmx/Mtdq4uk5XKREJNIl0H8d/w==","shasum":"1bc18a64bd9053b0c2f9669d398697ec6fdb6b36","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.13.tgz","fileCount":25,"unpackedSize":141957,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdssrlCRA9TVsSAnZWagAAo3gP/jReDyKK7W1qhfdr3zTx\n5I+aPnK4XFL0sDLlp5XlqGkbxVMLMZcYYyxdPiQJ1e47cudWbZDV15UIkEwV\nSkvgqewYd2ORLYKwhAgfRe4o6x3JH28xUI89+R8UPeAWgBF6M47jI8ve/80j\n3/aIusMkljy2Eq3fdmGwFNCZT9U72hBzUPbdp3iZ4jFLNvNdZ3ssfDtsV1Q/\nLxSrAnn01mfSJ7TxZUPmHw7A7a1F3EqBw/fpLXOIQZvfFf0B5iXXRjpE0M+g\nptT5BVM0J7WKz1skX6rwl1pzd1VT+sNNsLDxAI7HXlP7gmvz+UFP8f/diQDx\nhhMlYTREcNMj6a9FLq2dMC3EHll9hQpshriHCXfcmCTEsX1uKttn4wb4vQ+z\nYhhYzmTAVn3eYu2Fpyx8pobmC+DT6Z/AeI4x0oZnjgV3NiGK9wWTBIL+lsbu\njN0sNDee2GD3chCsEBOAw+4HbvnDdGNiRVAPk2/rcO6cUaOR0kHQYQOILbDW\nFvHPWXTgO0Md0zPVtBwXvsDLLRqjK5X5K8AlbZw+dSa9Rg9naVTA7J9Iswlm\npHXcICc4n/Sd2JnNOUwSTOm8FH57dFCgSM64XxXahA7bZpoY9JbAFQC4Cqno\nvsO31b7DK/+CdADNEOtNW/GyLFAxyAwr725f274yo5Cz86eXpU4F8oeTkWKL\npKAF\r\n=ywb9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGBj9GyjCUcVtES+1TGtsLGtIg2bjOksnDd+ShgcsdfsAiARnzPMn5XoiD77s0ga/TFM6Wbx2K8RFPsVPH8vERed1g=="}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.13_1571998437359_0.012444846209328508"},"_hasShrinkwrap":false},"7.1.14":{"name":"storybook-addon-jsx","version":"7.1.14","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"@storybook/components":"^5.2.5","copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^7.2.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"gitHead":"b52700785339d3c4e397c303250c19ba70971347","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.14","_nodeVersion":"13.6.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-ei+nhJz5KB55W247MSxrszc+D3R8xhkZ796bYSikct0L6ug1kVy4KS/cltWYE0pycbpNRGMGALFNgfYfVsF3jg==","shasum":"ec1a3512741b069381e280e00a03397b774a4f69","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.14.tgz","fileCount":25,"unpackedSize":142262,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKcFsCRA9TVsSAnZWagAAGesP/1WSYiqE6zhmOa1vBTcr\nZ4sHbhMoMjv/jzcVUZVKtj+LXE214dQDckaUsRFE/Cd842BedQTLCuZoDyin\nV/NC5F1ZioMWu50jS+6C8o1OHfarEvC9wplFbvyk4KcY2OHZaVWbV12KM/98\n/mbP/jib0SwesHxT4oAPzfMKGMjYeorQWh+DfKbi0BM73UhEVeQ7/lrfKbS7\n40NR6hzQfuQs95cUnpjB/6M7ri8BtPogvsQimfBA+2c9p7VJ2fmbbWXe+OSF\n+g6QyCiBSG1+CzbRjfC0U/aLIC34a553crsfbmFzCju6giOkRncVMc/TxacG\n+Vt3Ga56+6GeXmN488hbTwHz6AUvxZrJLMWdmPpC4NHdghUUtBCYrrseteyT\nzS1I90BZVrmqDj/KHE4SPmGlYZ13jKgfrEExSAQfeVX9yso9rfT7YlWCLg6e\nUyUm4kp8gaPov3XAXEQzPnFkifAVR2Pb6in+sF+SiVDpPfhVARiSxFFTJoln\ncGxKlDrza/UePMSXAgE7uWKX7gZ8VjjeQIbkR6rNPNad8HMryYiDQDYYkiUT\nHW5uQJYO8/vSsRLlU8B1WTTcC+pTlAieVZ+5xAUbfekux74zZAn0TgAb18oU\nwT/xERku0YNei+nLXBw7nuuwXUramN9BjnMiS398OxcNbiJjLq0tIqRpsvND\nrbVv\r\n=iUZc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDWWFQ4FqcAv+4JFcUXPg+2kCciiQ2tPkZUBeTOO8EwzAiEA7L8fz4Y5l/Fp5U0wTCzWztOWqtAR1IDQ7CVFqnfRZao="}]},"maintainers":[{"email":"alefevre@kilix.fr","name":"alefevre19"},{"email":"bodin.alex@gmail.com","name":"alexandrebodin"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"augustin.public@gmail.com","name":"augustinlf"},{"email":"elabbassih@gmail.com","name":"hichamelbsi"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.14_1579794796290_0.10650983713326623"},"_hasShrinkwrap":false},"7.1.15-canary.99.289":{"name":"storybook-addon-jsx","version":"7.1.15-canary.99.289","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"@storybook/components":"^5.2.5","copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^7.2.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nIt can be useful to see what props you set, for example.\n\n![Storybook Addon JSX Démo](screenshot.png)\n\n## Getting started\n\n### Installation:\n\n```sh\nyarn add --dev storybook-addon-jsx\n```\n\n### Add to storybook\n\nAppend the following to file called `addons.js` in your storybook config (default: `.storybook`):\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\nIf the file doesn't exist yet, you'll have to create it.\n\n### Usage\n\nBoth have caveats and you should pick the best for your use case.\nThere are two ways to use `addon-jsx`.\n\n1. Decorator - Order matters. Will include JSX for decorators added after the jsx decorator. Use `skip` option to omit these\n2. `addWithJSX` - You must change every `.add` to `.addWithJSX`. Extra decorators will not effect these.\n\n#### Decorator\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .add('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => <div color=\"#333\">test</div>);\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n#### addWithJSX\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { setAddon, storiesOf } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addWithJSX('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .addWithJSX('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module).addWithJSX('Paris', () => (\n  <div color=\"#333\">test</div>\n));\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n## Options\n\nYou can pass options as a third parameter.\nOptions available:\n\n### JSX\n\n- `skip` (default: 0) : Skip element in your component to display\n- Options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string)\n\n```js\n// Option displayName\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => <TestContainer>Hello there</TestContainer>,\n  { jsx: { displayName: 'Test' } } // can be a function { displayName: element => 'Test' }\n);\n// Output\n// <Test>Hello there</Test>\n```\n\n```javascript\n//Option skip\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <Test>Hello</Test>\n    </div>\n  ),\n  { jsx: { skip: 1 } }\n);\n// Output\n// <Test>Hello</Test>\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\n/Option onBeforeRender\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <div dangerouslySetInnerHTML={{ __html: '<div>Inner HTML</div>',}} />\n    </div>\n  ),\n  {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n        return domString\n      },\n    }\n  },\n);\n// Output\n// <div>Inner HTML</div>\n```\n\n### Not JSX\n\nIf a Vue story defines its view with a template string then it will be displayed\n\n- `enableBeautify` (default: true) : Beautify the template string\n- HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n```javascript\n//Option indent_size\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => ({\n    template: `<Test>\nHello\n                          </Test>`\n  }),\n  { jsx: { indent_size: 2 } }\n);\n// Output\n// <Test>\n//   Hello\n// </Test>\n```\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n","readmeFilename":"README.md","gitHead":"fdd8bcb18ded7e557c0c579aa11a20265bc014b7","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.15-canary.99.289","_nodeVersion":"13.10.1","_npmVersion":"6.13.7","dist":{"integrity":"sha512-cEhJZ8/+T3srA4l6jnUOhArQZqIx6LmIhZOc+3E56uLXtmfb+uwX0NmVS9mSPgKN2LRa2JNsLPgPn4LdkjulCw==","shasum":"d7f4b5314d1df21e2002fc48b4f7892fcfead751","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.15-canary.99.289.tgz","fileCount":25,"unpackedSize":142276,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJebGg2CRA9TVsSAnZWagAAbscQAI/LEi9MnkKJTpB1pcvD\nQ8bqjkeHZ21oQbArM9xPTEEZTFpng+slrO19VcA5A4FpxibdEORr3C48biEz\nBcQz5mGBLBUj+bCBUYgV7eIEZE72n/QyC8BEUgM61+StdDdMk8kk4N9Px8i5\nkF5RTa6Da1ZZcVdSrIFPFR0Lz1TK/bFs9CmVinkipUHUmNdZx9+P0p57XHH+\nYUbfn/XV/OJepH5F4o8h11kI+wFaAIcxVTg5fUDP8A8B3ScapiaVM+eQGlhu\n6Uz66aLNdYlbcrZYxJJw6gtVR9neJThkO+jiqonnJ/LgyJJ46vgwGXSe4hCa\nsDs6I5LVciH064gNb7rXtkkkAjzgjDw6xtfmNms11JSCffsDy9lss8iM8mf+\nliINo0XriE4o8xpW/rYXrWhr39nRYDlrCleQy3WehAso7nK6EyZEUbu70iU3\nyPUiE4Jv11mXFvKyHvD3jEbzgLGHqfqW7YHTeQq2Q1dQYUmGhq/xjzL0RW0e\nf92zxaP0SzOoi7uHiDTlgXrSeJpIrZEF9aagcA1H6QtxLlaunsvuCwXWi3jy\nmq3ADBX4WGi5yMlhP1RZ9QKs6vjqDqO4sRmY4u4ybOevz22epFP9zH1DZrfd\nyrvXn6eUNvZEH8wbko0NOkFYWnXm+o92Pd87WlM5bYxS2fOeKRHnryolkwos\nRSFM\r\n=Lqdm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGL2hNKFe1mjvd1scHgQJACt8mIkoxK6AQLEIj0FGOYZAiA7RpkonABCSZpnioc9l/yE4cNHkadtSnIJ/azKTwa4Tw=="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.15-canary.99.289_1584162870405_0.011273649934430363"},"_hasShrinkwrap":false},"7.1.15":{"name":"storybook-addon-jsx","version":"7.1.15","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"@storybook/components":"^5.2.5","copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^7.2.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"gitHead":"5a1a1c0d1153972ec88ea50b1182a5596323e331","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.15","_nodeVersion":"13.10.1","_npmVersion":"6.13.7","dist":{"integrity":"sha512-Z2FWukjv8k4f5oP/c/0lbgWJItL3PNQ3SE3KLZ6rvhYeuAPCoMJppEYSs/FYeMZP5Z3LgygtD1v0R5kqwbb2Aw==","shasum":"e43b8be4c67cef61273ec647f7820437e562d375","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.15.tgz","fileCount":25,"unpackedSize":142538,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeb0dDCRA9TVsSAnZWagAAOycP/jT3/rEKXMF+Owos4oiq\nya0XlJXeSTHxTaKk/bbOUlXdUxpvjxiHzJWrAHIzK1wRXg4+YblRvpTkJ43T\nvtoTJ2nUcDVUFdLUM6SscoPeILQvmj3eULaO4eOsYuVJFN2szLtDVCqwn5i0\nHVVyqPI8BiqE+MPS44uB6XiLjzigtNYZP+z3hxTvaj7i4zeowHKN5Vx8F4DH\nxPOTqFmzo4VGQ1LVGb6koD490L4P4aFKZwW5XJuwZeZkzmCEjDNDbRFE7+Y7\n2yLH+m/xfHwx2fJqDspfgfBJeD66vabSbHRtubjVLpf01+3nlqw/0eHrtYfE\n17/WueTfZCMASw2uRfVad+BErpdOXvntH8jg66z0k8cEWhX8cU77a+QonIyE\n8x8UnveY46xcwQuwDBsQGMY4f02RszCBwyDoonDiSshnUJqAOBaytfy23SCa\n3/yUzx9r25oSQr0RZUgIlLkpOSDek1haLzLDHVcw6eoGTYWlIo2IA803ONP8\nRCP1n+/V7D2tXbuhyw0t2Po4A291mqu4KUMp4RX+QHrxZJgvi1t0T843VSmE\nhUePyXd1x7H2dqv/1EQ2gxUHajuWJLxoYLTrf3uYSnbEM3ridheXkgvGzfkT\nMg1NrzfiBxdSaYBqUZu1tomZd5JNDnRs4SY/+ar+79L8RgBUgzf2BkQdGd1g\nDJpN\r\n=/99r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDE+Zi2OPH6rTu6dqPrrS49wcHZlVTyCISgMW2mQsfHUgIhAKO8FcBBeJIY4yTOWYbd+RhuiN6Jwl+GlgV9OxVkmA4Z"}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.15_1584351042572_0.8261542054082773"},"_hasShrinkwrap":false},"7.1.16-canary.101.304.0":{"name":"storybook-addon-jsx","version":"7.1.16-canary.101.304.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"@storybook/components":"^5.2.5","copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^9.26.8","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nIt can be useful to see what props you set, for example.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation:\n\n```sh\nyarn add --dev storybook-addon-jsx\n```\n\n### Add to storybook\n\nAppend the following to file called `addons.js` in your storybook config (default: `.storybook`):\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\nIf the file doesn't exist yet, you'll have to create it.\n\n### Usage\n\nBoth have caveats and you should pick the best for your use case.\nThere are two ways to use `addon-jsx`.\n\n1. Decorator - Order matters. Will include JSX for decorators added after the jsx decorator. Use `skip` option to omit these\n2. `addWithJSX` - You must change every `.add` to `.addWithJSX`. Extra decorators will not effect these.\n\n#### Decorator\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .add('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => <div color=\"#333\">test</div>);\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n#### addWithJSX\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { setAddon, storiesOf } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addWithJSX('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .addWithJSX('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module).addWithJSX('Paris', () => (\n  <div color=\"#333\">test</div>\n));\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n## Options\n\nYou can pass options as a third parameter.\nOptions available:\n\n### JSX\n\n- `skip` (default: 0) : Skip element in your component to display\n- Options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string)\n\n```js\n// Option displayName\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => <TestContainer>Hello there</TestContainer>,\n  { jsx: { displayName: 'Test' } } // can be a function { displayName: element => 'Test' }\n);\n// Output\n// <Test>Hello there</Test>\n```\n\n```javascript\n//Option skip\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <Test>Hello</Test>\n    </div>\n  ),\n  { jsx: { skip: 1 } }\n);\n// Output\n// <Test>Hello</Test>\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\n/Option onBeforeRender\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <div dangerouslySetInnerHTML={{ __html: '<div>Inner HTML</div>',}} />\n    </div>\n  ),\n  {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n        return domString\n      },\n    }\n  },\n);\n// Output\n// <div>Inner HTML</div>\n```\n\n### Not JSX\n\nIf a Vue story defines its view with a template string then it will be displayed\n\n- `enableBeautify` (default: true) : Beautify the template string\n- HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n```javascript\n//Option indent_size\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => ({\n    template: `<Test>\nHello\n                          </Test>`\n  }),\n  { jsx: { indent_size: 2 } }\n);\n// Output\n// <Test>\n//   Hello\n// </Test>\n```\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```json5\n{\n  // Can be any string you want, here we choose \"source\"\n  source: 'src/index.tsx'\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n","readmeFilename":"README.md","gitHead":"45c96bc1c3e3613735b1f13f6e5a23fcecb5268e","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.1.16-canary.101.304.0","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-hrm2aSVoccgIJITZ62453iO2c/BJ9PDAiI7xn219sB8d8iB2hXnYcgf5MudwNE0h/YuWzdRSP/OwDhClEISiNg==","shasum":"ab13b1c4ee801d20e89fca490845697f22e374e0","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.1.16-canary.101.304.0.tgz","fileCount":26,"unpackedSize":153521,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekQVPCRA9TVsSAnZWagAAixUQAIuQb6/euZV8eF9cS+7v\nQE/zqMILHMIpBgEm1ztSBoVXNccFywYNmebUcNIrqpcyn8OlxZann13rnQdV\nAaxI89O3lCtAsXnDVArFBQ+C9eVMU2tTHs8qtQZVusRwFfPBK0Hlox1Hm+wN\nAUuCIt7EWjUhSiOfOsUs3E7AmGk0lHyyvan1nSuDdoZKqcne3X2WFZ4dQb2m\njldhbtnylSbPjynYPwzODzTidaUYIm4kd+ICfBKm1NFY4aJW36549YoUl8Pi\nHtxCxJkh2aNiKt28QdtpwVU5DTTlCGAsiiPorf3Be635CABlHkNs4/DiSN9M\ndVepOS/iTqRNunshKu6IqvS3Yv84L0Rh2NgChJnr9lKkNLR+cOPs/Sk0P8Ms\nJExc3lyiN7kF5QN4OpTQ3kStP64N1N5pFSI7LIvTqu7Tf+O+PtVOh46AAQGC\nvcSpsyptlEsKJ4zopyFxoeDQVAgeByA6WfXAkqq4WQjTIgJzgbvI6Um0PqjV\nUsYZth1JFcxORY/uKek/jbzg4Pq8DFRPWS1PnDIk/6WyjTXSHTrR5p0nODb2\nOUk+wRk4mbILSZSCwPHWFyptUHpwvKgJk6e39tCBEThCNL47y4hl16EBzh5I\nA8zd93vVD9+ra6o1lo4Cb9HSj47yXfNI2YNXUUaDmFDK8X9EhTXMwGuvEiw+\nsLAk\r\n=ToWG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEsLW1gV9SwzmM8KMTlfdcoM5k7U3KQd6pIkWYpG6+BAIhAJAhSzm/SF1g/G785cHRWOrZP9Uif1FQ2iUMtd3fJ8iw"}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.1.16-canary.101.304.0_1586562383161_0.8484687045300949"},"_hasShrinkwrap":false},"7.2.0":{"name":"storybook-addon-jsx","version":"7.2.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"@storybook/components":"^5.2.5","copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^9.26.8","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"gitHead":"877a1d8c187078a1b9a4a8eb8a2a5536cb001d23","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.2.0","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-DW0oYXINrfcKPH/48vjKFHwg4DnujWCuqjjJtd/YeDla50fELf5SxvW4Qyp9Gd77ccDnFZKokWNCfuS5tMxtsw==","shasum":"06f3345c2e98180336f9a32b523d51eef07ff7b4","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.2.0.tgz","fileCount":26,"unpackedSize":153794,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekQc/CRA9TVsSAnZWagAAeFkQAIkvhKbRgvTFpEcs9Ms/\nAJMJOWDlNxvNSV40jKtdEz1ajllsOFaEoCOGX2Uk/LYtRKqLwcAKLVY6ghh2\nNpL6V7SGA15qtVxvkIMcnUJQ1K/4s1jSUcoN5X3Ma5bXzpRVs6UO7y3byRvk\ng6aY4xet9L/aq0GvfZLoBS2PVvvsZ/BuZ6WzbyIwIviRljC6GXwKAgxkM3UD\nNnadNBNS8kiA+Xyvv0oF+bEhvjM0bWPwtY2ER3s+oqQNSV3gWn1h3YhyvaS5\nyDl8EOuZMFA6hJf4PNU4kNAOQbntDBU9k6Ii8oXQg1AbslAWVou4JO+LgQ8O\nj8sciO0mr0TCGsEJDxm3pM+9LiJrqJLN1zuePtZpYU8aewVyaudAicfo/tT9\nlURiR1ytbhClDZ8GqHoRw15rNXYpZKsdd4GPMblHpiwHa4cwsPsQ/0RW8i9d\nUo9zrK71c2RNmJxNeifEcznSPhgQCmPJjvYOAbXKJ2fJuJTzyLymibrN05hP\nSh2KP0S61TvzQN7VrJcvOwyCsaEuFHLI1v0E4vn/AXIFbrJZ9oFI93G2ng6Y\n4zZ5tMMBAKlzJ1ajK24o0xbTdfB3/Orv/+FLJtIYF8urx0lO3UBGIGAgbHZk\nkcOvHfRY/ty2S6B7YHj/KUoIgcsUOkikdj1i0I2PImf076PKClbk1gcEz8Ca\nJ2Nm\r\n=u1az\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFLxGbzPRNIT0bXa/SHl0YW472rGXgRg2CC932Py3fsnAiEAwkDN+P2Qvr+fL017WDvf4LiAuo2GHz9iTXWK/+zrB1Y="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.2.0_1586562879060_0.7978766280495302"},"_hasShrinkwrap":false},"7.2.1-canary.102.313.0":{"name":"storybook-addon-jsx","version":"7.2.1-canary.102.313.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"@storybook/components":"^5.2.5","copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.0.3","@storybook/channels":"^5.0.3","@storybook/core-events":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^9.26.8","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@babel/core":"^7.1.2","@storybook/addons":"^5.0.1","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nIt can be useful to see what props you set, for example.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation:\n\n```sh\nyarn add --dev storybook-addon-jsx\n```\n\n### Add to storybook\n\nAppend the following to file called `addons.js` in your storybook config (default: `.storybook`):\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\nIf the file doesn't exist yet, you'll have to create it.\n\n### Usage\n\nBoth have caveats and you should pick the best for your use case.\nThere are two ways to use `addon-jsx`.\n\n1. Decorator - Order matters. Will include JSX for decorators added after the jsx decorator. Use `skip` option to omit these\n2. `addWithJSX` - You must change every `.add` to `.addWithJSX`. Extra decorators will not effect these.\n\n#### Decorator\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .add('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => <div color=\"#333\">test</div>);\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n#### addWithJSX\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { setAddon, storiesOf } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addWithJSX('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .addWithJSX('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module).addWithJSX('Paris', () => (\n  <div color=\"#333\">test</div>\n));\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n## Options\n\nYou can pass options as a third parameter.\nOptions available:\n\n### JSX\n\n- `skip` (default: 0) : Skip element in your component to display\n- Options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string)\n\n```js\n// Option displayName\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => <TestContainer>Hello there</TestContainer>,\n  { jsx: { displayName: 'Test' } } // can be a function { displayName: element => 'Test' }\n);\n// Output\n// <Test>Hello there</Test>\n```\n\n```javascript\n//Option skip\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <Test>Hello</Test>\n    </div>\n  ),\n  { jsx: { skip: 1 } }\n);\n// Output\n// <Test>Hello</Test>\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\n/Option onBeforeRender\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <div dangerouslySetInnerHTML={{ __html: '<div>Inner HTML</div>',}} />\n    </div>\n  ),\n  {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n        return domString\n      },\n    }\n  },\n);\n// Output\n// <div>Inner HTML</div>\n```\n\n### Not JSX\n\nIf a Vue story defines its view with a template string then it will be displayed\n\n- `enableBeautify` (default: true) : Beautify the template string\n- HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n```javascript\n//Option indent_size\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => ({\n    template: `<Test>\nHello\n                          </Test>`\n  }),\n  { jsx: { indent_size: 2 } }\n);\n// Output\n// <Test>\n//   Hello\n// </Test>\n```\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n","readmeFilename":"README.md","gitHead":"92da56bd71fa892da3e934d5bf80ab129bacd7a4","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.2.1-canary.102.313.0","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-+dlotRe5kiZoTFhMHVRRiBOj0tZCVSDeH/QflDZ4xm1euTuDO/VCyfDpaAiye5uNYftxx/c4Yll7WjTOlkGARg==","shasum":"f066943cc7cb4e3c9e6187e91f4740edae6b1fe7","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.2.1-canary.102.313.0.tgz","fileCount":26,"unpackedSize":153800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekgprCRA9TVsSAnZWagAAr3wQAJ8jnnJJdHSyErN3dkr9\nYfCYJO2PwDGjYCX/IEhBy+EkG1EyUjrr8BFdm61Zog/deOcrxgjs0pz61rEm\nTRqwXbiMJclIz2SEc6GZMgZ2y7YCER8v6kaQTY/t9xF4nHj8sSMea0Lo72+2\npl3Q5/HjQguucvZ9A9KJPDMimjmbhJ4rakFXdYPLkyXNsAbf/rNT0r+3kPWt\neM6w9qtd8l10u0AgVYF0qfDFsqeazIniqo/uMncdY/fApSGaNDduUOfHcAu1\nh//zG7boqdRIsQl2kf0DSzVgPy4w/ro15/BReq8MAx2nVt+UQt6c2/VbQqsS\npSVNumj6oIt5LySDybDnqMEvkuqxxT/uHI40xfAT+ypB4xPyrNwz4LtJnXJy\n6BI71SzRU/ueIMtI/LDBDAnZ7tibtCNyRTjfcoq6TRMnDKIuqz8kP0DyULWA\nsaLmsdZx4G56UL/ExOM3bkZteQ7jCM8DHKa+Y3WTvfh0JF93c10l7/3qNVrE\nw8rAafE1rZF5METOkGYJlZD6I+IhIp0Oqyq3Cygj0pw/GdFvLMcujsThXSFu\niGO9HKBf1xRW0YGGVjB1Nn5cE2CvC9MHjLZFS0PG++FFXIrLHVCs/h4VLphr\nU7XCgOUZW7fSMkxU0afbgXXSEaDo8VhI+3EKqgErFyb+aHSxYlnQMVvrGh8i\nspK1\r\n=bUGQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCimSbJ+CnBJhkAfDOnSZ214il4/ds1xkVlJOxb2SEl/wIhAO6CWq8mQiPR7mnLWdT3nRTk+PMYQddUeZ3SuCLoT1e5"}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.2.1-canary.102.313.0_1586629227399_0.7493601457524655"},"_hasShrinkwrap":false},"7.2.1-canary.102.320.0":{"name":"storybook-addon-jsx","version":"7.2.1-canary.102.320.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@design-systems/eslint-config":"^1.4.15","eslint":"^6.8.0","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/theming":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^9.26.8","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/theming":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nIt can be useful to see what props you set, for example.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation:\n\n```sh\nyarn add --dev storybook-addon-jsx\n```\n\n### Add to storybook\n\nAppend the following to file called `addons.js` in your storybook config (default: `.storybook`):\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\nIf the file doesn't exist yet, you'll have to create it.\n\n### Usage\n\nBoth have caveats and you should pick the best for your use case.\nThere are two ways to use `addon-jsx`.\n\n1. Decorator - Order matters. Will include JSX for decorators added after the jsx decorator. Use `skip` option to omit these\n2. `addWithJSX` - You must change every `.add` to `.addWithJSX`. Extra decorators will not effect these.\n\n#### Decorator\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .add('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => <div color=\"#333\">test</div>);\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n#### addWithJSX\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { setAddon, storiesOf } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addWithJSX('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .addWithJSX('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module).addWithJSX('Paris', () => (\n  <div color=\"#333\">test</div>\n));\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n## Options\n\nYou can pass options as a third parameter.\nOptions available:\n\n### JSX\n\n- `skip` (default: 0) : Skip element in your component to display\n- Options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string)\n\n```js\n// Option displayName\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => <TestContainer>Hello there</TestContainer>,\n  { jsx: { displayName: 'Test' } } // can be a function { displayName: element => 'Test' }\n);\n// Output\n// <Test>Hello there</Test>\n```\n\n```javascript\n//Option skip\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <Test>Hello</Test>\n    </div>\n  ),\n  { jsx: { skip: 1 } }\n);\n// Output\n// <Test>Hello</Test>\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\n/Option onBeforeRender\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <div dangerouslySetInnerHTML={{ __html: '<div>Inner HTML</div>',}} />\n    </div>\n  ),\n  {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n        return domString\n      },\n    }\n  },\n);\n// Output\n// <div>Inner HTML</div>\n```\n\n### Not JSX\n\nIf a Vue story defines its view with a template string then it will be displayed\n\n- `enableBeautify` (default: true) : Beautify the template string\n- HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n```javascript\n//Option indent_size\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => ({\n    template: `<Test>\nHello\n                          </Test>`\n  }),\n  { jsx: { indent_size: 2 } }\n);\n// Output\n// <Test>\n//   Hello\n// </Test>\n```\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n","readmeFilename":"README.md","gitHead":"8199bc8967da0eb244062ee0b4fffd1133c6be48","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.2.1-canary.102.320.0","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-lXFVk5LMiiROvuanfNcRoAC/lLrNlpNYbFOGJ7Z2lV7gw9Uw+gxr+n3nw/Cy8LZu0o+MtHF48NvsI/b/s55ntQ==","shasum":"7c336b7d0cd043e4927c7a508d4448c12e16919d","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.2.1-canary.102.320.0.tgz","fileCount":27,"unpackedSize":157661,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekhj3CRA9TVsSAnZWagAAMWoP/i7JBaZrtAOrA4Py9D2L\nD92v+D4XZ2S0MZqHGa0HjzzvdF2W4TtoyC1PIqVEhMyvVwCfpheFdwkz5uh1\n1r2LbbfkR4j2UrIamnLxl8d+DgI5S4iolFtPMDVglcJfUm+q5B/MjhOFhzbB\nzzl1IAP0Copxe2MlKU1/ZHQxUcfhaw5kNFfed2XLpTTNd35exd6jT/W36mQ5\nv5CZQYnosbLU169eIz8ZbMKA84eoCM/k7RHPhfsNfWoA33e0vFlQjvLi0QpP\ne+OVmrfMn/wJDIJBaltsLGFEc2WKEpnbZi32Lb6TxxYwftyYcSgh8AHTKFea\nHTm0L2zHqDzJUjPt9A/ytOFOG9i4iP8qsl1hHDIyBy4KClPTbEKGeVJJz85I\n7pjL9gtp+okb4TmGTNsLNkfZ495KE3TZ5cxgUS4Thj4lL0aGYwoJLRgMV9t6\nnAPG3T2aSt3CaWNAKx3cx+D7LK1mn2led2rLp3iAvuZ1rbv7NwQpPsDOtgOi\nr+pWz+gDL/dN76MhQVq6A94OOzhLPuvjz6+ofv5ccEDt4+jfJ+DzahtPRRvo\n44aWkuJJ5Y8iCOS6WFetQvW84uONdFZbDlZWco1mvtE6mY6wn+WUK2vfINi8\ncHv457ORIwzObRGPBmLJZV/pS5PSgkkIfVx3+MGnANmjUtg7XnpN6dZTIwRQ\nWPDu\r\n=7DU5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIKsxweLaS6Z4CPOGjbRZKxmEp3gJ/VFP1Q+RTqB+PnQIhAIfrPoKtU/hZPRULdBH9rUG3q00XWfnHzGIZf6VJNGRo"}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.2.1-canary.102.320.0_1586632950966_0.32703312613717794"},"_hasShrinkwrap":false},"7.2.1":{"name":"storybook-addon-jsx","version":"7.2.1","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@design-systems/eslint-config":"^1.4.15","eslint":"^6.8.0","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/theming":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^9.26.8","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/theming":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"gitHead":"070cbcd04241cf5c3b9ac10c1dd762d1c819f121","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.2.1","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-vN8tEF3Dj1aibwmlFn8DZTzSguAFTot+M4w2LSfkBO/8Tu+vehmDvgf3J4dn+GI5sdrLOJSAWc2BXCP1HHwCig==","shasum":"6f05dba321e620a2b33f36470ea72a6c95743327","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.2.1.tgz","fileCount":27,"unpackedSize":157941,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekhpXCRA9TVsSAnZWagAA4UgP/RidsSsu/qMIwHipUdLS\nG5EAzBNpnwOaanA5H8T+ZhtSZIdyqYztAolmYc0wPhwlFS1StLaYcqbxDXsr\nD3/0PQUDN61h0QBoIdNbjlpaew8IqFJKtGjt5xreli8gqN27IRkdlPwFodVq\nREBCda7JxXWMd3RjSVtTMhJ0LeXLZ+Cm5oKeBvvYY1hfm60s6ABWeAxxOMNe\nUeT9x1CdS2tXw79lSx0RiW2d7hAmFiw1uLUOWozlmZPJKwdY9vq0kycI6hpi\nZjxVPyI1LPbh2CMaGnNp4ROYoEEWrP9lN95huZ+mQYiqmzFSoh8hLvMuyZU/\nAOvhoi4csYThtmGUEaHKPyA18XY77Za6ac8Y7/dDG0Cg5ASOIIewgw0gVfzv\njSiJiHTNPv7ojt2QU9yM8W3UTRQRxCWTCO+tynx/78R0/Way1TIULBUJ6p1B\nuqqAoGcN6vM2Wkv+NJ7MCQ8T8dxJJEun4A1N6TnSKRz1MpPmf+/6pE3R7Trm\nTN/tWK4JX9+AUbZ0ls+z31t9rwuuB7uL5mYimh3oiHngKiCOodKUoTYkMrNc\nyQ4uIg9JQnbbGwulG7Ku5vYQVSFfSnOykRRHOFT4lcNnbTkKv3VPAV/sv1ye\npvFLYvxSicQl2paKDp3hjjcwJQOzUHXeliAculveaiD4oX4k5YeVtOOiBhof\nTB45\r\n=Liso\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTR+yiDB0tFi7hMkCvUDZWHTUegpH3z8hOqPGQCUzmqwIgQvSB2t5QIy5wDEvAUR4pfws3O7lmtcJ6Qfl+JyUxdZ0="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.2.1_1586633303260_0.7139326047681576"},"_hasShrinkwrap":false},"7.2.2-canary.103.332.0":{"name":"storybook-addon-jsx","version":"7.2.2-canary.103.332.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@design-systems/eslint-config":"^1.4.15","eslint":"^6.8.0","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/theming":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^9.26.8","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/theming":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nIt can be useful to see what props you set, for example.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation:\n\n```sh\nyarn add --dev storybook-addon-jsx\n```\n\n### Add to storybook\n\nAppend the following to file called `addons.js` in your storybook config (default: `.storybook`):\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\nIf the file doesn't exist yet, you'll have to create it.\n\n### Usage\n\nBoth have caveats and you should pick the best for your use case.\nThere are two ways to use `addon-jsx`.\n\n1. Decorator - Order matters. Will include JSX for decorators added after the jsx decorator. Use `skip` option to omit these\n2. `addWithJSX` - You must change every `.add` to `.addWithJSX`. Extra decorators will not effect these.\n\n#### Decorator\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .add('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => <div color=\"#333\">test</div>);\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n#### addWithJSX\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { setAddon, storiesOf } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addWithJSX('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .addWithJSX('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module).addWithJSX('Paris', () => (\n  <div color=\"#333\">test</div>\n));\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n## Options\n\nYou can pass options as a third parameter.\nOptions available:\n\n### JSX\n\n- `skip` (default: 0) : Skip element in your component to display\n- Options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string)\n\n```js\n// Option displayName\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => <TestContainer>Hello there</TestContainer>,\n  { jsx: { displayName: 'Test' } } // can be a function { displayName: element => 'Test' }\n);\n// Output\n// <Test>Hello there</Test>\n```\n\n```javascript\n//Option skip\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <Test>Hello</Test>\n    </div>\n  ),\n  { jsx: { skip: 1 } }\n);\n// Output\n// <Test>Hello</Test>\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\n/Option onBeforeRender\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <div dangerouslySetInnerHTML={{ __html: '<div>Inner HTML</div>',}} />\n    </div>\n  ),\n  {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n        return domString\n      },\n    }\n  },\n);\n// Output\n// <div>Inner HTML</div>\n```\n\n### Not JSX\n\nIf a Vue story defines its view with a template string then it will be displayed\n\n- `enableBeautify` (default: true) : Beautify the template string\n- HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n```javascript\n//Option indent_size\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => ({\n    template: `<Test>\nHello\n                          </Test>`\n  }),\n  { jsx: { indent_size: 2 } }\n);\n// Output\n// <Test>\n//   Hello\n// </Test>\n```\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n","readmeFilename":"README.md","gitHead":"27ee179e1763a7c006fbe09f07a48a4ecde71549","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.2.2-canary.103.332.0","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-2By+E0Dc2NkPYOukLjD45Zi1cywFBgs+Rl/+myxjpnHWAHMRzC1ydyWEMWkIvvIdLmiFjb8lHa5umr8GmTfFCw==","shasum":"1f7926985d398671f9b0928a11fc821fe74e2310","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.2.2-canary.103.332.0.tgz","fileCount":27,"unpackedSize":157675,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelN9PCRA9TVsSAnZWagAAOYgP/RBmqD68y3yUSsjZDnXq\n5Ulf6xkSbyu8X98uNfdnNaHzowT0bfLeAdzXGyshHNsxpwIBXVPS5Vr+JVJG\ni/KxSw3EA7+ekUpLAGQKz3kz6EmTtluCaiGIrA/Ze8eB4Jte/Wgynqi4Agm+\nS2lbsbzzLzo20A4+kzUXBS3/c/4RNqKhYoWQlc7dJdvuzqEapMb5QhZkU5IR\nlzechtYcACOYScjRUUIi+Y8y4UPaEEwGiQ4pIjT8MW+AVxJ1gk77BjceQa7x\neU3xEbTAsuNBXMFs46S0KrcVo+XkbUiwzF+bPyAmcwIeZXdZMlM8NIJrAqjT\nhYkRzZyB/ieAg/ET4/Cg8ERYcAspuj/KYhxGDOeT9bzXqWcu9Ca1OjQ5MPet\n64ZsT922EmhwcKfDa35OXziRphucexbdoGOokZIha44L1lklcszkj58zecho\niI88kfaKM38siBwYJpjOaG6HRsNGUdj3mEEeMsvBUKSLFKk+PyYWgldy6RKR\nEqI4DMR0XJC10qY6467Fning3fSOo8okbFMANN4bjg9Y7r7hlD3e3P7FtlVs\n3Byjzjxnl8hZmMT8Z4iRB0v7qxw9LlY1QRdV4pMHHqawsms8E8WqooCJZFe6\n0MbK0m2bUiofxDm0HCH1Vak1IF/VdC5avaOm9LI2JgsCqcET7vyXfw3EpIa2\n5m6Q\r\n=OZnw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzEF6W8xy01gV22KTvsoaug8GHZPBfaVvhgfeSfDRCOgIgStyyQtObIfnsOOtwkM3pdJqVfJHTXBACKltdv7XczWU="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.2.2-canary.103.332.0_1586814799374_0.6957401321299719"},"_hasShrinkwrap":false},"7.2.2-canary.103.336.0":{"name":"storybook-addon-jsx","version":"7.2.2-canary.103.336.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@design-systems/eslint-config":"^1.4.15","eslint":"^6.8.0","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/theming":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^9.26.8","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/theming":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nIt can be useful to see what props you set, for example.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation:\n\n```sh\nyarn add --dev storybook-addon-jsx\n```\n\n### Add to storybook\n\nAppend the following to file called `addons.js` in your storybook config (default: `.storybook`):\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\nIf the file doesn't exist yet, you'll have to create it.\n\n### Usage\n\nBoth have caveats and you should pick the best for your use case.\nThere are two ways to use `addon-jsx`.\n\n1. Decorator - Order matters. Will include JSX for decorators added after the jsx decorator. Use `skip` option to omit these\n2. `addWithJSX` - You must change every `.add` to `.addWithJSX`. Extra decorators will not effect these.\n\n#### Decorator\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .add('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => <div color=\"#333\">test</div>);\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n#### addWithJSX\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { setAddon, storiesOf } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addWithJSX('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .addWithJSX('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module).addWithJSX('Paris', () => (\n  <div color=\"#333\">test</div>\n));\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n## Options\n\nYou can pass options as a third parameter.\nOptions available:\n\n### JSX\n\n- `skip` (default: 0) : Skip element in your component to display\n- Options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string)\n\n```js\n// Option displayName\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => <TestContainer>Hello there</TestContainer>,\n  { jsx: { displayName: 'Test' } } // can be a function { displayName: element => 'Test' }\n);\n// Output\n// <Test>Hello there</Test>\n```\n\n```javascript\n//Option skip\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <Test>Hello</Test>\n    </div>\n  ),\n  { jsx: { skip: 1 } }\n);\n// Output\n// <Test>Hello</Test>\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\n/Option onBeforeRender\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <div dangerouslySetInnerHTML={{ __html: '<div>Inner HTML</div>',}} />\n    </div>\n  ),\n  {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n        return domString\n      },\n    }\n  },\n);\n// Output\n// <div>Inner HTML</div>\n```\n\n### Not JSX\n\nIf a Vue story defines its view with a template string then it will be displayed\n\n- `enableBeautify` (default: true) : Beautify the template string\n- HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n```javascript\n//Option indent_size\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => ({\n    template: `<Test>\nHello\n                          </Test>`\n  }),\n  { jsx: { indent_size: 2 } }\n);\n// Output\n// <Test>\n//   Hello\n// </Test>\n```\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n","readmeFilename":"README.md","gitHead":"ca73967d131087ae9a1243a47551708cd60b4f65","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.2.2-canary.103.336.0","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-M7DXoPydIkrL0MEG1/zrCxAdKY7pZaImIQuJhyO/zuvxgyY9TqZh+ujFe2jysdhYNnKcS14C3Z/RAmEFmT+V+A==","shasum":"3e42438ea98c5bf438e9c46be0ee92a15a6f332f","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.2.2-canary.103.336.0.tgz","fileCount":27,"unpackedSize":157972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelN+yCRA9TVsSAnZWagAA89UP/jad++j8KvxooV64szfJ\nVcSp3JcwmMg0UyvLNMTXfBM9Cvgj2ADHmMXAkUhA5vAvSV78UTB6Y0tMaOLO\nKDAvpm16Kwa3R8vy+1f63k4oXigcspJyW3z0CL/kh3Hgtv+Od2unaJtMvBTn\n28KlI0ItHm07+ir09nODxj8k68rZZhvKnDwEeU7MXcsa5dv1+0ELKMfcufLp\nszYhHQX+o982kWi6WgzjX34BUNfPOrLXMcg/7ZIB5RmTPpUt/9xDPl2y/zHY\nWIMaY/XMHILEYrs7MNj8GID5eP3ucRjEeeX9/AUU8/FTdjmRywxMX3+81hzz\n8FoaQQp1FwjXXgH2SqLDT8sIm0sreqC6l6lWOJDHzKuxL/4/ACe2+PS6Cr7D\nL0nSCC7El/Gv01N+J/vJWu+oDKtDPK3a/yUZKsdWfQ4B+n0c+UmtUdGBIQqi\nbUWMBIdhfXSOvu7WzmLHsR2uv+/icjYq6M/a5dwjn3MoKHjgqO5pxqcr5XVY\nDzbeNyltpC7MNwlnDJWOjCVv/h7nP6E+013pT9E6FXxQPQv9eaAYXWVTC4Wt\nWJ3S4KAdGM1o/o434xa03tAA4Jop777eldcEYUq7bL19v/SY6xNIMDsRO7Fa\nhwfrKLtite94MNwvDdK/zE5xTB6sQwuITDyUStMAoXP8p3yXeZUGnjX+0Mc2\nh8ho\r\n=8wkY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG8nmtqaXOU6Pwkg8B9K/1jbGGUAXFehquDO3A+BpsLTAiBA+JRpgN+r+OmbfziFpDER9wsP7e1GQ/a5m1wYb20CZQ=="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.2.2-canary.103.336.0_1586814898201_0.5293244141516551"},"_hasShrinkwrap":false},"7.2.2":{"name":"storybook-addon-jsx","version":"7.2.2","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@design-systems/eslint-config":"^1.4.15","eslint":"^6.8.0","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/theming":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^9.26.8","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/theming":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"gitHead":"3fee52739656aaa21f342f9daeaec47057dd96ff","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.2.2","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-xKn0WrQ/KVwJ3l0oT8DmlsnmCUxdaF578vVIOI412t63+/HrkmP8RDksaHH5culWD3Mu+KnEub+FgLcFfWONaw==","shasum":"9efc29719b32ac064ae046a6d15eb214a5790a89","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.2.2.tgz","fileCount":27,"unpackedSize":158363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelOEpCRA9TVsSAnZWagAA9HEP/A8aniRePdU/kbbSo9ZL\nYJeItaKodJRdABu4jU6fWo13UV7GcDf0el5BZcFYIXNK1NWogyiAZTk19kxz\nTsdpNq5I87zZ+ND7dWv//F/hEQiuQTp3mYmDwvHF6ud5wbnIIgLZZaUu8pob\n6Jy3UHU0HVeketUud7cJ7WzkTdSQkDwrnsSj0e/UTZfP9xC2Qa/EKN0MF1ER\nY51tPb3lU6XJXI1vFPoyM+EC8OdUJ0AYApzRnemygZtdvkkZqEOSa4E3etH2\nzjoZDixJLJVKkzqm7ztoa5dRmp16l3sQR8fKiOeFYXd/6lv5uxFv48PbcXnI\nKoypWWzy1okg0knoxr7D3xvzmFpXOQbnYRqxk9gWPhysh3JXIm5Q31DyZjWd\nlqwW0lPuH4oPjrmPoCprKzpjoN2redsTJNxjcYAItKukdptO/hri8jzcp+o+\np5KepKcmXbQUKa/eNv7aTpfx6jnvpZczrGutj3zEARMx0YTGoi9e9RerB5Tt\nVo8iVb9gOw7Psp9MZkFKs0OYI194eRUnFLVNzlPgazDioqFpyrk5g2tnQuDw\nwtRZ97PMBMNCOeJ3n+CmznQhEaHNI/NJrhjcU3rEmEVvUIYvD8goqpqyXXZy\nnVXacP/zfxtq0OVYGeUh8AML+g36Zd5jEgmBIs7WaB0qBe1HEfZbcZHGM2+W\n7lI1\r\n=Smn9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHGYMUpMw2+buxyYpoTdGRVI2MfXNbhMTmik1sQBV+UlAiEAq87CM6p4AXDgxq27Bq+XmDMA82IMJ7v3ElRbRF55iJE="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.2.2_1586815272757_0.12381392972794147"},"_hasShrinkwrap":false},"7.2.3-canary.104.352.0":{"name":"storybook-addon-jsx","version":"7.2.3-canary.104.352.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@design-systems/eslint-config":"^1.4.15","eslint":"^6.8.0","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/theming":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^9.26.8","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/theming":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nIt can be useful to see what props you set, for example.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation:\n\n```sh\nyarn add --dev storybook-addon-jsx\n```\n\n### Add to storybook\n\nAppend the following to file called `addons.js` in your storybook config (default: `.storybook`):\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\nIf the file doesn't exist yet, you'll have to create it.\n\n### Usage\n\nBoth have caveats and you should pick the best for your use case.\nThere are two ways to use `addon-jsx`.\n\n1. Decorator - Order matters. Will include JSX for decorators added after the jsx decorator. Use `skip` option to omit these\n2. `addWithJSX` - You must change every `.add` to `.addWithJSX`. Extra decorators will not effect these.\n\n#### Decorator\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .add('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => <div color=\"#333\">test</div>);\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n#### addWithJSX\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { setAddon, storiesOf } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addWithJSX('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .addWithJSX('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module).addWithJSX('Paris', () => (\n  <div color=\"#333\">test</div>\n));\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n## Options\n\nYou can pass options as a third parameter.\nOptions available:\n\n### JSX\n\n- `skip` (default: 0) : Skip element in your component to display\n- Options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string)\n\n```js\n// Option displayName\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => <TestContainer>Hello there</TestContainer>,\n  { jsx: { displayName: 'Test' } } // can be a function { displayName: element => 'Test' }\n);\n// Output\n// <Test>Hello there</Test>\n```\n\n```javascript\n//Option skip\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <Test>Hello</Test>\n    </div>\n  ),\n  { jsx: { skip: 1 } }\n);\n// Output\n// <Test>Hello</Test>\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\n/Option onBeforeRender\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <div dangerouslySetInnerHTML={{ __html: '<div>Inner HTML</div>',}} />\n    </div>\n  ),\n  {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n        return domString\n      },\n    }\n  },\n);\n// Output\n// <div>Inner HTML</div>\n```\n\n### Not JSX\n\nIf a Vue story defines its view with a template string then it will be displayed\n\n- `enableBeautify` (default: true) : Beautify the template string\n- HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n```javascript\n//Option indent_size\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => ({\n    template: `<Test>\nHello\n                          </Test>`\n  }),\n  { jsx: { indent_size: 2 } }\n);\n// Output\n// <Test>\n//   Hello\n// </Test>\n```\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n","readmeFilename":"README.md","gitHead":"4e769a41c32e34ad8cb31b3e53e785b12945a090","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.2.3-canary.104.352.0","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-OAZTOfKYAonTmh+3OFLb+VB7Q7t0zzk+z8TlVq04L/DWmXvJkwy7lAcSF+uVg15QNagoF2IHQ10OYufdAa6cCA==","shasum":"0c96d170b647a1c24e288dc06708dce4d8eab025","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.2.3-canary.104.352.0.tgz","fileCount":27,"unpackedSize":158373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelQACCRA9TVsSAnZWagAA1FIP/jKwY+D2QtFDQpBrwtb7\nXz7GIJv/9Z+neUUAtVSVrEEIPkMY5FyRj29hfA5Xo+dmE4QgX7Xjij+s9OPc\nRAIgDyAagrb4IvylRVNGnrIGA+36OgHYNp6DVbW1+pUSoT3prr4PlPpAoiJW\nG9r9XLvsD6K54rdmYUHSvqvkIZd9hKcEcrT6iT445cGMXEtOoj/9bHe13Fo1\nNxo2H8zA1OQt0U1kWOkbC8GFTMYKg9Oi2w6yUes1gBypyo0TgAPcjUWSoNzv\nNYDW2eqWr/XQDI8iBTSKnmagNglEuXRKNBMg1G88jo15xATYQlKufMEQTF8p\nUhh3V6v6kktzvLk4WcRpjB1nzL9SHaPtiM+uLuq9LtLIj7xFCAsE8CdM+LlU\nSAnl7cCmnrWO7M4mEsOOx5tF4tdLBMtyhcGoJ5SNZwaHg5fCWFn/Kb0H/dE4\nj6oUDv8u+vnnjL6VdFWtuaFEB607T9MxVSFoh8fnUo7S1dQJFEAaDNvfoaqT\nzw5WpOE6g7zXt8xUex6u8XNFA60GZw+KGvXIDFVPhVuDHyaAIca/1u2gro/k\n5+Pj9W25ggaX/8IHU7ikhmgd6Yehv/H4d22IQ7TXJmz9+SaHL5odEZ3OgdWw\nK3fYViqESU588GLyb2T911vL5qfwz7Vngb9hY2QZz7SxY8pTmA1pxCZxHhqB\nNOG3\r\n=xzTM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDc6X0xCD1rnBBMGid7F3Srq7FQx9Pn2c5XHSTmb/aI+AIhAKClxJjJ6RQiafgWYN5zxTkTTm+lCbTrhrKMN3cDKSed"}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.2.3-canary.104.352.0_1586823169820_0.8681908118159856"},"_hasShrinkwrap":false},"7.2.3-canary.104.351.0":{"name":"storybook-addon-jsx","version":"7.2.3-canary.104.351.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@design-systems/eslint-config":"^1.4.15","eslint":"^6.8.0","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/theming":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^9.26.8","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/theming":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nIt can be useful to see what props you set, for example.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation:\n\n```sh\nyarn add --dev storybook-addon-jsx\n```\n\n### Add to storybook\n\nAppend the following to file called `addons.js` in your storybook config (default: `.storybook`):\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\nIf the file doesn't exist yet, you'll have to create it.\n\n### Usage\n\nBoth have caveats and you should pick the best for your use case.\nThere are two ways to use `addon-jsx`.\n\n1. Decorator - Order matters. Will include JSX for decorators added after the jsx decorator. Use `skip` option to omit these\n2. `addWithJSX` - You must change every `.add` to `.addWithJSX`. Extra decorators will not effect these.\n\n#### Decorator\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .add('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => <div color=\"#333\">test</div>);\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n#### addWithJSX\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { setAddon, storiesOf } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addWithJSX('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .addWithJSX('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module).addWithJSX('Paris', () => (\n  <div color=\"#333\">test</div>\n));\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n## Options\n\nYou can pass options as a third parameter.\nOptions available:\n\n### JSX\n\n- `skip` (default: 0) : Skip element in your component to display\n- Options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string)\n\n```js\n// Option displayName\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => <TestContainer>Hello there</TestContainer>,\n  { jsx: { displayName: 'Test' } } // can be a function { displayName: element => 'Test' }\n);\n// Output\n// <Test>Hello there</Test>\n```\n\n```javascript\n//Option skip\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <Test>Hello</Test>\n    </div>\n  ),\n  { jsx: { skip: 1 } }\n);\n// Output\n// <Test>Hello</Test>\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\n/Option onBeforeRender\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <div dangerouslySetInnerHTML={{ __html: '<div>Inner HTML</div>',}} />\n    </div>\n  ),\n  {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n        return domString\n      },\n    }\n  },\n);\n// Output\n// <div>Inner HTML</div>\n```\n\n### Not JSX\n\nIf a Vue story defines its view with a template string then it will be displayed\n\n- `enableBeautify` (default: true) : Beautify the template string\n- HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n```javascript\n//Option indent_size\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => ({\n    template: `<Test>\nHello\n                          </Test>`\n  }),\n  { jsx: { indent_size: 2 } }\n);\n// Output\n// <Test>\n//   Hello\n// </Test>\n```\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n","readmeFilename":"README.md","gitHead":"98c5a2ed4b7ddeec1b33a8e51b9b661dcdb2bbd4","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.2.3-canary.104.351.0","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-zzWDYswDwxEVgbIns6yEhqWDvsfk6JXizyugCDNSuWUq3R+ZLBC7spTxp7w6LFFcSQRVpQaWZ6330rVwdjoQoQ==","shasum":"a3c3c7b7911ec6fb1285f1b88554b140b749a08f","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.2.3-canary.104.351.0.tgz","fileCount":27,"unpackedSize":158429,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelQA9CRA9TVsSAnZWagAAwcQQAI04DLbtfRTTr0yx9usy\nCtWEk47SyMNLMp6TfVnGzBBPqV10IyJsLi2Ef/tYbRW5I49EBA4rCa7LvDkz\ndx3w0jmMeu6fWXdG9F/uIjjgAvkP0P7UxlmZCn8J3Fi3EYbLOKIA7TkR7BYE\nTineq0esDaaRL1Cx3b7tAAfKqi66akqDk5LtPEGFNFRlOaHia6qsqfyi1/Yd\ngOf4qJ/Ks4jIrFnY5rC1kI2yiNvbJCznEv4+Qn3G2HRva4ensI/YHjsXXcrH\nJ5oAnlL/yuDLH0MmWgnXkOcKBW8jfJ5ztkeJ8Dtw4TEto3Mr+PhXgZowBVbT\nexUoiQURwD1UJx2k3gWv/lry++XK3AWxMe7fuPfg4suUHSxsSeTb3Vobpbwl\nUdYHTpIJjpll34fwQ7JVcFLM2nUt9URtkJfcV+czDNpVFqEeTxPaR/htlJa2\nOjOVvxslRibWnKdoowYYJQwRf8/5cI32oejx1yCQ88A/RpxPCjQBDrVRF5Zc\nh+CgcYbEV056O+OaHMYQAZ/GZNv5HZ3oX29hVo8aaRC5lVhvuiufpISE/bXU\nGCjXQeQwVQJ6T1o5OAv2D08fCe/FJEIMhIgYbml/RKBgfjttyR0qRrMKoXtt\nMVbzKxbC8p68AA4iUJwMdveeWGqp4xlCvH7VIQ49iebZge7cc7tFiQCHWFAe\nh9zN\r\n=1ixV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDK/RiFi6VVIMzfI0prqWT/HUbGGGV9/uW3IUClE6DwbAiAvSGNEDuISe8Zgf7freZw9yvU7sWRvh2ix7/JdYQPClA=="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.2.3-canary.104.351.0_1586823229364_0.8825890245417751"},"_hasShrinkwrap":false},"7.2.3":{"name":"storybook-addon-jsx","version":"7.2.3","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@design-systems/eslint-config":"^1.4.15","eslint":"^6.8.0","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/theming":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/react":"^5.0.3","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","auto":"^9.26.8","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/theming":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released"]},"gitHead":"84d8fea1dbe74314a0f4be63f16f50f8f8809ef8","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.2.3","_nodeVersion":"13.12.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-8KJNtejqsYHcdgCI7Mf+1UlBG7Ya4JyFiDMwmT5ZixhKNcbJh9yUdF+/yYp4rguhRuCxZ783gs1XiD0REVzDug==","shasum":"754c54407d2f656568bb40cd6d2a85fb92cf1798","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.2.3.tgz","fileCount":27,"unpackedSize":158700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelQF/CRA9TVsSAnZWagAAU7UP/jZMLx7ZWlxC4Gw71Kl1\nEDqf2F/uFzLagj0qbaKU3S/P+2Xd+XkVHa7c2ybyGNAbirftZCKcR4zPcFqT\n+GPpz7tw0Is8roZbuf7IMIaFN5KNfCfXmBnUdUm+oraVhpHf4VqvHm8+SuvR\nBGiLvAC48ftp2o3QSCQWnByihVxLOULSYX/afQLvsb6tfSU7INT5nj8Yvc+Y\nwz3lumBjl/FEnyqMk6ZCYKRc/rOkmqxltJI+B52I6kmSkw8Uh3RIiQCjaFFC\nZp84shV4t+Ui0QTgLvB2SykApZpTL21zcVnW4HdwB9oKYfufQbl27ipy1m1Z\nt6acF6FUux20GZOzK7uxKTwUMrppt9TzlOZ3IG6QHo5B5i/r1cplISwN6zep\n5PEihZ5dmqUj4YbtLORLPwLASJU32BcSKeSfH3DxWR5Va5tUEGAACFEwjqd2\nxedq0q/g0cHuOagJGXXJaX5lRhNpVPb9P7nnITFFntLoZfxroo9kitieAZh+\nmTm8An9aH2xNYxnR14EfVaGilLnsRuJxwDMRhW17A3ll3ADVgMDn1VwkznR/\n6V+zW1y985QkOnbJVxSQ53eee94xacG0LVXP0K6g8TJdYDzHRGFyHN6oQ4OW\n4mBbmA4Rj6jwp61I+Z9y14SiG+1GVKQXs+xzFd+z6Y3SNAlP4TmtHSufUvDi\nMjVv\r\n=6IcQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICDyGI3pamkiptCzm/Ml8gzLMe6kLqQ1Zi/JefMjdI0yAiEAsDZf1mv4zTShp6Eg5ybg3peTnU/U8BL2SifF5UbinY4="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.2.3_1586823551445_0.9906509070465368"},"_hasShrinkwrap":false},"7.2.4-canary.108.363.0":{"name":"storybook-addon-jsx","version":"7.2.4-canary.108.363.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nIt can be useful to see what props you set, for example.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation:\n\n```sh\nyarn add --dev storybook-addon-jsx\n```\n\n### Add to storybook\n\nAppend the following to file called `addons.js` in your storybook config (default: `.storybook`):\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\nIf the file doesn't exist yet, you'll have to create it.\n\n### Usage\n\nBoth have caveats and you should pick the best for your use case.\nThere are two ways to use `addon-jsx`.\n\n1. Decorator - Order matters. Will include JSX for decorators added after the jsx decorator. Use `skip` option to omit these\n2. `addWithJSX` - You must change every `.add` to `.addWithJSX`. Extra decorators will not effect these.\n\n#### Decorator\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .add('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => <div color=\"#333\">test</div>);\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n#### addWithJSX\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { setAddon, storiesOf } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addWithJSX('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .addWithJSX('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module).addWithJSX('Paris', () => (\n  <div color=\"#333\">test</div>\n));\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n## Options\n\nYou can pass options as a third parameter.\nOptions available:\n\n### JSX\n\n- `skip` (default: 0) : Skip element in your component to display\n- Options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string)\n\n```js\n// Option displayName\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => <TestContainer>Hello there</TestContainer>,\n  { jsx: { displayName: 'Test' } } // can be a function { displayName: element => 'Test' }\n);\n// Output\n// <Test>Hello there</Test>\n```\n\n```javascript\n//Option skip\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <Test>Hello</Test>\n    </div>\n  ),\n  { jsx: { skip: 1 } }\n);\n// Output\n// <Test>Hello</Test>\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\n/Option onBeforeRender\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <div dangerouslySetInnerHTML={{ __html: '<div>Inner HTML</div>',}} />\n    </div>\n  ),\n  {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n        return domString\n      },\n    }\n  },\n);\n// Output\n// <div>Inner HTML</div>\n```\n\n### Not JSX\n\nIf a Vue story defines its view with a template string then it will be displayed\n\n- `enableBeautify` (default: true) : Beautify the template string\n- HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n```javascript\n//Option indent_size\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => ({\n    template: `<Test>\nHello\n                          </Test>`\n  }),\n  { jsx: { indent_size: 2 } }\n);\n// Output\n// <Test>\n//   Hello\n// </Test>\n```\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"5249b0d05dc15a4021228cff397094dd625bc7c2","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.2.4-canary.108.363.0","_nodeVersion":"14.2.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-KytUu0Ph/XhKyWkfaA/r8SA6egKN4LR9qXlWFb4+i/yxtzj/UxtJ/NNi2AY3KEdcVJIzstfUwQXFalkl0W23Uw==","shasum":"0a241b16c717aa574d4f53bbb545dddc09faad7a","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.2.4-canary.108.363.0.tgz","fileCount":28,"unpackedSize":167580,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexWa+CRA9TVsSAnZWagAAzz8P/jZiDXbL1Pca/BEiALY7\nMZkJDc9euTEDsZQ8FTCXrS5pQtA+B7YHRUnF41pYkE81JsMEpu9hUEHYikor\nyQeRW/ccBX/11tmoQb8RQruD61tTwr/EnlPyagMBEYkUGNIWk5jgmO6EP2TM\naJ4nnDS3aVczgJNyplPyQ6mdJQPTGkislP4xKuv1ONr76tKQ+PGsoA6YTC4S\ncn9zTy8mgp4Jqr8CzCB51Z/vSQrd9J8lHDLUOGzXZ6WBkqCzNwcjK97yO82o\nKTmjaSBPleS6aErzAHp2w64BsYijvn4tf3k2HkkTtngGl5OtuRShOczPzbOI\n+xHR0m7X5wSSZMUY75+2rbJj5prxfPFv/soJAzXU0G3KeWwXrjXcNwCk8XjK\n07LqdOOrFebTxjsJ/cjp1nwNdARnUiK1JT8ePwuc3XA0xu0WH5t2ndCtEIvy\njnlXcQLN078VI/xNiVzAlj1a2O0HgOMm6WoMYkvKTpqW+zNHdMO5+0VC5qbT\nGXPziruy4Jm6ADhFB0eJlAaMXEnRXQ01IZ3v32omq4VaOhpWg+J1v/AvPxIL\nB/dKa3MGiKrbUVb60am0AVcjjzuGYh0QERIt/4YqDa+/ab/+L7xx+NoT7dHU\nSLNLA5oJnVPqHKEi9o/0/scjjwMW6zdTV+aZHZP53DW+0g5YDSH2MBJIFTB0\nJjwm\r\n=u7ju\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmO0kaqWD8l81hF9XPlJxVKZFcn1X7gnvjmwZfBpIqPgIhAPsXlBxEvoYkpjjGvdBxVWjUH+UwNVK55oeyyVcQmmpE"}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.2.4-canary.108.363.0_1589995197399_0.2913354553533085"},"_hasShrinkwrap":false},"7.3.0":{"name":"storybook-addon-jsx","version":"7.3.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"gitHead":"8750a073ce3d743b9d762f0c189f5bbb7e903518","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-5IXxypZXZDc4v+eCTZK65QqYQcfogSrT+lSKDx6Y6VjN8919Uy4rQVP+rJQFd+4ihacxBkS4xbhG3wel4lezhg==","shasum":"8e723951b66c8a9682771c1f3ff78f4884ff5083","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.0.tgz","fileCount":28,"unpackedSize":168660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2dABCRA9TVsSAnZWagAAWlIP/1RcA92+aSqOpKef/kxE\n78kJFt7EV0KGbKBQXVWcYb/tmvzcdHi+pfqx6Eg8LKCj6ex3e87xG/VBYljx\ny7v2l0KNJ5Z/SFfaCUXlzDtYT5UfmquavlUil/fpixvi2igc8GRwFDBvygiB\nucS5El/JnJOrMf6ERglB/Fe0QN5mvpf4P/0cRJrziVYmbMwX+2AQj92jAMeh\nz87wg4UeNqsLxY5luzq1w1H8rK/sEHYAzTbyhj0rHoJG0u50mY2M3l1YDqXA\nyOXH21vg9zEAPXhbiTr4JHhtKlpf8V9x+mpX4J6sCxQWz5PdKKuClDVGV0Y5\nbTQLoX4MdjLM4wSoa1RvZffUvLyTZKkCVpxvXiZasCfFZB1CikqRLeMqiYGt\n4YjC7xUbjxGn+8BnxmrGIqr9/DSS2bBCc1P3C40zq6vZyJr0LNd7RZsttgcF\nVsjC5iw0cPJR/1p1tT9PBbT3ofD2KmLBYNQ/HfzktmzjdJHFXhMZgDNB6mNS\n2shLH50hUMo/R1BNLEwI0rAmTohZgckYWhlUXGa6YAX61f+kCY6fLrnY9qil\nawBVrNH4YG1xEWmmuqQV/jA6zJoBHM0sHvpU7Dmv6FEitsh4gafECEHHNKda\njbv7DqJfkU/qlrP16n57o0yY6QjuwS8RZyHIrGTaY+Jlf+ehyRenZU/FDE4r\nmgvS\r\n=Zv70\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChy8f1g2o0npwsEz9yeXKtLdvheUKMnocgeJ28vSMhQAIgX2/UkAECSwWduegDUUxL9702AnLn4inb1MPKSVf/YQQ="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.0_1591332864845_0.10562303392730388"},"_hasShrinkwrap":false},"7.3.1-canary.111.393.0":{"name":"storybook-addon-jsx","version":"7.3.1-canary.111.393.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nIt can be useful to see what props you set, for example.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation:\n\n```sh\nyarn add --dev storybook-addon-jsx\n```\n\n### Add to storybook\n\nAppend the following to file called `addons.js` in your storybook config (default: `.storybook`):\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\nIf the file doesn't exist yet, you'll have to create it.\n\n### Usage\n\nBoth have caveats and you should pick the best for your use case.\nThere are two ways to use `addon-jsx`.\n\n1. Decorator - Order matters. Will include JSX for decorators added after the jsx decorator. Use `skip` option to omit these\n2. `addWithJSX` - You must change every `.add` to `.addWithJSX`. Extra decorators will not effect these.\n\n#### Decorator\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { storiesOf } from '@storybook/react';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .add('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module)\n  .addDecorator(jsxDecorator)\n  .add('Paris', () => <div color=\"#333\">test</div>);\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n#### addWithJSX\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from 'react';\nimport { setAddon, storiesOf } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nconst Test = ({\n  fontSize = '16px',\n  fontFamily = 'Arial',\n  align = 'left',\n  color = 'red',\n  children\n}) => (\n  <div style={{ color, fontFamily, fontSize, textAlign: align }}>\n    {children}\n  </div>\n);\n\nstoriesOf('test', module)\n  .addWithJSX('Paris', () => (\n    <Test fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n      Hello\n    </Test>\n  ))\n  .addWithJSX('Orleans', () => <Test color=\"#236544\">Hello</Test>);\n\nstoriesOf('test 2', module).addWithJSX('Paris', () => (\n  <div color=\"#333\">test</div>\n));\n```\n\nYou can also configure globally:\n\n```js\nimport { configure, setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\nfunction loadStories() {\n  require('../stories/index.js');\n  // You can require as many stories as you need.\n}\n\nconfigure(loadStories, module);\n```\n\n## Options\n\nYou can pass options as a third parameter.\nOptions available:\n\n### JSX\n\n- `skip` (default: 0) : Skip element in your component to display\n- Options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string)\n\n```js\n// Option displayName\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => <TestContainer>Hello there</TestContainer>,\n  { jsx: { displayName: 'Test' } } // can be a function { displayName: element => 'Test' }\n);\n// Output\n// <Test>Hello there</Test>\n```\n\n```javascript\n//Option skip\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <Test>Hello</Test>\n    </div>\n  ),\n  { jsx: { skip: 1 } }\n);\n// Output\n// <Test>Hello</Test>\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\n/Option onBeforeRender\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => (\n    <div color=\"#333\">\n      <div dangerouslySetInnerHTML={{ __html: '<div>Inner HTML</div>',}} />\n    </div>\n  ),\n  {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n        return domString\n      },\n    }\n  },\n);\n// Output\n// <div>Inner HTML</div>\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Not JSX\n\nIf a Vue story defines its view with a template string then it will be displayed\n\n- `enableBeautify` (default: true) : Beautify the template string\n- HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n```javascript\n//Option indent_size\nstoriesOf('test 2', module).addWithJSX(\n  'Paris',\n  () => ({\n    template: `<Test>\nHello\n                          </Test>`\n  }),\n  { jsx: { indent_size: 2 } }\n);\n// Output\n// <Test>\n//   Hello\n// </Test>\n```\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"0f6f0312f04bb17227ed2ae388040dcaee2388c1","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.1-canary.111.393.0","_nodeVersion":"14.4.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-DC7e5O61Q32IbPBlpPJPTfV5AKXFTbROGGp/o1I24GQuz2EIjzUGr7Elndvel3Gwtvc+yxAaSP6kMeuDjS185A==","shasum":"28f4084f62ad746a606a5f3c5141fc0aee958d2e","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.1-canary.111.393.0.tgz","fileCount":28,"unpackedSize":168677,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe26QmCRA9TVsSAnZWagAAqp4P/ilxhrUIHw+rxFo91eBE\nTRl89GqJHEailzTcb8Ncek70YaqGf8QfFRLOfjZch+TUII13u1Bsx9+8UEk9\nazvAu/7QeGEb3zarjXkJOycbRFnJo+gaKjDKZOTbbu1NYHeiJvMWFFCRwmGV\nNtmke6WixUqTpxfGI6RGv7JatrnszU5DQDRL+JN4HKwlMwhJA55Yg4MoJoFm\nLbAfC3DNG86UaTT+Uk11JrLm5I/DlXX5LyLF5yD+uhaDBf4FDZlU+c5F927Q\nI+IBuDatuYLdrZu7StfFVMMFJCk55CNXNY4girfreplpwsyhWkDmv6yYbDN7\nLEnpQkRoMJEGeiKynBZMxEf0hgjJ2zteqBcbRC47ew/lKOAkp2LiWq9h3RPb\nW9E/SVTGtlF4k3DLrklJ8iaMcPwwmkvf+CLhpzDKfhNSr4RvhjTwAZGK9LmN\nIiEK2cQHKF2SxlUwNDpIvdfdtyNi9V+8KTOxBgr732+FcUTJ7M55khAlY00U\nFliE3V14hZqxLr54G/hE2gtNcJgdzk7IZ54EKKoaZEIeMrzZGooOdb2vpiOq\n/o2/BzAPYxva5P4S59yvdCjjyBlRw9pU7Vh9J+9FLod58Hj73+JrvllRD4i3\nNEy+nCjyHD4FgI7sEMEDWmLXwZ5iPUmBDEf7OIjb+0i9PGx2dwf+EcgiiDRE\noVBi\r\n=XKxK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA41XWOTsvRTItwgwS6VDMJ1K42ghEIeHcYymrAZJHlsAiEA8xc0c8GU2cowwD9WB8+QWltg8Wr1vM5gdHNPhVW3a+0="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.1-canary.111.393.0_1591452709506_0.9153085236955543"},"_hasShrinkwrap":false},"7.3.1-canary.115.399.0":{"name":"storybook-addon-jsx","version":"7.3.1-canary.115.399.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: [\"storybook-addon-jsx\"],\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport \"storybook-addon-jsx/register\";\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require(\"@storybook/react\");\nconst { jsxDecorator } = require(\"storybook-addon-jsx\");\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from \"@storybook/vue\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from \"@storybook/vue\";\n\nstoriesOf(\"Vue\", module).add(\"template property\", () => ({\n  template: `<div></div>`,\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: { skip: 1 },\n  },\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n\n        return domString\n      },\n    },\n  },\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true,\n    },\n  },\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = [\"source\", \"module\", \"main\"];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from \"@storybook/addon-storyshots\";\nimport { setAddon } from \"@storybook/react\";\nimport JSXAddon from \"storybook-addon-jsx\";\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, \"../node_modules/stringify-object\"),\n  use: [\n    {\n      loader: \"babel-loader\",\n      options: {\n        presets: [\"env\"],\n      },\n    },\n  ],\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"1a127fcc02185cfe1808f7de84579219e4b2a532","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.1-canary.115.399.0","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-WrTm/rEIfNV6QJMjypTBvq+CEcCugnKEqS1zTb/um+aYx0x/BEuvBeqpPlUE20SeoRZDMDYhnTvJCBVhLEJVDA==","shasum":"76f5424679b5d43c32bc565611729f9e80a23fda","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.1-canary.115.399.0.tgz","fileCount":28,"unpackedSize":166664,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKdnCRA9TVsSAnZWagAAuvQP/33bWziiNWHHA8aHZPpv\nRW57WZB1flpwSHI+OQnJT+jrzEXYXQhU/+fgoaUN/LyrYbKQGkTwZ7PrboTn\n6n0vXrmugytTtKuv26vFt43G4bwda+smTETF40nZYM1cv85w6O4Gn0wTTDtf\nxFtK57nl5CSO54nczLyHq7YwttOaLxm15tQ9iGEqa5tIG84ySihKGCZDIN+Y\nvWl2BCrotQ5e6Qn/S/xLr1CK3u71S2D4J9TgN0AWxooR6jLyGL1tT4bZ2Oyq\nrF/EC5iN5u9+GT9Kdz735zwG7VMHYKNCtLDszThr3KC688tnNgm9N3nSjITU\nfBbieyPzkndwoIr/D6WPGnp1W0meyQy7I4iLH0BdUhq6j/x8ghXqw4GDRnT4\nMFXydFTC8HwZ2kDb5rXZfWJrmH74SvGxato5U4OXJAG+A4q0H5ERgA9BR8W7\ndpKzeDoBZB87K5LQROrvls4ZfXpy5s7TinW0V4RbAMYRn8pAzoThHsbBO+S8\nHgaYzSsOk4wxpjBc1S7DXibZ55shwAH6jqwxzHsSLJ8n8B7d4zDcJs27f9mb\nnK3Fa9VshvEhdAFonro7XBcvo4CpD5G6XzkYP88qL3AATgDohdd5cZzbvaA2\nPrN1POf53cceyLERKOzUQyDuIN82g+NygwdXQIuRFB0QF3Gn+Y+DMAEkvsjr\nfcTk\r\n=9e4p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCeiqmRbKVu+asCy46gZ7Ud4jhqepa98n09ROGtTWc2RgIgfoapov4SX3GLC9HGLiRc8n8nVttEhROs+1FYNrZrC+c="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.1-canary.115.399.0_1594402662917_0.5952780817445595"},"_hasShrinkwrap":false},"7.3.1-canary.115.404.0":{"name":"storybook-addon-jsx","version":"7.3.1-canary.115.404.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: [\"storybook-addon-jsx\"],\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport \"storybook-addon-jsx/register\";\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require(\"@storybook/react\");\nconst { jsxDecorator } = require(\"storybook-addon-jsx\");\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from \"@storybook/vue\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from \"@storybook/vue\";\n\nstoriesOf(\"Vue\", module).add(\"template property\", () => ({\n  template: `<div></div>`,\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: { skip: 1 },\n  },\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n\n        return domString\n      },\n    },\n  },\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true,\n    },\n  },\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => \"() => {}\";\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = [\"source\", \"module\", \"main\"];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from \"@storybook/addon-storyshots\";\nimport { setAddon } from \"@storybook/react\";\nimport JSXAddon from \"storybook-addon-jsx\";\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, \"../node_modules/stringify-object\"),\n  use: [\n    {\n      loader: \"babel-loader\",\n      options: {\n        presets: [\"env\"],\n      },\n    },\n  ],\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"76d0d12eb4dc0af8f071798561cc306c7a94629b","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.1-canary.115.404.0","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-PWwkeFpV1KAHhTiqUbxu0R9PCPpd3sE5d8BE6cBPZy3BNeO/woxsghLqtUDnqU8Vxd6Iyip9sVDR7ezILYkKZg==","shasum":"416fd49cdd2f551e5e752746f7d99a173c0366f6","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.1-canary.115.404.0.tgz","fileCount":28,"unpackedSize":167425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKfaCRA9TVsSAnZWagAA0fIP/0u52byyL1kQj56FXY6E\nMsc4pp2kZH7QaVcXpKxSt6VV7dD6BrZK3dJmrmK5JJSZflMCB7L7hPKbpn22\nyUiXpSmEPKvTRtXtDYTybSeA6sECdw08VOsHFnLYQk9N8N7PgInL9X6kfEy8\npLWLar5Kw2kRjkKIOKerbSFXgxq0a7diC1rPYZhVC66xXvWwN5C07+pB4rAr\nRdFFF2N7ug+1AMzh31N7Nt//NWLS/pnz4Pp+WwT5ukXzs7ydOijs1xhRgk+p\np0VIh7mqEIGK4EkZts3+jKwqi6qxyYz94moMyOHe/17H2My1hVAkJ+VnRB8s\nZrr/qi0VWBfK34f67L7cRbP3KcMszQcArPI9PjRwulI0HdsQH9ePgkNmBz3v\nytGqluzfEx2hIe3oFQC8MWv/R3PUnMIkd1yEjj9+OCgRjTFdPPl+0XNb/EV6\ncPVQ3mQgZ9+PlvmUFAFTu4xC8242WWOh9dta2OIu7DVAJT3fRXOrkfGdKGjK\ngxhuHgDqCcNja/bfCONf7/nnojowUJCnCOn3dY8R+J7PCgU+QAw57tvN1rUY\nazrDFzOMx6od0oP0btQ/rejDi5XXlHDEMU1cQAX4QlFjVToocMaWKth6nSJZ\nUtw8Y2q71Dr0UMDBbzDQISfhX4HpAb8C/BfiU/kghMzOAvl/y0GVlUGnsDBy\n6SlV\r\n=NOG5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjQQbpQUPxF45C1cocEJrDMfzGymxzHZnXDkDD7t6BuQIgeXSdBoDsOpAjurcnrVPdjl3LjS1f5qC0m+7fD94xbko="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.1-canary.115.404.0_1594402777843_0.31896992722556505"},"_hasShrinkwrap":false},"7.3.1":{"name":"storybook-addon-jsx","version":"7.3.1","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"gitHead":"8df9e1ca0f94d08b4bd988d8d67f248f135af744","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.1","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-6WYIimSy2/mJBRe4KyMAzlGmadevyohHZnaGW9D/NiS1eFmO19C5+25zF9mSfo3ec11ZmvUUy66RWKBzrQ7LSg==","shasum":"df9ced8bb8d2bf77bae0b14a8fd29adb8d0d4f6f","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.1.tgz","fileCount":28,"unpackedSize":167685,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKlgCRA9TVsSAnZWagAAsf8QAI1J86DejVIq/IdCsOFg\njZVrljXGLkoqFSDvJv3BMgeJEBWGas6yVi1Mh8af0ImL9aqahukcG1s44XPW\nIehrtTefwrYkemdpqJtZ9MzRyfk/bCu6CFpHzDX2JG1pobSSfKu5/XT++jUQ\ntHTa0z+vPkxrB7RhzxjcA3yZfwGdSqbX0N419oiFg/ts41bmzGNke//wb74A\nn0azANHcG/+6Rdiq45GZnsm9BNtmSpGHm/qji0hB+XbJLAeOks3BqDqdGBCE\n21IS7NYplMblh1g+p8KYFeesaL1H+QZ8vEJLhpQpsrUy4hNiyG3W8WS5nWFc\n3MVrtXv2yhN6krLqaWHGevpBXgnZv7Ksl+2uOm+7CcXhiVkgSRuRnft4DhTK\n+SV1OshafEmtg18+ZFwzKTsySqwkSNZ/VpHqfFFQ9+pEvgJMzT6xcoR1mwz3\nYkVmGdimOwb5wHXOg9Ez0/2jDxxVAtKywZs/kAv+578v5WqE97K4XVIY9hDW\n8J9caLRCNPGurXw5MCIVQ9gxd/PDB3AuJq2kB6ZvyI5uXlVwOVG1rlz2hqMT\nj8x037zEgaF2RI70e5V2f6a5Dn96vaG9L+G4qRY3TgMtZPWDTo1++RGUPavb\nbEIUlw29LmNNP8GOIUhef8L+uztUyaa29QmILN4rFw0FKePiN5pNo3GmKjrf\n2LJn\r\n=gzrA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIToDHA0I5lXGlhANq4VnLdLX2T1ghf1pGm71xthwAWwIhAMXCfDhVdjvCU9yP0LY7zCpNtOxWnDmmtwowgu95IATf"}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.1_1594403168365_0.5285430282889916"},"_hasShrinkwrap":false},"7.3.2-canary.111.415.0":{"name":"storybook-addon-jsx","version":"7.3.2-canary.111.415.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: [\"storybook-addon-jsx\"],\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport \"storybook-addon-jsx/register\";\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require(\"@storybook/react\");\nconst { jsxDecorator } = require(\"storybook-addon-jsx\");\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from \"@storybook/vue\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from \"@storybook/vue\";\n\nstoriesOf(\"Vue\", module).add(\"template property\", () => ({\n  template: `<div></div>`,\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: { skip: 1 },\n  },\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n\n        return domString\n      },\n    },\n  },\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true,\n    },\n  },\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => \"() => {}\";\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = [\"source\", \"module\", \"main\"];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from \"@storybook/addon-storyshots\";\nimport { setAddon } from \"@storybook/react\";\nimport JSXAddon from \"storybook-addon-jsx\";\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, \"../node_modules/stringify-object\"),\n  use: [\n    {\n      loader: \"babel-loader\",\n      options: {\n        presets: [\"env\"],\n      },\n    },\n  ],\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"40f30aa20b937b705e32fdbf66a8079daa1607a6","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.2-canary.111.415.0","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-oebDEiiOB+HCUkK1g1uMtUOHs+XrcvSVFep5+aaG7N8GK5Hx92BNxPwIDOtHCcgEwR3CHY87xEin65IhWJpvkw==","shasum":"40393abf13b7d0f1fe88df9082fb1c58a1540521","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.2-canary.111.415.0.tgz","fileCount":28,"unpackedSize":167702,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKqICRA9TVsSAnZWagAArjkP/R9rN7NNAuPGpJpf42c4\nyAfg/JgCknU2y5gfPxCIdsiU3QsrH9HyYVZLrnE9pTFoEUfozBg2CwPMlnSK\n3SGP+zbwTpJ3u6mXXF60nuM5WpaQOZtmQdJe5K/iSa25gD3OxD+4nD5SJHPj\n3cbucjCdIGCMNdbnA4jZTda/sopE+56ZQvyyo6oVj5ikUhctIEyDij4Hi0Cr\nyMfzBMrugWqOpjrLzLWT+zqh/1YL2isggBmNj+3C1hb7B/AahsENdqVQsvAa\n8cMFl4C1CGR53/p9SIeS77uvu0M5iorLhXpS3fybjCQ9sviPZo+KAjEHAzTZ\n+YLhSooOvX+MAcOm+daVaGGNLuWqUOAaTMjKc6M23TZAfsrzCqbX/peja5N1\no3ea8fwbzYMmNG3E8AHW+QwA4nafB8e8A/f97CK/ozhHPe3fB9N6H/OMpe7o\nas5t2lBY0OU814+EGg8ZrbkSQEq6PY7vwLvi23YL4REUmZFPVxvSUwbQr2y2\n6ggtBSEOjlhfNLcEU4MgyRK+WpB5Y3nh9b32q8XfZTeOd+2Fwdt7jLw9eHyZ\nprAGCA6G13bLRnz8OhHZVA5cC5OLXggTi3gs+UefIGtHcsibeKFE0pIakODJ\nKHGzxmQM6jyDor6IyNTlP6oTvTm9i9YlJm6bit0Ch7b7m1R3SXIOaBvrgMLo\nqn5b\r\n=Qtpw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCh6f6wjUljD92euynWD6WzWwvkU49dLfrZx8wQ2NhMpAIhANrXmaic0s4Izj6j9EyzwqPsQBBJTVt/ZGv1kXs7pn0M"}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.2-canary.111.415.0_1594403463720_0.47888920542423197"},"_hasShrinkwrap":false},"7.3.2":{"name":"storybook-addon-jsx","version":"7.3.2","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"gitHead":"155eaf76a5bdf2b397ad3c9718b91a66f52959e2","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.2","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-heuAkZo6aeZUBj+6ta6Thw8KdJfrnQoGeN/Vh3PHN3F6FrNSl5+MEqCUr+WXjUb0NX+wTNw74YyYt4weIdMeGw==","shasum":"5a6e451f1445edac4330d1393f30a45404fd4ab4","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.2.tgz","fileCount":28,"unpackedSize":168733,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDzKWCRA9TVsSAnZWagAAc8UQAKM2MdOGZSLl1fb8gjG8\nPknwWeiqYBuCmJxYA86L6uCErIl8B2ynxCKhVnnakhZwt3r/5tn6nf3A7yWl\nENlmNtlUngfb7NeEjfSX22z2uLnb12ii3mUScmXYuOBVENBnwWFsmplInw43\nW8qvmDkTI/U/bAwzDM2G5rxgaleG/+OfgnYtFM3F6MGiVL4yvyAIbsfjMwFc\nOQeJX9S0wA8Fe8EkHgAJLHtUHqVghVwIpZ2SzFWPYiq8C0I5sC9F5K+S54kx\ntI5McEtO7j8IovGcGOT68iPaGmFdoTXpFGpeSChlerDZC1TGz/S6YGelWvcE\n9XxvSBvKUIHTiJzKEfMVoz0vBdP6ZXJjhUfQpE2tGW01HO15idzdCW3ui/6u\nQw9k/3GpfXfuoqCP+71Lv1JkC5FrNMTuIARihs/R0CavEzuQaw8sOmVBg/EP\nImIw3QQIgtOp3BkZD2S0ihxm7H45PI+WAA4gMXHu34xGF1r5K1cXIvuxtQS1\nFAq8I2VwpTl9C0Bee4BRsKoYBSARVw9pUWcGoWUjyd1WniknmwjM2anIYVLd\nDkQ7/YR7LtMtKhnSFseJue68WB9vjK56PyQFMfoKdbsAfD0cCweV5L629+sW\n/q7OjaK5smJBS6uzCHJ+FxwvptRC9CV6xtSTgGko4tkxf3zldeYVH0fVeupL\nNbFR\r\n=6yzL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDC5cqtGyuh3ZbG0pElKPSLgs9NgAzcPmjebVTpLvgKXAIgOeQMMWy7FYNf17yfeTF8vC4CsdhSS/75yitRnGoZftQ="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.2_1594831509850_0.9147264313180037"},"_hasShrinkwrap":false},"7.3.3-canary.111.432.0":{"name":"storybook-addon-jsx","version":"7.3.3-canary.111.432.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: [\"storybook-addon-jsx\"],\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport \"storybook-addon-jsx/register\";\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require(\"@storybook/react\");\nconst { jsxDecorator } = require(\"storybook-addon-jsx\");\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from \"@storybook/vue\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from \"@storybook/vue\";\n\nstoriesOf(\"Vue\", module).add(\"template property\", () => ({\n  template: `<div></div>`,\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: { skip: 1 },\n  },\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n\n        return domString\n      },\n    },\n  },\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true,\n    },\n  },\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => \"() => {}\";\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = [\"source\", \"module\", \"main\"];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from \"@storybook/addon-storyshots\";\nimport { setAddon } from \"@storybook/react\";\nimport JSXAddon from \"storybook-addon-jsx\";\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, \"../node_modules/stringify-object\"),\n  use: [\n    {\n      loader: \"babel-loader\",\n      options: {\n        presets: [\"env\"],\n      },\n    },\n  ],\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"4c6ad220f68c3842df3751e7ae6cea34a7da592a","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.3-canary.111.432.0","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-f3UW/0hVM6UPCms7rpqZdo1k8f/ZDwj7r9SsA8iuvXYP4Ko+ezoIQCNlgsaOyCjHUoG+67p0Medvx/RCUG2ivQ==","shasum":"fde2f5247d10c95e04709c18b1ae3327ffb50eca","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.3-canary.111.432.0.tgz","fileCount":28,"unpackedSize":168750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfD0RsCRA9TVsSAnZWagAA3KYP/2zNPIoSuQIPVcPuEptQ\nx/k10pV9aeXF0X213YA0tdxG2DrVGkzrvrke9hnzWgnCbZdRifaDoJkF0+rR\n5+4GGOVppwNQqO4BKGoXycP+6qPw4vLA0N2yFrzfGvgbosf3KnHRtVvRS6kk\nxHkSPYQMYlA4zxYPkgaResHAGYxo3gpJb92HpvkyJAihcnj6MRLwIzc/Qfnc\nreTVR2gd34JLV3rZ5ujkgmw4K/6Hdpydf8ntJBuP0vL8Xg33vfwNUuaDH8V4\n+fJLkc9Tvb5MOquB7pCp0DwYn0J0BTWespK/tAyIW+8AGBZaNWHYpdP9sa9b\nt+9Rv8DXNM2Cb6iG+N8kfS18umMtZrC9CVe62N290Lfzq/iOMNZSsXYEfM2c\nm9wIIMGR17y+lp/9MysIGF9Etjc2i+3k0BVfmpt058k8WYp2+fsajHlO3Zph\nCeVXEHs5SfubDo0CsQbVcen2O92R26fmbyamyzLM42lE42GEzBSnwJEm5Fr2\nZVWT/CW7uWc+b9bSMmR0HwnNmYpXTBtXTea2ge/nZPZCCgGmM3Z1rPaQ2Nae\ngPa7Za+ai2i7Id1pMx2gjfPYdNdb/JrFDPD+5Dyh9yEsjdtVkse2f7VC2V7d\ny+BiC2HL2H2wCf7pdkPOrmzzBYN7muzr7FaAvSfWU40mvgD8k6C1oWxHejWl\n839u\r\n=EUbu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2qEaoxDbeg6VZOVIpO7WBpNxdJunQ4fPIZf0epKnNTgIhAIVFWPNxil9VTBo9fuE/doWXP2jTzwxl4UbamHGAmHt0"}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.3-canary.111.432.0_1594836075614_0.46628781904714156"},"_hasShrinkwrap":false},"7.3.3-canary.118.437.0":{"name":"storybook-addon-jsx","version":"7.3.3-canary.118.437.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: [\"storybook-addon-jsx\"],\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport \"storybook-addon-jsx/register\";\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require(\"@storybook/react\");\nconst { jsxDecorator } = require(\"storybook-addon-jsx\");\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from \"@storybook/vue\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from \"@storybook/vue\";\n\nstoriesOf(\"Vue\", module).add(\"template property\", () => ({\n  template: `<div></div>`,\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: { skip: 1 },\n  },\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n\n        return domString\n      },\n    },\n  },\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true,\n    },\n  },\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => \"() => {}\";\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = [\"source\", \"module\", \"main\"];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from \"@storybook/addon-storyshots\";\nimport { setAddon } from \"@storybook/react\";\nimport JSXAddon from \"storybook-addon-jsx\";\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, \"../node_modules/stringify-object\"),\n  use: [\n    {\n      loader: \"babel-loader\",\n      options: {\n        presets: [\"env\"],\n      },\n    },\n  ],\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"dfeee839cb4dd0a02e9cefcd6e77dce46b4d2914","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.3-canary.118.437.0","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-tLqXcsw6Al+aFAJgF5Q/8Szkbv4oomeBKCsacgA+sYb39aPk1DZt+QCBeuipefDAjOdmU98LXOwAk0HVAaWmZQ==","shasum":"c36a66e3bcae9e7780da6f8452f5295936a3a5d8","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.3-canary.118.437.0.tgz","fileCount":28,"unpackedSize":168750,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfELFsCRA9TVsSAnZWagAA078P/3t3JkrQ/S+HIsykGVlu\no8tzUNuIHEWPnzA5h3KlvLlUmrYI6+asTGOkE/RBiTUVQz3BpQ+hk4Jc+q3F\n8AYrYdQyBMH+TJb1zB8zSd4XnmEumQ3x+ipnP4YQc5rYplqFtPFcVJ4D7aCt\nWuBjnxNWiwmQ2+czsBP4YPvhae9dnhn4YcCrCno00jS+CZcaxjwISCHENlLB\nUggoCyj8pZc4QWIuQrh3R6BYKkyNIVwIoJnRu41N0jJOKK+eBdZFmxXX3N+0\nUnd4ZoQ7ZEWfuX/uugfJfOuSR20e9IBWU4QSxYWs0Z2QwcFv8q1v1WR/OuZp\nfDDVsIJEwagORrWYg+cspYJDPf5jzSp1v6cp0DidfoGJBXvNW1pCXaXVkMsX\ne7UprSyBG5bWao5G3RDQ0XhvBPS50JRWvROVAR+TeoNo9tWTr7XDb6L/z1dM\n9gbBFpdJ7hyhX132mc06JfvV2TaItSZy6aT8+nkwXUfeizAYFz6hUY51+1ls\nWvDw09JqvFtunL9y7W1Kcq7EmeXETVuBU4p0wfdo47mr9MCWeI9J6QO4nRwy\n61aEVLe456vP1f60z//c6jkk6FC+kp7y8x/j8yTqJPI0gXPGohgfLo8CNaYc\n1LSZNVxHhuX8NB86jBjQuRntseqADmj5PrnCntm8NCiRmYHE3hl1umPG51zw\n7INE\r\n=XQ7L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVBLO5BWgg4zj93/502rZy3Lj63F4QeozzyonUWQuTuAIgB+MwPknJG70VOiCZFwiIf4Yhr3RLAhGicP4nWOafPTA="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.3-canary.118.437.0_1594929516118_0.13785656941046254"},"_hasShrinkwrap":false},"7.3.3-canary.119.442.0":{"name":"storybook-addon-jsx","version":"7.3.3-canary.119.442.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: [\"storybook-addon-jsx\"],\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport \"storybook-addon-jsx/register\";\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require(\"@storybook/react\");\nconst { jsxDecorator } = require(\"storybook-addon-jsx\");\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from \"@storybook/vue\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from \"@storybook/vue\";\n\nstoriesOf(\"Vue\", module).add(\"template property\", () => ({\n  template: `<div></div>`,\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: { skip: 1 },\n  },\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n\n        return domString\n      },\n    },\n  },\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true,\n    },\n  },\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => \"() => {}\";\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = [\"source\", \"module\", \"main\"];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from \"@storybook/addon-storyshots\";\nimport { setAddon } from \"@storybook/react\";\nimport JSXAddon from \"storybook-addon-jsx\";\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, \"../node_modules/stringify-object\"),\n  use: [\n    {\n      loader: \"babel-loader\",\n      options: {\n        presets: [\"env\"],\n      },\n    },\n  ],\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"436f93965d620a258f835c42838e6ddd9a377d89","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.3-canary.119.442.0","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-csv20NsYdeQmw2Adei3zi5KyU+d3q1U7EuehrkVHvhVE2jevLdIFSGlXUs7VKrLy1eww6gCZ7mWqrNSAqXrgjw==","shasum":"2dac36eabdd21caee0142d29d3b195b8630bc23d","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.3-canary.119.442.0.tgz","fileCount":28,"unpackedSize":168764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEfWvCRA9TVsSAnZWagAADUIP/RJXqfemZqHuOvYKkaEU\n2P6v/VL2+Rhm4mo62AWlvzWEIDUXA+8Lw1hTlKgS/J9+Mdiyyaz55vYIkSho\n9mMn/106dHCeo9KFHCMcSDfqdHmFsTgzljzjcjq9pLTRD0ZUJyELFaeG931a\neTBsoMGTv7nCi22DXujCZqN3j0hwvp+UMkDkGgBvR9Kw5EJ057TWXOU0qJ+R\nPIThRaim0hKCwyFs9xK5bSWjR5Bi0l4XpFGiDzAcWFu49aec5nfxieARQaPb\n+3wgs8gfePcz655L9qt0etccMGf/OD0SG9eybPmQbVYRl2gYxeXhmnoKpB+t\nG2mtWIQi0dLCiTHkaHuiIQvzA5t+56EmvCOAi4V3Ty5n6GYmiawsnzE/JF75\nj4eSDr+aLHThdXWJl9KgMytON6mLwbawJNzNX5SmDttDuxdqX7vA3RZjbmZI\nCuJQo18OOxP+XC3pM1+6OVloF/3cp9PHCnoT+ynI05AUjUCsLRWDh2hc+OOp\nb9ZVjb/u994yMMz4tQbBjfImAEROCdk3JCY0lWh5dk6lkB9f2PHEsqT4BU02\nOP1fyKGgR5on9kWJGGFbNB+oFIPDBwmZSzVOq+eeBIwRmA9bK5/X+Vd7VuDS\nUgi/UxmIU4EXrPC52Qa5BrUE/W7kf3LRncboUcdgtrMd4cs43AqOt1b4WlEU\nZx/9\r\n=TOup\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqvcJkBOh9/5mh6OXRdgRLAcoRqoLNIOW4bw7VEjQUqQIgD5rZlgBnO05lIFogD0ZwqO+TNLy+iA2UjttkYMrRBRw="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.3-canary.119.442.0_1595012527227_0.4466897666455938"},"_hasShrinkwrap":false},"7.3.3":{"name":"storybook-addon-jsx","version":"7.3.3","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"gitHead":"972b51448211ae66656fb53a4636d0d49fbb8c76","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.3","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-GN793xr8Q5E0ou/6l1TgPoA86K1Xw68brgDDREEsUwXp3bZz7wpsJaumm/sclgfLKC3AVcxnd09BKrITVVDRNg==","shasum":"40a85783466809e207203039328df62ba4559bf8","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.3.tgz","fileCount":28,"unpackedSize":169019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEfabCRA9TVsSAnZWagAANZIP/1K376RywwU4s4/i8GtJ\nz4rKp6r3Pouyfr9ez/yBD+06YVClQ26c9VZgxd2FghejjCyqa7nBgP5bK/pb\n2zVgl9mxW78cYg+54ptZjE6mT8N82Rql1QtPxMN0+KsveOQ2wJD3ddNMZfwv\nXL9bl9H7C9cNH9+9XsDSWN9RiV3G/Falt5z5kg2QeINkEfwzb8UBA9ckMJMc\nLHWZpePV9Rr2zVOy72msJR/JUmxwdKAMkZV9K1CuI3ZYpAyDj8IX0pOjKJF1\nKofh/mLAcYVg1ve6GziFrHqEgP4p1HYEQyGyD/6mJaqC+ozEyLtDv2twTFYm\nW501VAaEEpJxQkDvr2jpjyDY/Q0gxf4IY/0/V953srxAGZEIip7toF9qJNx0\nlurDKHLUJJB+4sUchKhIBuXIj6EDw1TyqFW8Y6jchRzRnNO3OjjqZtuX5IQN\nsxPBtY4xRvvjhZJcxmKEB5OGBILNEC2gjmugPP1uPjZqFaDFPm8T5X9OU6Yx\nuOo31gKdBUnNcVZ/Pa+sD0SKeLZOYkobIuqycY4gxR8+p6BEVKTyjc5eF0xs\n1lAkBeUMde5AnxdQEoA8JWC3OgXAQCK6nnPmKeMmOJS5dRUJMGN1tNSsPOKu\nsQntCgGeMEqdw+SJe9/P/srPfPaJbv6Dk66xxhhrviu56qp3Y1UzQbC4AtE4\nRIn4\r\n=0ME7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBLOpjUgA//hyxXG5L8hrsb85ooZXwKaDtVhSg6/N3rxAiEAn0OsUmAxVvR+khLGskBDALGK37os/h9ogLUvQGPjj0Q="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.3_1595012762966_0.6439482410675854"},"_hasShrinkwrap":false},"7.3.4-canary.111.458.0":{"name":"storybook-addon-jsx","version":"7.3.4-canary.111.458.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: [\"storybook-addon-jsx\"],\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport \"storybook-addon-jsx/register\";\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require(\"@storybook/react\");\nconst { jsxDecorator } = require(\"storybook-addon-jsx\");\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from \"@storybook/vue\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from \"@storybook/vue\";\n\nstoriesOf(\"Vue\", module).add(\"template property\", () => ({\n  template: `<div></div>`,\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: { skip: 1 },\n  },\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n\n        return domString\n      },\n    },\n  },\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true,\n    },\n  },\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => \"() => {}\";\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = [\"source\", \"module\", \"main\"];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from \"@storybook/addon-storyshots\";\nimport { setAddon } from \"@storybook/react\";\nimport JSXAddon from \"storybook-addon-jsx\";\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, \"../node_modules/stringify-object\"),\n  use: [\n    {\n      loader: \"babel-loader\",\n      options: {\n        presets: [\"env\"],\n      },\n    },\n  ],\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"2ede6c80b4dd4dde1c0eb8c8e1975c8b83144ef6","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.4-canary.111.458.0","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-UGHiWjwnq8oYQi/N9E2dyW6YDmPOpGhGPVpJ7VKY5pt/JS1z/hL/mLl1OO7v7Nsa8fgiay4zyRexDgMnVW5oOQ==","shasum":"f495f65d25efcac35d90f32914ab1a65a1d3b3cf","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.4-canary.111.458.0.tgz","fileCount":28,"unpackedSize":169036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEfeaCRA9TVsSAnZWagAAxTsQAI3jG265sTDNAypw8DYh\nHJO6kn4Tv8tP2CQnt1Y2/u2e/BkPdBPPkzi8T/HvKUSbK5yCFfKjliXjg8lJ\nTCc1N2w4Y9gPoiaLlcqGsbfpKArXURjiDYaZ65NtpYx1lLmI3vu5EXfEtptk\nfhEeTodxtit9pFBqtvWq6lH7FbAZ7mF0uY64zUe+ZkIvWgHBTJNu2qF/c8Zq\nID8kG38ehFm+Jk3QNxRZyPDfQNciIy596o+D+xkEZ/zrORZIub9bBZot4WpV\nsBkGNfX1+TDnpbx5Xc1BznPgrpXznQGkiti7jdp1TGrfx+YVralVyFeSqZ6z\nfzqzy7/gMK7Admep7cM1rhFS8EmTM1ddBZ4BdN6tOFH5EK8EwM6lC1wBGzkU\nBE5IA9SJ8mx2rB6I1Z+uNmAaAVsIvy1W6k65NWNbRnqIZoKoqWQDeIADUxgo\ncv2LdViwFDToZ4W0DYg43CfAJc5YDGKkarna89eRAtJcjoslVQdwDXfT+I8H\nHHC9niL2gPcCVWMY1ItdCDkCOy359gyrt3+/bRcwRyNQBgOa0uooSFCLYW/R\n7n+H5lAsnq+vbR2VXF6rCj/yXYe641kKtxYQG4mWcPJWEXrUlSilZrj8V5R/\nLtFIJEb++nAuAhPSXaZSuATu/TwtlZCZBTfmm9PM2Qvgr96u7YE3x/R3lOLD\nrsPW\r\n=7IU6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBjKPjUHGZCl7tZCT4V4YpmSogO739nCmvZZ6d0ufxagAiAt6bTCrEhZ7Yo81nTMZmF6+lognhLnP7TZ36e4i/dnzQ=="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.4-canary.111.458.0_1595013018171_0.12415931620639897"},"_hasShrinkwrap":false},"7.3.4-canary.118.457.0":{"name":"storybook-addon-jsx","version":"7.3.4-canary.118.457.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: [\"storybook-addon-jsx\"],\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport \"storybook-addon-jsx/register\";\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require(\"@storybook/react\");\nconst { jsxDecorator } = require(\"storybook-addon-jsx\");\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from \"@storybook/vue\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from \"@storybook/vue\";\n\nstoriesOf(\"Vue\", module).add(\"template property\", () => ({\n  template: `<div></div>`,\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: { skip: 1 },\n  },\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n\n        return domString\n      },\n    },\n  },\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true,\n    },\n  },\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => \"() => {}\";\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = [\"source\", \"module\", \"main\"];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from \"@storybook/addon-storyshots\";\nimport { setAddon } from \"@storybook/react\";\nimport JSXAddon from \"storybook-addon-jsx\";\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, \"../node_modules/stringify-object\"),\n  use: [\n    {\n      loader: \"babel-loader\",\n      options: {\n        presets: [\"env\"],\n      },\n    },\n  ],\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"aceaa05ef0df60c2ce7fdc7b1178c35cb535fe6a","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.4-canary.118.457.0","_nodeVersion":"14.5.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-NM3LzpzCI1FoQbBQ0bFsxO2ISfiBxu9KGaqljBjA3WaYoAzJXWBhn1BHW2vGfDEbDemEWlUWQ4v/o9uO4/oirw==","shasum":"92ec5397eed2153c5040853b09a431cb5deab776","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.4-canary.118.457.0.tgz","fileCount":28,"unpackedSize":169036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEfejCRA9TVsSAnZWagAACzUP/24nfWj0ZJXlB4v7qzm+\ncftPYmaJo9CTHy16N3gU//N8R4VPLndYTkFEqOgl+ASqkCimFlKhJ8Mmffl+\nqsmhDsdD/5OLY1GSx7VfxhuwgvzWQIph2flG+cKG2wYxdFDZjAyNxsizmO1Q\nvjrzyg6aD7Jaa1k336/EPuHRtVtFfIn3WajnaLJSOqlKOLA/5y93hsVNAhNk\nAblD0/wgCqxBX1a8oBbidKPLww6DBoUNZjCY3WiM3UOmeVuKuyuvIWYZ6Wsq\n+mL5FxOCgSprsoZdkxSIn8bgzCjhr3IBGeRLGk7ZZZOoKpv9u5xKmWzoZM9W\nJtJoE6Hgl6xy7aA3omfTvOA58NRzFv5YoyAwPRKGP7faPEISwMW5O8r9sZcW\njZ41pod5GjCQ8ecljIF45q5qAQjugX+DvXEUVi5xPqEuUQzGmmJugsQWDJPt\nZn3caHXL6pyFAWtnIIgDla13KUntXHP6TI1X/ReudVYr/gnuU/9YI9mu8wZQ\njz3KVLE7w9e5/OPqvPoYLFl7UPt0kF6R545BreFGw/6ZWHoWWE31zHLH0L76\n+gZdvpDnYAaCJKy2cycZbGWeSnWv0SB0t5Y24miwD+rCf0Stg66/AqcrmTUE\nmcucb/X8I1wNNVqtA6JRojAMnFI1c/8dwoFZ6r6tohSz3YZUdTBeOL65KYuT\nahRm\r\n=Ub45\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBDnQlX3AHEVKrAho27EJRnMTur5sP0sewPobxCDVxNmAiAfgyUqnS99UUda9hltNSRkfheP6FxGtKuo+N7PB2AUjQ=="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.4-canary.118.457.0_1595013026531_0.15668950642475088"},"_hasShrinkwrap":false},"7.3.4-canary.120.463.0":{"name":"storybook-addon-jsx","version":"7.3.4-canary.120.463.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: [\"storybook-addon-jsx\"],\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport \"storybook-addon-jsx/register\";\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require(\"@storybook/react\");\nconst { jsxDecorator } = require(\"storybook-addon-jsx\");\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from \"@storybook/vue\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from \"@storybook/vue\";\n\nstoriesOf(\"Vue\", module).add(\"template property\", () => ({\n  template: `<div></div>`,\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: { skip: 1 },\n  },\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n\n        return domString\n      },\n    },\n  },\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true,\n    },\n  },\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => \"() => {}\";\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = [\"source\", \"module\", \"main\"];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from \"@storybook/addon-storyshots\";\nimport { setAddon } from \"@storybook/react\";\nimport JSXAddon from \"storybook-addon-jsx\";\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, \"../node_modules/stringify-object\"),\n  use: [\n    {\n      loader: \"babel-loader\",\n      options: {\n        presets: [\"env\"],\n      },\n    },\n  ],\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"547d84797df868b1bdfeb0e62c53a60220f3d5e5","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.4-canary.120.463.0","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-IQWaI0+ue8Qowg7NaxqLPoH/wM8+ymjacTE7umpD+poYbfJ7tdWlDWtXuqUJY9c69N9qcDnFyCa1C5Er9sFCXw==","shasum":"b1ed8e1e05f96b4a0b5cf0462e40061bb1a8d302","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.4-canary.120.463.0.tgz","fileCount":28,"unpackedSize":169036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIsgrCRA9TVsSAnZWagAArnsP/3zXPY9q1V/XnWiebnQf\nStGXgL8sCiJYQD+eE88uCblweqr1eDTqMly366uFCiCkvIGKIExhmdZUp2g8\nLna3grTYK56xMYqn86nLR9aNazY7YRSQJ1UsvBz7ydB4jAiRuq63yXdAaXtQ\nOM+kZKxfpXKsn4aA0fiFAlJix9P6iWwg2CaKRm16zivCvGLOoEd3dDsm3ILb\nIiApSzuXN6VfUm5qC4Ahsw58PLhLZvZ8qGTgGmGtJzjoRn/hOv5oIEH5UGSV\nKE1R6k8CTuJ5QiSQqDbHTzcy/E1YbC2HdgZ2boUPoBASJnhTrzSKGFSgb7lj\nPm3eixbG014rbmqqTt5lZh8ZdcOL4XBEIPCMEX8KhHpnBg/Nrsuva8DRfB/o\nKQR+c6Wedqaq81FRN3Q1HktJ7MhJIGbDFwWsbhxsgskRldpdmscrNbkS7JIf\n8JgLM0rQg8dD7L52oNd91VAO7Cnkc3G2tKh04UkQfpoS/bhfMjNKqej676o6\nbR9hg/I8s0u394v3yaILdCyquWHkleOyI10Ac6f0fz2qWOpHY0RkTq9TaKBW\nLprfYU+mQ0VQblyrPsRhN/y4k6wc/rFcrKuGCEZgmvG3AegbEUkwr9F/oLxa\nJ4Aydgeqa8LcrGad3xxTprgN742VrHX/ZXqu3yt42hiPiPjbmcBOxrheOiPn\nV5KM\r\n=bUmn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDNwtfFNtnXjquikZLdba7gotHWzvbJLwOj1BG+FdlLXAIhANQ0HhwxKNDEutjf4AlzTUlrBtK1uO4qu+Wjsui/ooMO"}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.4-canary.120.463.0_1596114986856_0.09545249934340272"},"_hasShrinkwrap":false},"7.3.4-canary.122.468.0":{"name":"storybook-addon-jsx","version":"7.3.4-canary.122.468.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: [\"storybook-addon-jsx\"],\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport \"storybook-addon-jsx/register\";\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require(\"@storybook/react\");\nconst { jsxDecorator } = require(\"storybook-addon-jsx\");\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from \"@storybook/vue\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from \"@storybook/vue\";\n\nstoriesOf(\"Vue\", module).add(\"template property\", () => ({\n  template: `<div></div>`,\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: { skip: 1 },\n  },\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n\n        return domString\n      },\n    },\n  },\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true,\n    },\n  },\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => \"() => {}\";\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = [\"source\", \"module\", \"main\"];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from \"@storybook/addon-storyshots\";\nimport { setAddon } from \"@storybook/react\";\nimport JSXAddon from \"storybook-addon-jsx\";\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, \"../node_modules/stringify-object\"),\n  use: [\n    {\n      loader: \"babel-loader\",\n      options: {\n        presets: [\"env\"],\n      },\n    },\n  ],\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"047173becb49f5202651748dffb77d734f2cca1a","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.4-canary.122.468.0","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-stHT9dbS7kWMsd62OA7PCobsFKANYdSzamHvtJtVfhy+4DmuzwujkeqdeIjJSoxQilqrkSuJvUkRHpGkgHHoQA==","shasum":"0199a14a19d97701b1b079b7c06b23374eb0a43e","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.4-canary.122.468.0.tgz","fileCount":28,"unpackedSize":169062,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNbG3CRA9TVsSAnZWagAAUN4P/1U9+BJscFkiUcEJaoUt\nspXLKBlLzGqwHFYh5kw5e84QLOrTxNGkkYiC5x+FbpzXSqGiQOU2mkZYQwVs\nCGs76Y5LISNUuGc8LYIhX1cpkOk2NIubUhPZIo1qfzILC78SjnQLzGRbPcaH\neLepSsdFqjVyQcuSGQiUR7ZGAWoXtQjAq6Ko2MCXD0Rk3F4Tv4rcEy6KBaMY\nBmD+BnbC9cBC1tEupztj52OqyPI/AhDrAhk780lcldKMTnnacLLsmebZ8lBI\nnL7fySXyFerVFWQXbhZBff1KpZk3Mr7k5x0MnArLT4YCErCrOUDHU/yeINN+\nJiAxkwiKDe0sJVGpm95I2UpRPfZx0cvqf1RtCU2knciqTsnqlCih8p1TL28U\nYCvE+Zzi3bFECco5yGZQIM2BwlBKjOyKB1OWJZlhhtyZhHZQ6pfDZ97GDrBN\nhWaFp2s6XJKEyvcN1FcVw5nms6/p6TjMTLI770vjHHBVwFbtMa/nV1B9b9Hj\nhd3Msl72xKmXENRDusbrARLcitqaQhMzWduQIjCzvP3LqXdhk5HpWauidHR9\ndck6STwzjyL0kmlc+pMZcrlhpGa0/IuA0bZzHuVHUwtkSWsGh++CaMSC0HMP\nKdT5XrVFNj+dZOhQ1wAc+Dc49togErpU9hukoaSstamL94WcR/3Uk5PttEaH\nB7Ya\r\n=PLtH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC5XxvQmbN2O32Yczsjfe+W4Ti8r8I3oQpcNp2jxxNeaAiB9RxyUQ3XXV1SRCxA6J9zq5fvdVQuri3Esj//lhT5xRw=="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.4-canary.122.468.0_1597354422722_0.518880017153629"},"_hasShrinkwrap":false},"7.3.4":{"name":"storybook-addon-jsx","version":"7.3.4","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"gitHead":"ceb88ec3bcc1e23f513d03b10ab7f86449c9212b","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.4","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-15bBSk4zl6yuIKWbJdQbl3MGbABzjhJf5cFx657nF8OmoOlXMpsz5+lxfc3c+AyRvUZxdJOXkvtRqBTmQ0mouQ==","shasum":"fdd0c47091fe51a86ac52c820bf9837ab45a6711","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.4.tgz","fileCount":28,"unpackedSize":169342,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNbL0CRA9TVsSAnZWagAAEKcQAI6M3kjNQks2CmOi1fDS\n2rU2ftw8P22hgriXbSPasRRf0CB0aiveNl7bmj4JpKezoX7APMyUTMNzupda\nxy98hBrPPhE1zz/tnTg3ifVo0yZTMpzRs/fCVb4UkFwcaa9VYuOz/276YF4L\nd6/CN/OmBXvcwyKg0Ez7pX/P4msuuT1c7V2nOHGu+Mv0fqZICMc/V3Yk0Psp\nQHcpE9j7Znn6iJ8qTCm/Oo3QUM+CP+JPCGG//L1M6DeFLy92Wx4LcwZ1ZZos\nqyZUSowRkqrXOusNQzVO9t5C0AAdxla+suVcYZunpmEJeEjE9x0SdLx44ZgN\nJMq0brgS7GrZRhmXICWV8gY3xsLkM033/yAwymWC60GWK+DBTfcQH/Rf+Zsd\nK8ttBpVtbD5GRtDTEWcQBXkiwY7Jz6UmhQoqZmv43ZwaNzoH/P8Iy895f66K\nGVRV+nb9AD82XsgqaAJUjCIC2X5eFEg9hVgeSex8rNGamXHeurKV0ZQOzDww\n3Piq8o4KCDHqHXh43fr8dZvQxoUapdixMIaXjo9GKdDDFvanGiBetdTnryPl\nJCzPT8gnitwmSRExZ4q41b02FkRlIzaqO0QGMdu0VByPvf7p/6ISC12o12/M\nJs9HEtS3r1C70cJpeXR9VpH4C/NEHYhBKCeyhNzMuGafqZ4yCts3T8qDEmLY\nFk4+\r\n=/nES\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4Z03CsItUOt1jWvmcn0PhBY/hNTkRDiW/fR6n9JYf+AIgEkz3iZOwjKFVp3xHMTA58fl8MaVriOaigeKWkx2wZaU="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.4_1597354740024_0.8143461036544943"},"_hasShrinkwrap":false},"7.3.5-canary.123.487.0":{"name":"storybook-addon-jsx","version":"7.3.5-canary.123.487.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: [\"storybook-addon-jsx\"],\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport \"storybook-addon-jsx/register\";\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require(\"@storybook/react\");\nconst { jsxDecorator } = require(\"storybook-addon-jsx\");\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from \"@storybook/vue\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from \"@storybook/vue\";\n\nstoriesOf(\"Vue\", module).add(\"template property\", () => ({\n  template: `<div></div>`,\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: { skip: 1 },\n  },\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n\n        return domString\n      },\n    },\n  },\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true,\n    },\n  },\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => \"() => {}\";\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = [\"source\", \"module\", \"main\"];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from \"@storybook/addon-storyshots\";\nimport { setAddon } from \"@storybook/react\";\nimport JSXAddon from \"storybook-addon-jsx\";\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, \"../node_modules/stringify-object\"),\n  use: [\n    {\n      loader: \"babel-loader\",\n      options: {\n        presets: [\"env\"],\n      },\n    },\n  ],\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"9effab495cb3a164167f814ea583c3ddcac2c1e9","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.5-canary.123.487.0","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-ECLc10iU70p7Mx/9a6F5TZHbFsDhxB6oFZKVIo2zWzkirdFbsiXJf3dadXbPTT1LK1YSFupd8fK3vGrR2ToIcQ==","shasum":"74b1b71864fd4c9c4e663ffa3ce7cb53075962ce","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.5-canary.123.487.0.tgz","fileCount":28,"unpackedSize":169359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNbPYCRA9TVsSAnZWagAANKkP/2ohE1nQDO4b/Z1cm9tG\nYBQuBQKmxfu0Lp6CChpHy8Y9Vb2iyjjqMCqWT+uYsPgF1US62WqPM2HGIhDZ\n1E+I++r49DzpGI8DqBNgnZZy3IRoO0qs0EuLexhWT7TVommZiQ2mib2kMiuR\n/AUbyrvipQrkxUvmN3SHLAoU5DYV7DCPvB9ju2jntVnI5pP3aLLHhQNKxqfc\nzjiWjARh7L4pHC0lcji1Q1JU9ZTwRPXqBAsLHq2hc4S7K+dekui+ix/hMhCB\nPr3qkUr+4dIfndIVhlT2ByAOg/BHc+IMB/eyt5xw8eb1g5IN3/3iC6WAl8og\ny6EEPz+TvcN+2xf9w+AFdBrpuVQNYj6KR2TQFO94Ch5GcTopYko3GtEGFaTY\ndCP723f9WKlxcHp9n9rUOATVp6HW4FeelFrqBxhDAhYU8ArSolt3F9ywBow+\nSAM8WD6WdUoROzpb1ACwD3Sa7BewONh/xLGi99ZhbDBN/3t1Txk5SVrUw1Db\nKYT58AHmVkpx5MsX4EIf7vM88RpWeifyzA2ClkdGSoJ+595cbBQwEXnkyuyp\n2MAkUAnAnjZbbeLDREZgfsies/WRAR9s5TUdhJoP5PObZvw+xoNEAgyqi5bQ\n1dS8OnyKjoqzEMVe1pRtS9WNi9Z+kGijb+06NODUyXpZ9Ub6CcAnDb+uzgm7\nVLM7\r\n=VFNt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGNgu04bbmpS+EO/ghq8qg1DUwOEX1/PBwsmhprKK4v7AiAj/XC7qVHiquO1KES6QrkjLZQXPLdEN3qhGWz6S6dJPQ=="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.5-canary.123.487.0_1597354968081_0.7156871025705174"},"_hasShrinkwrap":false},"7.3.5-canary.111.488.0":{"name":"storybook-addon-jsx","version":"7.3.5-canary.111.488.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: [\"storybook-addon-jsx\"],\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport \"storybook-addon-jsx/register\";\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require(\"@storybook/react\");\nconst { jsxDecorator } = require(\"storybook-addon-jsx\");\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from \"@storybook/vue\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from \"@storybook/vue\";\n\nstoriesOf(\"Vue\", module).add(\"template property\", () => ({\n  template: `<div></div>`,\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: { skip: 1 },\n  },\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n\n        return domString\n      },\n    },\n  },\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true,\n    },\n  },\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => \"() => {}\";\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = [\"source\", \"module\", \"main\"];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from \"@storybook/addon-storyshots\";\nimport { setAddon } from \"@storybook/react\";\nimport JSXAddon from \"storybook-addon-jsx\";\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, \"../node_modules/stringify-object\"),\n  use: [\n    {\n      loader: \"babel-loader\",\n      options: {\n        presets: [\"env\"],\n      },\n    },\n  ],\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"a5ba9535402bd3626b43b9b89e1b594622df487d","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.5-canary.111.488.0","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-mpPuAShgAf/idkeQmG1olKV7J04Edz+Ac6RBip5GFFwxJs+oSahPE0w4bLKfGjN3x4zaudKmyLj3pikSinrTmA==","shasum":"9692eed1cb31a9a58808e314b26cfabb41f82b11","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.5-canary.111.488.0.tgz","fileCount":28,"unpackedSize":169359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNbQHCRA9TVsSAnZWagAAQV8P/Rh7OvWKqPws62XZS5Xg\nljJ1tC+SBINaEFG8Ek8mqvE46W6QzNiw4Tg/WfANqEVJrdwbR0RMtrxgcjgj\nXYSR8P9A7RZt+bT2pdfemvEKhYxaobqCl4c+MLBdoOVy2zJh/+nrowp5tZL2\nPei8gXjRG2ud2BpDjNqs4WVkX0eXV0DzJ0PTwiDPqWcpwSLtSRvga0Q7+TUY\nrhPqiDSQFalyr/YQk755shLLEs+QyX5dZR3jiib56TXIJi/nQRxvDut2zB4I\n6oPtjoliCYpcsr7Ic3KIVaAgV7nf5XHW9whuX9e+DSCqTQCcmQzzXA0zIwYR\nJeh0MBdEe1+yIP62NMLSelrXaJb3FzvX+ZURieQ/mHhP88GOVy+7Qa5leFZo\ngxsyzAHyeeMvDRKx/uo4TVOuwPqo6oWXNr+IIihNTpLDwvWwz6Aen5p42mbS\nLpdPvufMIe7F6LX7Gs2KVirxg9+9JOAf0b50bIg7xHPsmQrqfo9OAol0lq8R\nR7sGJGgE/PANmLdqCyG/aYP8VMx13X/uSmYuF2DakxGhV2m/xWEbkq0GU+hN\nvtx8ONSlGoEm0o9Ft9uSKrs/AcAzQ7LlDTPeU1Zu+xWwHP4UaRcip9mVbgRg\n6Apq9cTCstbvhbvHnwArhMUZSZxfA8ktD/lvFDw03aNSn5MBrz58GqBpZEDT\nmA8U\r\n=A1WS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFvTp0gpZJHEalJCZzO1cNlviJJvkyKpLdPjFcTTorXHAiEAyVSKu4eztPtrkNDk0+G8rHTjtR6oBSSqNOdfzLduQdw="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.5-canary.111.488.0_1597355015104_0.2707268805483196"},"_hasShrinkwrap":false},"7.3.5-canary.120.489.0":{"name":"storybook-addon-jsx","version":"7.3.5-canary.120.489.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: [\"storybook-addon-jsx\"],\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport \"storybook-addon-jsx/register\";\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require(\"@storybook/react\");\nconst { jsxDecorator } = require(\"storybook-addon-jsx\");\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from \"@storybook/vue\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from \"@storybook/vue\";\n\nstoriesOf(\"Vue\", module).add(\"template property\", () => ({\n  template: `<div></div>`,\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: { skip: 1 },\n  },\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n\n        return domString\n      },\n    },\n  },\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true,\n    },\n  },\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => \"() => {}\";\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = [\"source\", \"module\", \"main\"];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from \"@storybook/addon-storyshots\";\nimport { setAddon } from \"@storybook/react\";\nimport JSXAddon from \"storybook-addon-jsx\";\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, \"../node_modules/stringify-object\"),\n  use: [\n    {\n      loader: \"babel-loader\",\n      options: {\n        presets: [\"env\"],\n      },\n    },\n  ],\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"948dc6ed5a46ece1d1ac930a2a481c52e81e294a","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.5-canary.120.489.0","_nodeVersion":"14.6.0","_npmVersion":"6.14.6","dist":{"integrity":"sha512-OjhTEeU1ohexEoIaRU943qZjGj3jvz3nO0lCwRukqK0qz4bDfzmjbjziKnyxWJgw8/Eu9fP4IDdtPHLeje4m1A==","shasum":"c0c41bb9f948cc59c634c3b8e23d1368612bce50","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.5-canary.120.489.0.tgz","fileCount":28,"unpackedSize":169359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNbRUCRA9TVsSAnZWagAABOEP/jc2gkJpkoUdEakuXpUP\na3aIjhttu/T86HUvQrhbxRMMoIGS5CKsGyJZBDug4Uw7WPep2y99C8c5OO9H\nplg8NxVVb+ZfcQNsrILKXLZFG/IA0SshRqjLP961vBKp42n0CLjBgBhoepEH\nnE4AhiWV2ClgKWRBlF1YRv7Xax1vkrEDrJX1icTrjWP2bRC2b3AS2sk09kEZ\no+VkFYSUiaaGL3dNl5NwSIZ6OrixPTyHqfQjHFAvAaf+cqT5VqsTBvjek6m8\nCHwWfqJP+P/ZGfOF2euG0f2saFYNkn+GTdjfT80QnBVumUEU9ELbZO0Tf0+C\noaSTyfSodjVzJb7T8h/x6UBaZ2CSTpDwf4O13LWdYVeA4xIpIrg17fNjs6hj\nH9vYp4qVwCKX9I2LuKCABDq0nsS730XacA81dAxEMOrWzdq1RZPu7xuo6TvJ\nLdWAJgspNHPtEjAMyTR3fYF3ISHcT95aFi2lqzL/hNUY3DJz6UIjiPG4tv+5\nktutrMPMefiyvUjYsA5c+p4aIg4kGQzGBiUWIwWpDmG4hxWQGMZZVGs55GYc\nCQ0sl3y87rYyL48qorEHNleXEtmAcmZadf6q+2qebusanly3VmGL6W8x+9Dk\nhoQf4KGdO7iqMe2ZC7AZs+3jNoolQbIhiNGx92pHX/XOsE1gR6YOwr3FpFFf\nptv4\r\n=X89L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGyufod7wWDFaKRVW17MB+PC6OupJGQCXXJi4HwIpGKCAiAi6hoJS7xpGH0CIAYTpKHD75+2a9UUC1gRAcEyVntASA=="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.5-canary.120.489.0_1597355092243_0.8575739812558092"},"_hasShrinkwrap":false},"7.3.5-canary.125.494.0":{"name":"storybook-addon-jsx","version":"7.3.5-canary.125.494.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: [\"storybook-addon-jsx\"],\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport \"storybook-addon-jsx/register\";\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require(\"@storybook/react\");\nconst { jsxDecorator } = require(\"storybook-addon-jsx\");\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from \"@storybook/vue\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from \"@storybook/vue\";\n\nstoriesOf(\"Vue\", module).add(\"template property\", () => ({\n  template: `<div></div>`,\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: { skip: 1 },\n  },\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n\n        return domString\n      },\n    },\n  },\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true,\n    },\n  },\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => \"() => {}\";\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = [\"source\", \"module\", \"main\"];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from \"@storybook/addon-storyshots\";\nimport { setAddon } from \"@storybook/react\";\nimport JSXAddon from \"storybook-addon-jsx\";\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, \"../node_modules/stringify-object\"),\n  use: [\n    {\n      loader: \"babel-loader\",\n      options: {\n        presets: [\"env\"],\n      },\n    },\n  ],\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"d9656ea85b230f0f65b4d6744f0d35770397f7d6","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.5-canary.125.494.0","_nodeVersion":"14.9.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-sgY2OpSGUzOBzIXnDjRGHYjrekG2kUVS3ZjVHFP3ud141MIGxIDJle3P6oRtTspcrqGIsAiZw+BlTmN6gfAh3Q==","shasum":"c1821bdebc5d08e2d0f4ec902a90976414b90eae","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.5-canary.125.494.0.tgz","fileCount":28,"unpackedSize":169359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUbN3CRA9TVsSAnZWagAAqwYP/jKu/01vQaG+LlCcv+yp\nimjgmkmQp/IIsu9JeWyPyY8AdKC6Rq25+VB6ykbeR2K/MMYRdyh5ifSNmQLa\n0Umo541uFTGXugR86nk1csS0HomInaxreFJGOqGUS6VBz2IHGYoaK1WfLh0U\nBWzCli3ZbDqIo9YmzIlFw3KowF7XsHZ/z5yQcCbdHvob9MkZE+jvHexwlZJh\nHu5W/9MUH88pWkfV2TeavY4X9wJjKviBSwipa1hfsJL73aKIsXXwZtcl7VuP\nybfnB6zwPIrnweVmRhQ4EoP1VNqWeVOfWemEt+56YcBMx8Qm65sR/Gr+8cRB\nIifTy18ga+mnrO3x19G35YwJlz5iVqiyMpmQj8BXQWGr9o/V6/nxEHWueTQC\nlxA/yD8EcpuqXX71hXJpsXFSDP0JoslfR7UbeM2e1YjgzdrNgQgBVKtxsfl5\nJIlrlgpfZ7CsGgT9xPQp9UZ1eO163SJY99So0o12dUtC+Kb3E+medOStiIUf\nV23Vg2/+OnkFjurB1t3Eb0VZRcURiTL3sJMC3x2hjL0FZfsppyekh2kDw/4R\nMd19xQO94w0erJ/MOXQkS6TpYu+iOWU4/MpmesGLTqQeT78a/er9bBCQPteQ\ntI9vszcX5X8ZTiCRMgz8MGPTFSXSocDrW3a3KYm5dmUa7qL9f9FVaRQy4kNC\ntL6M\r\n=CSQl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOvEbXTD7qQ5DrNtU6wEAlXms3dSDi2rEjxWFJIK+3mgIhAKxQ3M48RCIskF31/puHlQ+LCNNTg+dWbRjziKMQVlsH"}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.5-canary.125.494.0_1599189878545_0.40026487557541124"},"_hasShrinkwrap":false},"7.3.5-canary.126.499.0":{"name":"storybook-addon-jsx","version":"7.3.5-canary.126.499.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: [\"storybook-addon-jsx\"],\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport \"storybook-addon-jsx/register\";\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require(\"@storybook/react\");\nconst { jsxDecorator } = require(\"storybook-addon-jsx\");\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from \"@storybook/vue\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from \"@storybook/vue\";\n\nstoriesOf(\"Vue\", module).add(\"template property\", () => ({\n  template: `<div></div>`,\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: { skip: 1 },\n  },\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n\n        return domString\n      },\n    },\n  },\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true,\n    },\n  },\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => \"() => {}\";\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = [\"source\", \"module\", \"main\"];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from \"@storybook/addon-storyshots\";\nimport { setAddon } from \"@storybook/react\";\nimport JSXAddon from \"storybook-addon-jsx\";\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, \"../node_modules/stringify-object\"),\n  use: [\n    {\n      loader: \"babel-loader\",\n      options: {\n        presets: [\"env\"],\n      },\n    },\n  ],\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"eac1f416ca9d8006669cb04308e0fed3017e2472","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.5-canary.126.499.0","_nodeVersion":"14.9.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-KEWW5aAENURtL9QFlKd2shNECsIYXpgqghytHxghJFsrczorCqSFKcDwUGzoZ+Y0my9+32r54CSpH3pyO9xr3A==","shasum":"c3150ac8a1c33ca3b251348e2dddc42d2b76cf46","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.5-canary.126.499.0.tgz","fileCount":28,"unpackedSize":169359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfVPN0CRA9TVsSAnZWagAAqwsP/3TPrCctKzSgLGKYtC90\n7bkGOr6nMAvIPDj5LFGyT/p2+C7rJTxgQO2lGYuZ57/pmfusbaZMPPXfkNJl\nyyQuA2A3X1SiAbMxYhWuXdV+3LHs+wN+jIL2ZY5Grnq5ODqgM6FLRwh1r+Ck\nO+3n1ujw7vqBVXIjpVEho+qHwCWyiiwCi4/eVrEhEanEjkHtiVUo1Qgj1mmb\n8KgPX+Ji98b8t3EtnbdQ5E1drYFJVrQoFfpr6QcgPcaUE7Ie8RglL4l92WnT\nThQ3fKpywB6hze+t9PAznzbOagI39MzSEHEXLI9QNVJWrtiTJjvxJ9VW16L3\nPB9UTVzQu2a6FclAF4cDip7yC6Zk6doTVNnTUCA8KeOhD7Cz2uSpV5pwH2Lw\nv0CnBgPd7ZrdofxjUPWj33OnF7u0T+bU9ZI9SDMPHM/+ZAE1Nh0T42wpKjul\ncTnW8QeXltwGECuZOMNsRkg/l0iH02FBn9alr3aCrwIQVoej7MU61xwC5Kt8\nsZP6ebN/2C8bfa5USF+wlNF49Lx70pTDgKjr9dLjlKTMmSD+TX9Rdq//CFT2\nAtlNVbxDEjsSVxNO0ReuO/fnESJIb33JURkC5Lik/uwwAc5oHEWButEKEPH0\ncHUJg01rKKVcEvW6hM4fNPw+dn/vaLpnDeD3+esdsQxAdnmF69ZwqxiyqqNl\nUKB1\r\n=+QsL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBlTvc+Wc0+sq3OmY3ig3sVMILJo1NcyhXkF76NpjndgAiBzU8+ycP3legL/6lMSPhVjfS/VLluR/V8kxAA0xhLFyg=="}]},"maintainers":[{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"lisowski54@gmail.com","name":"alisowski"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"admin@kilix.fr","name":"kilix_user"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"wcastand@gmail.com","name":"wcastand"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.5-canary.126.499.0_1599402867897_0.11037832309724216"},"_hasShrinkwrap":false},"7.3.5-canary.127.504.0":{"name":"storybook-addon-jsx","version":"7.3.5-canary.127.504.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: [\"storybook-addon-jsx\"],\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport \"storybook-addon-jsx/register\";\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require(\"@storybook/react\");\nconst { jsxDecorator } = require(\"storybook-addon-jsx\");\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from \"@storybook/vue\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from \"@storybook/vue\";\n\nstoriesOf(\"Vue\", module).add(\"template property\", () => ({\n  template: `<div></div>`,\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: { skip: 1 },\n  },\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n\n        return domString\n      },\n    },\n  },\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true,\n    },\n  },\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => \"() => {}\";\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = [\"source\", \"module\", \"main\"];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from \"@storybook/addon-storyshots\";\nimport { setAddon } from \"@storybook/react\";\nimport JSXAddon from \"storybook-addon-jsx\";\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, \"../node_modules/stringify-object\"),\n  use: [\n    {\n      loader: \"babel-loader\",\n      options: {\n        presets: [\"env\"],\n      },\n    },\n  ],\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"2d7c21527685ef27be24ef327f4ca863d6739701","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.5-canary.127.504.0","_nodeVersion":"14.9.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-TRlbmZikvItzN4tyHfpSsZ57YcLpyepiKqID+SonuzUuRcdTS20krudnpyH4TMHNuLZ8pNW9lWEtHxKODOWEnA==","shasum":"4e68b61aef927c403c6be448367e2e344259f793","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.5-canary.127.504.0.tgz","fileCount":28,"unpackedSize":169359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHAxCRA9TVsSAnZWagAAfuMP/07HszJ8aQsRSNpn3Afp\n2PlkaJaaCAIyAN6CyeE+aUtoEy2vyyoaJgFvAguev78pPimoB4RTqR8i/R6n\nA7mH41eJ5xmo5puhRtyL2hU59Ukn3kvcBcNn1U7V8I1UbWKmY2Ocq4QxATWM\nW72WqHX2SdlrEAR3gRIuxzHc2ZF1xffbRUWTq70geFImSEP9x5tWdxKondF7\nKcCskvP1o5jC2rZnFHdZRSQFD9wOZdj+K0glPzcvqMrL8kTybDLhf3fgFT46\nwtse3YwwNJFEE1BwUFag2G3GrJoOH2zMANrnwXJRqQDYhfZPceMKsZfTrQF2\nuNpTtujiLJdmmLlPUXBNEDEpEaHRWftugoawuCzw+DSp+xZKz99a84PkWlj0\nnh8eE7zq3gCNBEcIZ0NwMxNnMmpQGxAnc7paDNo4r5aY/YqlO1EbsaBYWsz2\n8tKfoCPRDZqeHgTbPtaKe7/45COcLzs0ziznOVrO868SavVOH1/DbqeO/yrM\nwWBFr+p25PD5Oe9aqytyQ6SL+bDJ+nMArxiqmVH8nEYWpKeaRCAZGC/1P7A0\nuN/pL6dG5H1FQdPdZUwb9/+umUJNKO1/mIttUUfTUkJUHELWInin6aVh2+CD\nESLAHhRaTAZE3xBinFC80RJeirt91A/oWdhZJ5LKsomlpzMTtOYBrN/aTH9W\n8uAS\r\n=grNv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDEQX85O6YrVcmfkWc/HJEfIlZUfOJUiQpDewHeYb6uuAiAQkZFkUwnBjwVndbukQR5987pZIvvXDKdtnHjExSqSMQ=="}]},"maintainers":[{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.5-canary.127.504.0_1599631409143_0.9135007887041016"},"_hasShrinkwrap":false},"7.3.5-canary.130.509.0":{"name":"storybook-addon-jsx","version":"7.3.5-canary.130.509.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: [\"storybook-addon-jsx\"],\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport \"storybook-addon-jsx/register\";\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require(\"@storybook/react\");\nconst { jsxDecorator } = require(\"storybook-addon-jsx\");\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from \"@storybook/vue\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from \"@storybook/vue\";\n\nstoriesOf(\"Vue\", module).add(\"template property\", () => ({\n  template: `<div></div>`,\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: { skip: 1 },\n  },\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n\n        return domString\n      },\n    },\n  },\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true,\n    },\n  },\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => \"() => {}\";\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = [\"source\", \"module\", \"main\"];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from \"@storybook/addon-storyshots\";\nimport { setAddon } from \"@storybook/react\";\nimport JSXAddon from \"storybook-addon-jsx\";\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, \"../node_modules/stringify-object\"),\n  use: [\n    {\n      loader: \"babel-loader\",\n      options: {\n        presets: [\"env\"],\n      },\n    },\n  ],\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"9497a07c90b102d88da084e2ece717247dea6973","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.5-canary.130.509.0","_nodeVersion":"15.4.0","_npmVersion":"7.0.15","dist":{"integrity":"sha512-XTBrBg7tUfe2qVz0/okZFeh6DmkVEm9eqiYLhA39H3gmp2LCz31dhiAim8g/obrGFjwi8X2x0s5eaoAVMd3BdQ==","shasum":"880dec502371edbc759f35dd48e8bb318ea3a793","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.5-canary.130.509.0.tgz","fileCount":28,"unpackedSize":169359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0uJ0CRA9TVsSAnZWagAAQsIP/RKuaCtETtG4SPFU9dMy\nHJrUAzSti8ytrTTL5alEfGaN16SrjnGgwFYaIkyixpmmDnDoiyxks/fLz1j2\nnNleEgvDhwA0tgqD2UNedkQefigSRbXBkDvpLEDnACRnI8t5X+jGULIpseCb\nF6RM9EeJBonIZQvXq0xNPOsvtnXz1NzP9T3uO1p0vYMx1KswqooWXN2EAP9S\nKrLnojnmIoFJ7JIKb0W/FOalhZaGG0w8+0T63DppQQeaJJigeD3NKV/Lswkq\nOa7fTjWvBvlJUL8r0TUQDeJ3jC6bFUp2oFs612oDmZsG+tRc82PWQS1vDXmq\nJHMi3+VuzSp9q1rDHbIEE6F0h2VQaYnUduG9ghzYuyxEyAXMQNBDEi56j2Aw\nESpd/n5dO4yb+9oYpQx1U43bL2dNkUhWbRLA+v/95nMx8V0E7Q0jvB86lJB4\nb93UPMeYjWyt3TB6jSfibqyGx2xVYeU5COJiQCJepOAPe+FSlSbRHQDq2Ecu\n/z1w70eNbUEH6hBeA01j1znA7qqX5BhgYHNHbk8+ek/uv7dhb6tZ4XjsDZRZ\nKg9C5J42FlhuRLxyjp3hVWYH+0usincR273kdBURMrt6k0ZQRCf6zN1q4t52\na2fxkin1uSEE4Bwuqvwr8axSLhNkn8CxHd/k0qfJ7G4vc2ay5Sqoq19ZxdiH\nulbF\r\n=9Eq9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC2L4H7VxHN6O8tHkffymhvxoSnu5015igziqfmOoUO5AiEA5AJRp88QC/jp3wP7MuKSNqMVipsjPqYWzFJM9subV/g="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.5-canary.130.509.0_1607656052079_0.3845773082078323"},"_hasShrinkwrap":false},"7.3.5-canary.133.519.0":{"name":"storybook-addon-jsx","version":"7.3.5-canary.133.519.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: [\"storybook-addon-jsx\"],\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport \"storybook-addon-jsx/register\";\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require(\"@storybook/react\");\nconst { jsxDecorator } = require(\"storybook-addon-jsx\");\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from \"@storybook/vue\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from \"@storybook/vue\";\n\nstoriesOf(\"Vue\", module).add(\"template property\", () => ({\n  template: `<div></div>`,\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: { skip: 1 },\n  },\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n\n        return domString\n      },\n    },\n  },\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true,\n    },\n  },\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => \"() => {}\";\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = [\"source\", \"module\", \"main\"];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from \"@storybook/addon-storyshots\";\nimport { setAddon } from \"@storybook/react\";\nimport JSXAddon from \"storybook-addon-jsx\";\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, \"../node_modules/stringify-object\"),\n  use: [\n    {\n      loader: \"babel-loader\",\n      options: {\n        presets: [\"env\"],\n      },\n    },\n  ],\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"6cf75b8a87581b77b531db7a758378a8eb552726","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.5-canary.133.519.0","_nodeVersion":"15.7.0","_npmVersion":"7.4.3","dist":{"integrity":"sha512-KSVlvCGFyk5Kg+rVVgAie7PYuLAIZID3+wWfOTXkRLtrFPPg2LcdEtza+R52JKJOsxlrjg3PcxHygX31nYb8lQ==","shasum":"d1377b6f3c7e25fe815128a8638ae0e86d3a64bd","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.5-canary.133.519.0.tgz","fileCount":28,"unpackedSize":169359,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGB1FCRA9TVsSAnZWagAAoi4P/2hl70ebpVWSmHeSXs9L\nn1LwiKaN0Yn5QhMqeBaVUYLdX6wSHMSv0rAwMMTCOJpNhoK1YjNPxKLNjXFB\nX+4YZB4/oBs8CJofomI3Ii5wMWJ/8bNqoV5qA3Lk0eXzprNOsSm7f6uJ6RpQ\n4NRAb2XA02EfN8grx7ez6JhU8ab4B5V/tjLnrro0kKlp5VSSfDr3mK0OQo1a\nSf8o9BE7W+Rt1YSUH+15Ag2VkSLoacSXx/r5NLM01osPQAKiCwrNVCrCxeQ7\neE91/YcSQvZjZdobYtSYR2JjY5P9Ljr1Vja03TJspbzkZ/dciEdX7nBY3b/T\nI+KkWMUgajhXCA/LtYcIxeilXiNFuPNXlM1EniqOfyIMn198JXqx1wloVojL\nnz0VGQjrSYJsRODPTDh5iPi5r64+QuwN3isGB1PQumY19asizZUtMPkIr6sN\nbwQuu9mBED2ZxMRiF3lzj2f4+yPgJwfhA9gwSou1BL0W0m5RBBTuIP8OU4+P\nIGU4QrIPeZEKKeiGNYTPgCamzBS4R7PwdaNXH8G4xpQLxoEMu+kfp3/LGJN1\n/avgIXTOpjjLNl0arhKSgv1dZezsUL6BnlRa6+CreQcLdZdOdG3WCehLvTpA\ncECvWnLwZBK0ePjx18y3F3tpuIS8niMNI8vTAg6orfK//NQLC/q5OB1wzoSE\nJLRv\r\n=8KKq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE0R5epK9RECzJifU5SYnrCdQWEucaOeDuM6gMvNLwpTAiBzaVIRAkxB0KVNzrFjvKLPjNvxUgACQRZvS+287Iok5Q=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.5-canary.133.519.0_1612193092727_0.8775184244720642"},"_hasShrinkwrap":false},"7.3.5-canary.524.f61d606.0":{"name":"storybook-addon-jsx","version":"7.3.5-canary.524.f61d606.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: [\"storybook-addon-jsx\"],\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport \"storybook-addon-jsx/register\";\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require(\"@storybook/react\");\nconst { jsxDecorator } = require(\"storybook-addon-jsx\");\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from \"@storybook/vue\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from \"@storybook/vue\";\n\nstoriesOf(\"Vue\", module).add(\"template property\", () => ({\n  template: `<div></div>`,\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: { skip: 1 },\n  },\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: \"Components/TestComponent\",\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return ''\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2]\n          domString = /(')([^']*)/.exec(domString)[2]\n        } catch (err) {}\n\n        return domString\n      },\n    },\n  },\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true,\n    },\n  },\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => \"() => {}\";\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from \"@storybook/react\";\n\naddParameters({\n  jsx: {\n    // your options\n  },\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = [\"source\", \"module\", \"main\"];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from \"@storybook/addon-storyshots\";\nimport { setAddon } from \"@storybook/react\";\nimport JSXAddon from \"storybook-addon-jsx\";\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, \"../node_modules/stringify-object\"),\n  use: [\n    {\n      loader: \"babel-loader\",\n      options: {\n        presets: [\"env\"],\n      },\n    },\n  ],\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4?s=100\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"f61d6067e2d98214595ee7832cc3b8d2121cbb53","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.5-canary.524.f61d606.0","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-eu+zS7TPsXKjInvi3B5EGDAc7FywbfWzgv5mfjzy2KK6EWzVnIdk35QSFDEjKB37BvtlgkRpIoEmhfBRyRuMRw==","shasum":"2aad192691d1de9cd0ed38e6d41c8dd9480d5b52","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.5-canary.524.f61d606.0.tgz","fileCount":28,"unpackedSize":169430,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIuZpCRA9TVsSAnZWagAAD+wP/R13RUC8/6vyLqzOslrj\nRYmlLCRASulcrkj0cWvVo0WLxXOpGCof17xx9mNdhmfYJHtXZ4CRxM2hUBoP\n7wTpM9KBO2qB6bUKnq7zxh1cAE09fCpdw+hhkNtFUhcFFNmCSrX5kVYw3K0M\nHrEZiGg60jMv/ukvio72KWLH17IVnHJxIGMyk6Cj60txDd7eAdPlbMoeJ3sj\nroQEYu6wGJrcE4neWad/B/kad9XsNTTw69wYKquCteHm73G6DtCjESe20vqY\nzR8ujuNoeVFb5Uibdw5uHnrY2ZdiEq4IEAaoipBzupmjAfYAscAvrBixGHU6\nguoJqiYCxOBUJ2ETpp/xHTq27cfacKhOt/e2Moqb63DCkBdb2JO78ra2COw5\nyuYfDaWZNID7gk1LO9pNv3kA01CN50YccPpX1COCkaSADqozgSab7LLSj6nj\njmORbV/WPiQuN5X0/1Cljmx3LVxzfmPfamAo1NQzGcBBz5wNrrxHQJ2GMEFN\npkEGYVhCcnJYhKA8YkyvDg13oFIEcbmGIAInr51byC8geS+M7qJGs6h3QO2h\nxzQYqyTA0OG3WxEqHCHJMKGyxVY9oBYdN3BL48j1vA4XAb3rxAJEdkTmHmx5\noKNtn7unzRJGzb4NPd/W4EKbDbyOw0d2hYJxE1jfaGa/Gvk4yCBtbn6JLnmH\nkIO7\r\n=07AZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRmYCkw7585R7RLMPFpC0FxQlqUikk6ZdO4z3RYvrn+QIhAOsrgURIOtbnfmu3/aMZYCs8CGgfZ14VLMbS86wPHORe"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.5-canary.524.f61d606.0_1612899945069_0.08780159305429236"},"_hasShrinkwrap":false},"7.3.5":{"name":"storybook-addon-jsx","version":"7.3.5","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"gitHead":"65db4711bf45ef35178bf71c22be068bb09d0be8","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.5","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-Lo4+KFBbsbMu4ZIGRbITXk3F/4lDW/0Fptsu91vXE7/8/AWG4Rm8htKWUx4ttePhZXq+df+sZU8YkDaHeEGz5A==","shasum":"ab37153b2cb2d74f0cd2cfa6876ff96dc0cf03dc","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.5.tgz","fileCount":28,"unpackedSize":170487,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIucRCRA9TVsSAnZWagAAEfMQAKEdZXtxFrO32vVMlolS\npXRCz1Jl4fINLHB2XsLNs5tPlrr3CQ1NSHSCFTBitlyfZRXBgfpvPWluwWRd\nMCLScVbYXE7kIYkjEeZvOoNQKDaz08gyUU+1gVcg/MZdgwRc4/AlNlENsa6h\nqeEj2eVsPU4aNvBMgBNyLd75rbDS2BVsW8GJIADK3P5fgTMqqBMGSVJuh+pH\nQc2G89X06OBE/SPBNEQkEM+YJWwfUICZrwYRHiTrYf5Mmj43Qlc/L461JwPp\n3rCmjKLZobZlu2sSaNKFxCrJdqeLO0VT/CYNVotqCdQHlXDsNMY3QOJVwFJb\njTLeOf6+9tPkds55yyIHwObRCi+j/lb2H1faDYYJKd76n8+JneQvHhKr1o0b\nuBhULOS5mbm6Xx36F6px9RhVzYNnoCFsC52acT6S/D2OAZBxB5+2XwANb9Kk\nhn14dd8hmh7M39b9ebnZ7BIexOIHByTH7lCj7B9NZvhZCmqBgqwTfn1ybat9\ne/gTlYUexeq4MJUDGzle/3IcPRUwFEAKNfdEGHnFzMhm8OAEG6WdE7AleXFW\nzzRGRy7U7XfdBxXHWgr74onh8bGbamLOoFoULF2hzKhO8e4y1b6AviNXTaC6\nmRI/YQQgvHRZfwPVRBDVzaX4RzfLx5F6ykgSLm2gAaGWtNMShtzKr8gC6Ui2\nZojJ\r\n=8Jiu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2veJA724pW2nNcqerWWowIjgoQg9K4uNsF/wFPMb1vwIhAOWDIawvyTS4HxaRsu6SYCSjS+4LBXLGqFqLKw+X2KYW"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.5_1612900112927_0.04632690600101741"},"_hasShrinkwrap":false},"7.3.6-canary.136.566.0":{"name":"storybook-addon-jsx","version":"7.3.6-canary.136.566.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"b65b5908fb59bd352beb05e27132b2ad03ed1c88","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.6-canary.136.566.0","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-CjLeiKFyG+eb8BoeszCZ6FMoNOl5pZP3LzNjLHDZDNyfAzcRcEaQw3d78YXFzTuuFFthGiDYIp3br5jFVobw/w==","shasum":"e9af0b61888f1af121360d7b48015b53147b09b9","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.6-canary.136.566.0.tgz","fileCount":28,"unpackedSize":170504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIufdCRA9TVsSAnZWagAA258P/RnWjM1G3NdrhAh46REp\niHi00tNuFYEXeUtkMx1ZgSsqiWQ7zz93TBD/i7mIJp/JGrM4fr+XdZR6nMs2\n5ywNO1p+bxCuqmmVAUgHkX6p3sbLubucaxXmfO74Qe3NZ31IEgBO+W/DqtCh\n/bLh1PUc+QHjF8DDL2UWwX4lHNRD2dNaPJ/o7DSxin5n75wNlRLebhHzLMiq\nd4pd3iJt97IGsi97DqHvr8WdwR6ng2ciU8f81R0UjXw7GjBWnx7T/1DJB2Qk\nv0x7RyG2Ms4E6F4vZS0UmnGUYinJq4yXUcO0rHvEw0YoccbDjJVWqIE/xx67\ntBOxzYk4RsDBEQIUzQzztk68MPIxWBctWePIp3O0rd//753jpNRk57xydv7c\nyKO/KHc7754gki3Qza38Lp0n+X91TpC4xtdLKKBpO3o22Bjojg6uKTd65hSH\nuvSdpu6ejf4xkNhdr6L3ZReKJPrh9Zq7One7Qh3V9XYUEjVBpeR41POgaevg\naYpd0SuIcMFKrvnW4Oc4N+8gFcDnsV/ctmxajoRgV4xEy/Lmu9m1UVHQLbf4\nbO1ThlsTVfR8hAqjkXa65LWxMQ3lp/on3nc1OuIIlAbkUpnFr/mgV/4wpPop\nEuWIdv2/G3MWtOI1eM9txgBgDSHCJ0S0YFFfkmAjZBXE3RH5Lc2NeOH4rDcB\n7xBc\r\n=K+tI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChxAfAgfcewl2eEUoOvixYWwX8XmlQzSA6PIFfROBmZgIhAPjOG7pPrnz4dnVQL/6CuMuWNvgvrp6nAPH0Erg3HDvs"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.6-canary.136.566.0_1612900317146_0.031537944458731815"},"_hasShrinkwrap":false},"7.3.6-canary.133.563.0":{"name":"storybook-addon-jsx","version":"7.3.6-canary.133.563.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"3d6e1294544a3eb2697e19cb736d69bc5377088b","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.6-canary.133.563.0","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-DDMfm2LZ2vTaEU4b7m0kNNJkWHSaqIFIoU9anQ4ufSB4AQMmk/e6n1qIli9o/USqWeutiUQCCrgRoezD/ZiOFw==","shasum":"6e772ab3c6aff0c2d586dbf72b952c9bb33ce3c4","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.6-canary.133.563.0.tgz","fileCount":28,"unpackedSize":170504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIufiCRA9TVsSAnZWagAAhkQP/RTfyjQY8SmwHqXpXPsl\nnwc5ER8O/eWJ1QvmO9qJtP1fcFVQYxfBatGv1geN6oibNLXUnFddAiJlh8va\nne4z2YG796dZaC+dRX5w4SfMR0RQT7+l6XFcebo481oifch4iKXMrxUxLA9e\n9tnZ2zr6sk/NYDK0zrirdw3L3+9g3UdmHTkiqFdGhHC/ctxx3vDSqLwM0DDs\nC/G4e7fE+fLUhxjt7PHaNBEXPexfrCLMp/rl4KecDP2f4q1niMYvzD0UvCJM\noPZlfKMENpm4sXcaeFEs3uEvut09dMPWXC+zufZ2IJ0PO0yHaF7jvHtA1RY5\n0HbiXuiOHU/XSHPwvKz2nbt6QWsnjs6pKWSe/RgVdUPxIqXjIrvLN3Ay9h/J\nzkoy7l4at4v9Pa8iuBMR77UdrDB00X95UXq9brwkz6AOouXKACXB96dEjyn+\nMz5rX1HbTHhfav6pR2T4s0qa+Y7AyePeL0JkpDeiWFS4DyE12n563bTyAMGq\ngCUjv+8EC6RhT+xZzXqhSdz7rm0CC0PhpJ2790lgG9j/S7MEjMdQqAd0Xnen\nI7L7Db8ivC/SIqcLt0fcomSiSxoe+3ykrAZ51kVDr7cA6hFZzCqJi77bYmHd\nlqrRu+qsSSzQ1dcCXlCX0vMe4UerndFqyk/OawtltKUukJj8OfbzTa9a7sjb\nLWjM\r\n=dLbW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHHW6LDIfIOA7YpSmd/WuDXTRLPymlcNkoL2INVzD71AIhAJXkXw/7pHZeJaZncmgTqeiSc0vxgKZdSICIq6UQQR1J"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.6-canary.133.563.0_1612900322339_0.1284722982453792"},"_hasShrinkwrap":false},"7.3.6-canary.127.568.0":{"name":"storybook-addon-jsx","version":"7.3.6-canary.127.568.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"4db71e1feb50793e47b1d601bc4c3d45e2697213","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.6-canary.127.568.0","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-LxgL/UE6Y7tS/2JWgPLY7bzeBs0h24DC2l80rbJ6Y+XVahnKnrKsqwtSHfJlA4izcVIPrdTSCC0mUV5cRjNEUg==","shasum":"30af01bcf9e35c4170e9fa5a7c8e1b28d33e2160","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.6-canary.127.568.0.tgz","fileCount":28,"unpackedSize":170504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIufnCRA9TVsSAnZWagAAlnEP/ijDKJGaLFiBQyh/cQL9\nmVQYHM5aarxAfDEQJiyyyHCQ/L5orPtRhNgFLYddJYUhvOYFYy+0ANlrK1Zu\n7bS9OdPdabzqtHJRY2IyycfYn+EPz1RmLp69eHkcFGytNyoGNVFV+DOht9O5\nYqEiLKUWOe3o/oWDxi5OyLCHM9dEZ3IWNLz3mAeHrfSjq0XSQ6dU9hDLd1D0\n65URmqJ9368cZdCGYcmzq0vwAJ7Sr2Zqzb2l5sEyZidm0vOQusiCkBZxjveE\n28J8Pvlgg97FuqPJjjlsrNk5Ja8rHCm2I9Hk1yQgS1iWpbbOt2IscBhHBG6X\nhgen1k33gvN+ptGgCCRdgVoFJf//63nRtH4pBBMupSchZNJtXqOjRRklgnHG\nI13kDjx22/azeXhohAYIAe6TJ+9kBMwycEZqvp6oo6D6T7Jn5fRFok04tk/l\nZ3Bn9yS5b9bY3/Kv+UmlMpuzIMQFqFz324WSSJO/H7it0LIZ4HcrzkvyGiyY\nOLwukOZw/7pqDqdgH0764zV3jT0ITAc6tcoSc2pstY+ad4P/npZKKJUWtp5Z\nOxwNBbXlJA/7kM5n6X6mxYJ7UkIvVmNb+Jfwu6HV/XjNtRS04WO7/5Xici96\nDF2ZhCAau1D+QyXsxdNw8BI/lWLWRwpIN4hsLAGAizArFZ7wRSeG3I2QQGIG\nhvuI\r\n=GCFC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcDrOzi57MhK/0TpYKWTkVjuXe96FIrXwfLpgY8uiQggIhAIQc8iYcOk8dPeGvkGiB33qdlUAoU35FJs8bavVZ0Hgt"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.6-canary.127.568.0_1612900327150_0.48941242287252784"},"_hasShrinkwrap":false},"7.3.6-canary.126.567.0":{"name":"storybook-addon-jsx","version":"7.3.6-canary.126.567.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"cae6ea855276c1e328627cc37906780c323a21e8","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.6-canary.126.567.0","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-bhK92Nx4aa8ZfF8I2wKzfKQnlC7pZc/sy50gEOhZpPXVVlnSNrUH5DgcGffOJBkzLbQdShnW7uon/wvWgHX8RA==","shasum":"1e5b7176032e801b942eedb416b57674b4d327ec","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.6-canary.126.567.0.tgz","fileCount":28,"unpackedSize":170504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIufuCRA9TVsSAnZWagAAf4QP/iMWlfyNcAtLj0YwRmSh\nUVKML8bZtZ9gaq5+2xrtCZyE9QfrP1dChLZHjJsG7V4i6gj65n4oOkkMKGVa\noLaq6ulVNuM75nuwtwZN+K6OOWyCOwWa+8G80uIqY/HFhW00aZosOhsfkfjy\ncfRB0/Jj/o9myEkE1DYDM/rDdCFo2kTfQrRu2K11vYzBUlIVneryARw0YRbZ\n3xXMpheC1yPuC3VduBdSudXq7qhYlbAZ+UAIXQosAGyclxmHpXbkdRlhjeh1\n5MCEF0K0a3HqGHlzBB1FGGk/DqBIQ2qFakne5EABFNNLpoJUzDwe/9eEjD05\ncZ1sfD2s0Jg4PtA/cQTr/bnJS6bHgezs9tYjgKfPIkS4NSD7+Qdn3QzAu5Yd\njmGNHf/5FTJtyQiWhPAOuMiNtMPnVICZmkRZeyj43zGz/er2+f8fRXYB0GjL\nH4zHJwsRXNq0367ssEBveclFF+ARrPxj+E/1rmqM1FlJpZxhX3cfHKopQIJb\nKp12QSmAp6nK9nQqWSzxUnB5OPBeQYo/q+sA+i5VGZvnaLRHCUstG68ugYPe\nRkEnm5651j24/kc2cnoac3BVUcfMdlJqhSyOJLJdCwnuXsQAwgyweKBye5RV\n3YQd27mtBLdyd/BgIApNaAP3f/QPuHlmHhDWC3YzcVdeW29oS9/q1mRj9c1z\nKMHR\r\n=nqA3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmXTQGXOm7rygAyGILDb1VJxDqRQwYyQ6OtCjP8IHrlAIhAPvvFzx4+XtW1yOZ6Q8fdZreg7tDqJTLBzoCH6XSLJVe"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.6-canary.126.567.0_1612900333441_0.9148438102017884"},"_hasShrinkwrap":false},"7.3.6-canary.137.565.0":{"name":"storybook-addon-jsx","version":"7.3.6-canary.137.565.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"5d8aa17842189a7434b727a3868c5357813d15a6","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.6-canary.137.565.0","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-3HwBB/eAJrvE8Re4YbfywzKLOvJM+ceH+jVigo301uGHAxLF2uvtTLRfcqAaEf7kPXmGZTR08t7DqFTwtC/IbA==","shasum":"2038e3ee0cf7e79cd79fc84adddf95f4f41c5383","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.6-canary.137.565.0.tgz","fileCount":28,"unpackedSize":170504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIuf1CRA9TVsSAnZWagAAutMP/ilYmHBXn4xN46fzu9uV\nHZoDpiJHmCc9Hv9p39qQKplpkaYrz5fW6Z7Bfz2Hc72V5nRuiI0TCzcUaFjZ\nR4d6Vi/z06nY23zAXo3JgvRjLih4KP9bmB8Zv/ypO5FuIBdNnvRJCQF6g+ae\nCSlBn+wrptG9wjwAnR7etwRkKob+LtSJMjXVFbrKSUiCip/4Nux6amONbdsS\nOXpC3BNEEbbWjtbNSMtv5vwxl/GygSnhMHh6x+5Z3hfWSnbgOLqAGJiTnFpM\nEspVpyMnLeTw8RtwbmaGtlAi6KDaYsG6vLTm8nbA0+1UXzZ64PBoTlhqdwSw\nrYqFjbE2dh879ybgHxd28ovsiddz4HbIhp72maTFutkw9CcAcv1mbK/NgrRG\ndmoTrlm7HBKojSrk9KZUyXISsr9HfPxyQcL17V3FXxgbHimCWFb9s0AqKG1F\nunPc3nGY/5pXwEs7TzitLvY2CDKYLfMMk8WPepENhW+0g3Tm8VSDod9RQv5g\nrJBErOs8oX1hPp5oPtNFtGARkMEnS/z8bBlRyomOcClVcTiFaO3vCl7JXkzo\nUzhiKBrN3XRmoIJXTzlEvMIVN/pjzFPL4arSSvGa+cMX+P+upYO+XUO2FtvM\nJukx1zBWlWt6BVzaV3lajleU6u1TmAclpo02RMyAYZ9H4X24ondw2QWPvlfi\nY70k\r\n=Etxc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIETx9DnWvAA+h76wud948Yorw/9ZzCg8jqhbpTi9bN5mAiEAkrNRu6e/PYbIXTsKkkFD8njggb5V/26FbvuA+Q2E7X0="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.6-canary.137.565.0_1612900340790_0.388597473302432"},"_hasShrinkwrap":false},"7.3.6-canary.123.569.0":{"name":"storybook-addon-jsx","version":"7.3.6-canary.123.569.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"7c7b391c78dc4596e81a8dcaa566d1ac48fc3af0","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.6-canary.123.569.0","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-eF7qT2caGT9oHdkti4SDvllbAJpW4oJzuXaXnWG07SsF/ZlvU9A1/je7kr+LrOJsv/zhWVWR/Y0mb9vZ+GkHaw==","shasum":"21fa16f3f80225536c8f335c124da1f60f471217","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.6-canary.123.569.0.tgz","fileCount":28,"unpackedSize":170504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIugKCRA9TVsSAnZWagAA8LcP/jqpbbOceSnWmlvNcpj7\nUuVQwKRkIqIzp1WeeOPNoZUiZ0pl7VlAwJ0odrZxldH0goywVtBk5zK2/ICt\n3PBoxHcjsdWtaZKzddioTdZFqj1poUuVLNxwsQkbb3WSrBtGitHP6INP8BU+\naACaknlvEuRgKj6GuGgf0OHbrmXR9CQM0TFf0QfAj3JGMQTwGom9Ou0Twati\nH4TA3Cl2x7CaK7bZiUJvJK0XGBAJG2XsoM96jP3Twzq7mctQMpf+KF0Xy49Q\nvbbJo8RwJRHvggtpnj1j1q8J3772aDYDGQSclid/hGL3EQk6BSu38TFE1cUk\nPU///JMWwkosIUAwUCPIqcxCkbSEs0m3IidzYsVRwYSHWjqIXxVXQzvRUI0q\n+qNhYpAQXr05yfpjAf/ooHRNp6ReJXUJFNs7DB1rULKb4YA5S5C2ADM2Nw5h\nRcSddZNnlAhdYo0rcBIKYu828vaTtaT0XPx0rlLN7u9CPdrYpqPF66nCXN0i\nzSQX6rRXLz1UMwjGjjjczvmSFXgCns9Yo+vvGh4jB1/HwYTgv2bX1zOZOXkM\nD6PxSatNGkslJwou9VQVTGbHJBZzTnvAhchhZNSmK8pLrNMP0u4SDk2mviNU\nZATi5VyDzAMtu1oZ8ZmP+IBRM/KzO28350yRWb93FuCI+OpRTUPxxL5IayC7\nowS9\r\n=r8He\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7mj1fHYlN7LhqImq72NoFBu/qB6mjjxvgRdr28Hmf9QIgKw+vksSmZPaBL1i7IFFIc6fk+X2DryprE37L9fq3zmM="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.6-canary.123.569.0_1612900361132_0.6326972826631658"},"_hasShrinkwrap":false},"7.3.6-canary.125.570.0":{"name":"storybook-addon-jsx","version":"7.3.6-canary.125.570.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"b10840bb8a18f2fe1a53e53e45433b4ad8f6cf21","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.6-canary.125.570.0","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-XViLULZ7tfhd1PGqeVw1wf94ZpIjTFMq1Fq2VmYJTtvJsNEr73QC7OnIkguRo1VxMUDwencENWxFjO1NFLuYXQ==","shasum":"9ad16f2c3cb10d925a7d2d305481b6380520beba","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.6-canary.125.570.0.tgz","fileCount":28,"unpackedSize":170504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIugXCRA9TVsSAnZWagAAFEwP/if8wgNBM6s4WsLfIQs6\nMVa8LSNzywbkRNBhadJYQChfG7FgNeytfaKNya3HWWcM46T5QvoZz6SVkxx3\nnTcqg1yQR7Mj51iM+PqzBfnBXmRB9AOUuW0ow4XYgU4TKJLChSLCx+4QoY90\nyOcpJPS85MQjrZkBEGm1teXHfwReEEijaHTizzjDmyDlak0L5rWWr87frBuP\nVAQpSl8LxRZ+i7Y1GMkh5DReLbAKWMdljfx92f0sf08k6yItklijsVsNNFzU\nMXrKa3JEGtG5ZIOyEDdie4/Kuaq8z8I/EHdOe+O5yEZxo58sn3NyRkomLrve\nOirjCoHayyxdXIZVJycp+UIF3Wm+GiYyxsbmMSoBnPDCExotdU1Vv6HUX5JG\nTBqHemeb8Vcrp0cdVVxajrrZSnkVEG+SBSGzj+wK9EyZ3oUfl0hjCwMdT7mK\nIEWWiVWZska0QZzomRJJhwPuHlvZSjAn9t+OcJSdfzseuyJhKo1NV5cTm6m6\nQU94QXC54a2qjTxkzIaVgvif5CCf3/Dj41f4AkZ1wTHiF4aRlmmFatpb6GL9\nA0ECK4/Re2IaJPMnMT5VsUnp4UJk0VwxXOqg1DC37s6KndE9iqAZmY6qiEKf\nTPXrRWjjsXzOykp4BIC418nLv0PqEskkD6qR7XfldIJqVx1PNKXDfHgvhm3k\nxTvF\r\n=eAFw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqVS1NGpGgKihP30g/+xuvLt05AAAKO+HHeaqR9dfzvQIgR1ZYAMLZcN87O+4lmMbB8f6D4F+Ps6LHUWejsZyEQV4="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.6-canary.125.570.0_1612900375034_0.7036742613380071"},"_hasShrinkwrap":false},"7.3.6":{"name":"storybook-addon-jsx","version":"7.3.6","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"gitHead":"d948652b281e9a921b68999349bedd7d81a92cec","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.6","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-mbtelGqG5vSabRCEvz70dsdc1vDu/DMceb8pzCE6ng1Es5HAVubrKmvGpKM9g0o41FET7NThx0Fdz5ltIU07LA==","shasum":"ff51ec66d6af8323d64f7d4457f4da352bfc2aef","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.6.tgz","fileCount":28,"unpackedSize":170865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIukdCRA9TVsSAnZWagAAjJgQAJ2iHEXxOBsIo6gE2SLu\nr5bcyNdvsUN8CUVkdDZw+7enVJY/nmKOP4WPsO4LfFcAGmXsdJPyZpGfeQ9r\n5LNeXpvHGoSqWLlNV5S6rfgsDGsr8mfcoqb9uNtnpBBCkXZPyXx1PSW/aSU1\nIcG+TInBWBBf0Okcziqu5ZSWFaXwy1PFJFdtbWUx0guuMqmG8ohuEpgkUJ4/\n9SVJXrhkObhlKOBilawdJTSrKTpZF+x7DTjTjMYzaLoJJ2Bq9VdUarU0Ar9A\nPkeDpCdmvyZP2sZ9OqFI/eIe5sbZwD9xD3oyyviEKocE7uavv/SSSyeDu5O/\nSzELSVqJ1dx4rhgUA03okgchQXNa6UkuM5qZROTWQwDM97662u+JCsp6edvZ\njcEOD3Edt4oMiIlkYolBuxdYcVIy7B5vG+yqYK9b3XwV7rpCL0T68BF9jGug\nMyx655NL399u3kQyrntQkaFjj4nk2pR8/Ae87rpp8v56+WX6GswXS0+1EO2S\nUk60NAY8y7uKAZPLC/DCcMfUfBdPHqddyyDO2NvK7fUOxv8G3n7bnaR+tTPK\nXCKVyx3FPeL9MPdUIoO4EDB3Eg1qDFAcZBC2kEAQy1s4R05o+VCMv58/qa3F\nJHTtKgkCXBowlHNbTgDqyagG2e58esBSZPONzlPRhpXry7soIsUHHusMf2Et\nNJfZ\r\n=fI/a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDUXL5eucDE2uTVzkURBXhrQqQhhYlOPrsI9N1khIuhbAiANAP3MU2eRZPrEHrP7NHJ3mdksdYvUNQN9cu3/xtbYew=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.6_1612900636648_0.2550574163582242"},"_hasShrinkwrap":false},"7.3.7-canary.123.606.0":{"name":"storybook-addon-jsx","version":"7.3.7-canary.123.606.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"f7fd97ba51fb6b4443a369c82a4391586bf1e808","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.7-canary.123.606.0","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-0h9OZ6KOV77rRdLWX9MmVLKPXL1freI2VLg66PRzqpgGCxOJGCMH6LnqwDJGMgJygcaKebfUQgmGrX4eAvzlqQ==","shasum":"efd2b1f4e84032be3622d91f8aa568771a652a06","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.7-canary.123.606.0.tgz","fileCount":28,"unpackedSize":170882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIuofCRA9TVsSAnZWagAAhRAP/245ZDIxLbpJyr7W6C1S\nwJQji1qvz2GcVBGogU93v/D9p0trYlFTyeIOuv7WvZIzVq3G3Xal5f72Voax\nSQiK20MvkzfXe6Cf+HcAOxePs27GuDaLXNJjJwxcJDP0Uhi7uwlj4we8faa1\npSGI8UOMqofred7Ph7wufnCHlziqsx6IoHPk5luaSme5kD7+aD/fc7ABryYu\n7iYXgaNvlDp7E8WYbXUATl10gbYSwPKfbnSl4RmWbq6Zj5XXKDwnaugtKksu\nmyUJbajUcK748dHF3csZVeRsg7OFeFd4h+1TqKbQsqy/vkTq2c3M/h0vC6X+\ndTqe+F3Vpv3BFXLvjO+BXe8mxNvzIDcp+K/izkWFhf36/JsR9Er8daaxAizI\nmhSSoBnamM0EJzp9XVlSLw1VvSn4cbh/DlhxZjAttCaET37hx4BWATWCA5/J\ndbGA6aNezQoHLYRKBPOjji91sdGB+DlM+A4Ky2i4+ZOM5u9hlueLJMvXmJQ5\njxusKQvDkxlXC5e2kSp8+7z3KmmSRG5FfRyGcE7wKtINWkE5GhFHPmbIBa7F\nN9kHF070Ndg+rP7kgpVkcJnMvJ5nEHtTI03jB+3KgwVaq/xT+wtyPYFduyd0\nNai8zyZyRQo6dDgF0wlMFS5jooIax8Y8Ux/heygAOjQR/U1bf6bUZNwuiRrk\nxhQM\r\n=+vIN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5swH/tlko+VyKwo8HHhWZF71Itu/7UktY3METbr4lZAIgFxvTqZeOZXoHqw3Ho4ZbYzaCdQkZON5PFDtBB7nn9Ow="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.7-canary.123.606.0_1612900895420_0.09587102712297546"},"_hasShrinkwrap":false},"7.3.7-canary.111.607.0":{"name":"storybook-addon-jsx","version":"7.3.7-canary.111.607.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"0756e9cf4b2d93afddfe597028bc03d46f74640b","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.7-canary.111.607.0","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-m+FKs5Wg6bfXuOUOmGPJv2Ek4r7M2PHthP4dl4YweNH32S86RbdACIYRoxwv/zHPR5Xt6RZLnlAX49WIUjIs1w==","shasum":"df859e06e44b082867f50d59a1348745b865ca9f","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.7-canary.111.607.0.tgz","fileCount":28,"unpackedSize":170882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIuojCRA9TVsSAnZWagAAZEUQAKAHrhRdftb4KUZSMgMT\nCvIY2eAaHKLZmdB1pp/p9a0ebGFITWejDnSVYHnn9uvFmyQeuPMgxPsNwkO4\nXOZnmcdWQcszi35XakTa4ZpGjfEJfvCnrtAmt+7xOWrLTYFxrpSeDAR8Z48m\n7WxkMqRUGkZdhCF6aqI/jpgGJYmZnoD3ojM8mbacKGGUVrnv89iAAtgFCmXQ\nYXO3JMn13uxvDoMSjuDWlGfYHoSX5DcSDbr+vFo2gsS/JHle1H5ZWFyHSjKu\neNkbRD/OxwQn7Yvr7RdzBCKRqgggimhVCJxRD3UVNXhBsWEvPFwRM8hewj9Y\nKVrVV6nK097xG1xwds+yfOevPSl5a+ULAroX5uo4Mr1lGRoswhEFPeYRde8M\nSdtqivZQOVSODP69/XLwcQYfrI/1xPBSJqQ0Co7ZgcQRo8NVkJOMDhmPHWjz\noZIyPJxc6MvMtcbtSmkC4HQwqfGX7azhdgd/WKkGuCdVU/LoFo/LPMTNVEzg\nrSZY+/PsM0KbXTImB7O9ID3kGCbjPLMQmEzITdz4dPdurLkWP7z0Mr8p1afo\nTqN2fuhmDjqyUxWSi6W/6Er+TRpn1f7RAVVrLuxDNQI80Tf6ONGy313bLzMZ\nON8RabvmJFvbje+2+osdHpTdKZk70q5lHmd7YeKPqFnKzVNEktjtx4Sqpnc4\nhGqa\r\n=uTKR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiOsiGIJTZw+WVteFRH9OSxjK1nF295QrnXgLUXcKAuAIhAKc8fZfR6Zy0B1jH4ztkdLFnlAzQ79ambBe8PH8fKOKc"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.7-canary.111.607.0_1612900899314_0.5139669041301074"},"_hasShrinkwrap":false},"7.3.7-canary.127.608.0":{"name":"storybook-addon-jsx","version":"7.3.7-canary.127.608.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"100afdf79bc6891ad618334a13510ba93803dfdc","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.7-canary.127.608.0","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-5aPi7JJEEXzR52O18gRhhQSpyg0cwr0MU7XMRvDv/nA5Dg3mTJzh2Aitx6xqsRT4X/stS8rQFY8pkiX5ck+D/A==","shasum":"51c58cbc8f85d365b0cb8a41847e2777f149eb99","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.7-canary.127.608.0.tgz","fileCount":28,"unpackedSize":170882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIuorCRA9TVsSAnZWagAAXz0P/0PU0OyhrRF73CoxtH/d\nOnocMpNxzkCnwNaC4AwFP+Q9pfHGU1AyL6AQu2K6P6uRbSoP5ls3RmHeCGgl\nSmqsqVGay46CADeauGjN3DO0Pysvp/aCo/TGcJweuxELCzv/0rvQ7xIcUXgg\nrPEbqsPyHt7PfbmUdwVaaK4sc7l0AYf+NYPmh3dx8t7ReoNegJrfc3xNmPmB\nNXs1VGOJwiq/B2wAGVjSbomwRSeRSPpwRvJwvgPVT14oYU5P1FBjQEd6u675\nqiBOxp3OX7hMwAwiytMgadJJmcp9MUv0cjLk+6+VUxPPrOv018DmUwdCUSbW\n4mijJ9Uj107lL7bloNIp+KTNvYtGrt68YpX5EzYiF9WAViC0qG/6gE88ezGk\ng5pRfaZqYX3ihy/M4M4sP/72Hx3554rdjqgvdTrxPA3GQmLnzaqfdr7cTqDF\nemt+tL5uh2o5lbiLbN46N3oSx8jQAg/Qj6rS9212VNVHCLpOdtzmKi9wEIzS\n2SdMMBbREEfj9D1MvOgnWdCqamLh2t1DLNWIqZfvot06ejvAWu9Fz19R912W\nR6i6UbJtHWmLBl0vUiVkDZRTs7uN6nKRw5K2nwUJs8yzeJh46xS5BFBAJfeU\nktTyFMy4n319iFlendutjtVWlVhNPtG/b6+W03b+mXR3I8zwXO/OIE6VF4ev\n1QNP\r\n=9sUG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZBvFpgt8GIUwAeNEDGNL0dwf+A3cVmkm8Asu9gmtqkgIhAJrAygrSTR82Dy8ESTkiva2hdEyJ6eaTJ1NTTNekoICZ"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.7-canary.127.608.0_1612900907175_0.5194453221648692"},"_hasShrinkwrap":false},"7.3.7-canary.125.609.0":{"name":"storybook-addon-jsx","version":"7.3.7-canary.125.609.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"3d910b07949d298bf43cbbbacd37f29297f15817","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.7-canary.125.609.0","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-I4+xI9SlzRnZlKDED8bhiEfhdCSDcRMI8pEMytpja5mzgmAku4+SGxWoO/XO7VGRmxZ952IoaspuWHtfB1OAkw==","shasum":"4901515d087c16ea6e64bc8aeb72f3227a76a4a9","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.7-canary.125.609.0.tgz","fileCount":28,"unpackedSize":170882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIupBCRA9TVsSAnZWagAA3aoP/ic6elN4miwwbsLeFjqM\n8/l0AH6otgLq/2EVpvl/3Q7sO7sFK3Uj9jd0QGMotez/akzc2ogeRL1TOYBH\nGh3hMtxCtcg+CK7hgkvBsIbKfc/ySKT71Dx4jtcrXnnKgRXEbNQtUWg8sUCJ\nhfvis5gtCBkU9RN1vcs+CiGyUo83PL8jJRCaWorJP69WgfZl3pB8cU4PcLPv\n/y0ewU7nw3e3K7O8qRnaw0fxSAWAOKkeXfM81CZHRXQeZOiQ8oO4S2v3u7SS\nkMpH0Dr8QWkHouRaxiu6do7MlnR2b4AlvKcrQwblvgYqG7GnNVf+tKfkGZ+h\nabGAAZbzsxhzDNnJPHrhKBSG0S3IFjr2pq5jGqMoPXnPBkWZd6kf9P5brO0w\nBiHJUpXNv4u4fSZlddV5c6ja9RBWMbfwEm2S3inZ/GDH9lyVQyaSf+fdr3Vw\n6AmJapWl8YDSBWkdFSVnNOrHVJkDoRD3j1Z3m287jJetqVVSFpPo4yf3wezE\nSb9/DBDLTXSpdgikVc7CvzCycI2uIGXzVL9QyZ/yqDD3z/F06ud95DLqBezR\nh1QoT/yLhJtnKq++87HjLp2Gv6+6jBYUYp8cmoCPKmn+DaEW3AKamOQKgsmL\n4i/ekfCYi1AhFlUi6bsLW2EFRdBKsOLOp2KCyf23bGlGa2URLMX5G7iQYTRo\n04vd\r\n=f+R7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFnh3IBgib18dz0nzRWUT6l6tn+ywfoMQLhRaJAUQ/WgIhAMl2COEVK06TOcF4RO0Cv7ZO4k4vs5V8wA5EDzaohuyb"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.7-canary.125.609.0_1612900929344_0.48675985295648205"},"_hasShrinkwrap":false},"7.3.7-canary.126.611.0":{"name":"storybook-addon-jsx","version":"7.3.7-canary.126.611.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"47bd6461e15a2cd08c2b3d10eef7c121faa7dd15","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.7-canary.126.611.0","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-s47vR8W37Ukvo4jCDmt18IYGXqPSHFRVUgzf3bP/l3pXr8gjAObZrIARfaAqq0xQLM/V/3Gz7FMe+BLDKue6xA==","shasum":"354d48e72b2b9da6bd1e472585b1555af604a33d","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.7-canary.126.611.0.tgz","fileCount":28,"unpackedSize":170882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIupGCRA9TVsSAnZWagAAS88P/iJw3X0UIUs+QVCjw+RF\nTKdfgqFuaDF9bDrWws/16xm69VEYapjRj9STQUw6VnFRw0ueVcC1Vc/dyrLR\nQ8XD9AYePovAr7HKlW7LSlLwZivXWmy7WJLHHwSc7OrQo+De3TVmhelagpd4\nrXQBWJ5QDiMI4xakU5KXclet3bCsvjrFFaUqupO1iZtw4gdUbNtq3QYYduKU\n8oTI4dJ7Df0tm50RVJcZHG9EFg1jY62XpmkR19ewpmId41/nl3Fk+tSO54dZ\ntKlUB67jh7vhiwxlZ4b3K2g0dHl4SQRI0Jl9wl7hQmW9oSIZeA2zgwYPVWFO\nI+vf2Cd7dR3zF/ondqpBb3/RBn7eUITfEuPJO23XlOU+WFIhiS8OU/kM3kht\npnDTYm9D/xnchZnygh1qPYYzZNsNZUGsMuEp3cOA9eZ7mdTSNhZSq25Q9qN2\nVrDbbRQ3H6FDs24qjLv+Eq9KziGtiMZCoSPkqwZFyDG50aT7RAawLWgxtu4c\neUhsctuaK6MywKLlG91jvbDXFPMjG/YHHXdwor+KwCuFUSNWDXmSWl1nQ+aS\nZJ4HPRX4F8yZxa5T3uxr13PWfZiIunTZ0BFrEOeYEu+QY2peokFJnPtMFtiu\n8+x5MGUn1rvJNu2A+RCK3z1EeLkjWUKMouBComtc/OmUmYnN136wYpDhgX5G\nmC58\r\n=ADL9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHDPFjdGmkDiZ5ZosevnSOA/IM3NgSLq6XGKhuAZ5A8pAiAVSdaq0KApWMHGq7QFq1pW1AG2dlDVckgOVzkyRWpJAA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.7-canary.126.611.0_1612900934172_0.44263402277890074"},"_hasShrinkwrap":false},"7.3.7-canary.137.616.0":{"name":"storybook-addon-jsx","version":"7.3.7-canary.137.616.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"1a0d02aa4356d74eef283afac3f5e64d94152bf9","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.7-canary.137.616.0","_nodeVersion":"15.8.0","_npmVersion":"7.5.1","dist":{"integrity":"sha512-FgCqtfCP3uIzSoB9wyGUowkHDD7u70Dwl1zE45YWmbR+oYGzIgz0N3+zS0AL6n/QrGDqNGYAfsay4BVLL9kNDw==","shasum":"e1fb23d42253c49d2d5d7ef46ec54022b5cd107d","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.7-canary.137.616.0.tgz","fileCount":28,"unpackedSize":170882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIuqMCRA9TVsSAnZWagAAfPsP+wbfn6Nc61z92vVEA0T/\nmsbxavPaj76sS3MeYH7yLN4/0SEv5JO5VECIGJC+xsudnc/vVEcxOOLe1cyU\nmMV5LpMytCgFNC8qTCwBJodua0KkvUdNVJ21DLgxuyeN/z8L6fdwRvdLCaIK\n5xVsDuA7bk3ndNYToxZ1s31ToO6ljGRLe6BquuDC1C5Ozls4Zpj2F3wyDPeS\n/RGlUIHF7TeWm5cdLHBx7E2o2d9G4sSCzl6tRwS3jDoGlMwZmmcBRn6WTqnm\nDLA13zZvVRGR6o9/vIpg+Jb999y+5/nK6GaHA7yI8VDFt1t0VSAmJ5wY4Uv3\nOzMN+0V7zlNgxBeALplvMtmWO59Elyp6O02QyR3vxit9LGTT6zKEo5LSF/tW\nBitceWPZqd2MGtNqruP5ErJ9o7MTagmmNAlMtZUvRd0OVgOcB3huyFlCvqqw\nv8weGDZKqdKZkYhi2mOpwQLmIHiUNkabBngm9hkxQI2O6u0/OosXOd1MeupU\nt4O0HK/B4z098yUjgPoX1JcOu3XG+ZfdvslVLp6a6GMLcTaYgbHg5ecifxwl\nJcGch7a1GyZb5Ka8l9x5/E6jTI9JSKNgLpDv5x33XQM8hyvxRLaBVdhO5IMw\nf8v7Fox50rH6OaQQGK5PRkJZprm/Ngwn/zn6OCcgedkHJZy5yOrxR0b3Kuyh\nR06D\r\n=QUna\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCk1iHOrLGacZY14OQuCE5FtCUdoRRqN8WRoSnbiKa+sQIhAIb6HOTOParqm5QHZ9sqcmWk1lWxPf4OYlV38WHF/E4i"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.7-canary.137.616.0_1612901003990_0.92858496072646"},"_hasShrinkwrap":false},"7.3.7-canary.141.626.0":{"name":"storybook-addon-jsx","version":"7.3.7-canary.141.626.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0","react-dom":"^16.2.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"49a1ef9fbb413a7908051c1151ca3c7dc5e8d88a","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.7-canary.141.626.0","_nodeVersion":"15.12.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-o3mAiaqsr+BVxyQ21cXfCB1CF0QPpamrKerq/bS0Mbzyk978n6HKrgHxLODITyPCSqXq/pVOQ9t0e7ZNlUliAA==","shasum":"41c87f1376cfb301553b2d74d7f92feb834eec08","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.7-canary.141.626.0.tgz","fileCount":28,"unpackedSize":170882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgYzkICRA9TVsSAnZWagAAk84P/iCQbet23PJslaYmh6sg\nMqSJJ15vUNN+nGqUBFtauyWqKdTWtA9oe8QziwqLggdB5VtfXRM7J9ctVXFs\njOxudjyjol9ydgYFXkspi1+scZnYgFrvldbufvEbPiRt8SMWgv6zdAB3j3/j\nFUq6uhtYFuNaYLUWPrGox/dglzk++CSvPxCf8+HY4U5WVa6MSNsSUhqtFtR/\nvnIdUGvh+srYAWn0gHiGpBHsPVRLUPI4zn4eLLQQgZg6y8XfsmHXhQ+J/b5B\nedi7VVXX4PJd8aVf9lWTzXTeivS3SI0e9pwcU+UaiBXcUVaPHx8lyJsya07j\ndApAPzoocjASkR6cR6Wqlu5drdhjIu1vJ6jkCXixDxb7Hna7wdmg22xI+EGu\nqShCiuUq0vOm6EnAJnSSEPgWUjNlpNIg4Fy27UAV6t2tue5keAZH54rM5Hw7\naf5V2GXVlEdIAqGwNXeu3E2sxN1xzsiRmp1b7ZQ7LhjBHVNiGKtFKWVQ35ur\n3/qn30ogn6NQmBrbrHVG6AfsYp+q84HJsQCrFy/Wl0vo4Wk14blSPLQZi2I+\nUAYeq82zz5S++74lAbb3BU0bw4tUj47QTbS5yJSYVX1xP7MDFfHl9ceN6NhQ\nmfQw2n04vD0/Dw22QB52vSyiVWeU0PBDnQ4QquZYGiMQW3maCQVQMUVKiApJ\nnejn\r\n=es+K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2ZWegVlcy7qUPOCVG8IoY0EJspeo8dcEm56PBn4dWpAIhAMbaUXOw5IeRyH8CnHbsB1QpkGskGWcuKrKR9proEYdm"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.7-canary.141.626.0_1617115400119_0.6229978844046589"},"_hasShrinkwrap":false},"7.3.7":{"name":"storybook-addon-jsx","version":"7.3.7","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"gitHead":"cb85164713950dbe26ee30580d6a47940f09e401","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.7","_nodeVersion":"15.12.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-EsnA4RP0L8mtHV3+yPtL+55xm2uwfoJ84Oez72sirh8PiszQa95Y2oIHhPoNRyxYvKLoMtprbwRivEmdS1aTQQ==","shasum":"f51574220b1e335a694b659b2e6420537ac099c5","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.7.tgz","fileCount":28,"unpackedSize":171802,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOGoCRA9TVsSAnZWagAApawQAJtkwWA0H5xLCSEaLE+X\n3D7AXfk0lHCmWgi8XK2RehyAKNVA56H/10nt9QHDQTLiapkWE9dbrU/fw+wO\nIiYSwaG50Pqbztk5RxxG5k1gLujfappQMWsEojWV94PpCNgQI/YaY4yNFSWk\nKDlLI0HxA9E33jB9kh2b89vAb6pxrSgZbbamMsVNrXQtj2qa07ftD0GiJ/t4\n++fS/71LqZqFWlZVjjLjgzI8dGtBFqVwgq5qpZgahJ/TR37wn9XKCGh41UWC\nHeYHETrgWMlMzBzR786Isv5YFVUAuR8m1K3vmsx5NLra4A93eQpMqM1aqj3o\nCMsU7/MB7THxCQosmW4WSoLBHYjAxE0FWJRXrtuljhOYcfN2zkiitTpZDYic\nGlYUN7inZZYdEB7dfe50iaZI3mfQevK4905aA+XzgIxVYeO6N2z+07CPbHI4\nlYJddoNjUcF7//IATJqe/KV5nRQr1Ea9+XFz9GL3LR8O+syur//vMyYhtI9A\n66o/A96k6NKxVzzBYoQVALEs3l40MeiQMdoOPCn9DzkNZ8fKNq3x98oUJ6av\nRgIIqBdm2r2q23+PtlIAbzGc+okWVTQJzCS5h/ZYZsnTbXRUqXTLt//+V4MK\nuwvuI2xbnlMaXsv3mbxDoDs8sIkeGsdeNPVZu+GXbzMuHMHQBhczM5RLYEgQ\nUYwW\r\n=MB1F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA/AlFQJ0d+no4E337HOIjOeZHDzzcoFbM+brJB6oto4AiACV6wZm4q/4eM1jEvQo0WWluYyyDF+Mhj5kuGi/WXZHw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.7_1617224103546_0.5012928261382779"},"_hasShrinkwrap":false},"7.3.8-canary.136.666.0":{"name":"storybook-addon-jsx","version":"7.3.8-canary.136.666.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"44d2d5a41d4da0b4a407bab5fa481a1875731f79","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.8-canary.136.666.0","_nodeVersion":"15.12.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-FpUVNfV6xxsIWxLfWahKg9FMhyM2OqLMsV/uPbZXZOqVSY5a3KkvOpZGY3/PmCwxU4RRVXKIrrfbi1jF/xlZDw==","shasum":"a4f5e62c7721b92eec1f97806ff7c9128168b222","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.8-canary.136.666.0.tgz","fileCount":28,"unpackedSize":170907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOG/CRA9TVsSAnZWagAA/gMP/0Dwd0la9QjBrF6MYO0Y\nMOthOQLC5OVZ+F93oZmNjJh65Et+MESppWqNmHBeQOb7Y2BAB2kjKvj6cuaT\nh2ErLmU8wjKraReJY8HR0N/dRDapisLCAVRA7cVK2Dbd1ugBpaiV20RTCKf6\nTucjv/7HVUgMc+me70XfsUVnWBzQufKCjFBNdKPwLna0lU/55FHuyNBB/sv0\nwkLKp83DcSfSgDW+/kVg7+zlqXA0BRqfHuDhi4EyDdIjl3RfoI0WdVuxo7kY\n8mWrDx5qFg2h/b5pLIpZv9vR4ACNBYZVeI79hyQ6BUOoJ1stTPFyvqzs6/8C\nKeaZQa5oYH9Op8W6cCZRX23tm0MWKidMm7R79s9aOL2ThB3eSY3buZAdBqDq\nrVymD/TR95NKjrh6kZ8GowQ56NZmIASly4ywROSBSJlwfc2OWvuxf+Dstwuc\nKaH9sQhB7OqLKvDNvfoaz9omiY+JRPa9mzIQQqeeHSShKvv3dEtWzZZ5spbp\nQTWtlOmenVf6wIhLnTbLGCaywcji2/Xn9YmXdtvJbn4TAIi6jdCVlxL9RYAO\nw8euQgoLRj/IROyFHNaf1PpI+3mNo7Q3RKKyDNWyC027zLI7cboRLViInCKE\nBdD6Tai5rEOz7qMcU1xyB7JQCJy/lj+FhsOnD5H4y3rTAcGKdgDz0zCWDDhW\nQ/VJ\r\n=O6NM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIExum9FVMQeEtd4Pfueyd9xHJTjzOGUQqd3ys/Oz/wFvAiEApORoxHMixdHWPj6Nl4IoyHHJYfub2cYRpkMDRZA7KBc="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.8-canary.136.666.0_1617224126774_0.3508146038891895"},"_hasShrinkwrap":false},"7.3.8-canary.143.674.0":{"name":"storybook-addon-jsx","version":"7.3.8-canary.143.674.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"2b0778245bf4ac5721c15f32587b23302219b597","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.8-canary.143.674.0","_nodeVersion":"15.12.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-KRR/lkgWbo6j3wLBFp/znJzHrPUuFbBsP2e08WgCOzvZuwBSgAmtmijVbUwF0EwomWc4zWuds7Qa0E8/4JPeXg==","shasum":"7993441fb113777dec901e18041c69f8dbae71bf","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.8-canary.143.674.0.tgz","fileCount":28,"unpackedSize":170907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOHRCRA9TVsSAnZWagAALXUP/A4QWT0livmt51MQ7x57\nvVXvHSsilu8vWjuqBfy3Chfe7w425qfYKVZL/w1YSx2wHoq652EyYNwtwrCA\nQYmN+id4FwcJJ9EcEoTviW9EhMYbg4uYgPZxaOp8dZz7HrUau3e+koBID8GY\nRsX/EMODU18NISHZMQjQ877qalA7xMLzj1vUNN7BndahNo1K1+s7oWdM98oR\nnFpABNFfLVsS54gI76oEF1OMXPqQ/H81r6qwyvC1NZwn2nwDy7aLVe9d2U6j\nCzoxBARlQl3raYYBfkSbq8X9uGp5rnIUQME4Ja8ra0SUFeaXlGJqW8N/KxR7\ny93Bxt4kz4ZEinNm3w3jVnTKLumqO2PgoKCpO0noKvwm/FACBVbzwh8U98i1\nZ7lUmQ7xJBB1LvjZjCRhM4YZyCUHDmLkKrAfTT8PoodAXts0bELQN/SZVPp3\n5GmuxWVXStFaH5CVf17E8u22wjcgOibO6jSkaRraE18njSDn45eDy3Vwv1Af\ndZ7DitPx3YRwO0pBWyXeSBHwqWxaX/Mftaom0goKhtRimewKYwVvztk0XWQo\nWrE9KUS/DanOWHCWAzeeR7jaIyHu9k7fK1rIHaC5kYs67zzAy31WoCPc/LkB\nW22XN5kDzsppJ9oNPpAbA1081WtUhUbgdFfI7BfmATZJMkWxGdkcf17m8RwM\nF49Q\r\n=nwy0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiU3KKCNrkhdq3kzkduvo6Yh2Agx1xtFlZ35wPGHH07AIgMV7izyN65+L9YI6nrv4wxDP+1v/GeSlIkP/dAc3AfSA="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.8-canary.143.674.0_1617224144675_0.20913517994133946"},"_hasShrinkwrap":false},"7.3.8-canary.125.673.0":{"name":"storybook-addon-jsx","version":"7.3.8-canary.125.673.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"3e0bb18648f08903212459d793eff8b2997d82e1","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.8-canary.125.673.0","_nodeVersion":"15.12.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-7zPqi8nj2O8R6EFNNXezPkFQp357Sad0ChixzZZnOu5BsFNvpjzI8KCGRkkGIsQcWVuiPRLoUvP2JNeLwDu66Q==","shasum":"cc9787f64d618f957106734855ab88a339dfcc9b","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.8-canary.125.673.0.tgz","fileCount":28,"unpackedSize":170907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOHaCRA9TVsSAnZWagAAh1UP/3UFr27OzyXdVJn6fm5B\nnoLMs7f025hFf7ulPQUrgVTWe2NCnWy7dmVEZKfSHJGH/KCXjT10XQLyqLA/\nushylJKOfnSN+rOpXIHhdOhEasN/HBP61PJdqkF6VYMmN0sSiSB6RGZtWz93\nXzCKcNgaI6/Mewolqbs97bey1iBkyv+pawWawp8EMT2vUc2noW0oNOtfGIBy\niOneCtzmF3aBzcqY6W3+KM+aLvfSCZVSCF7fi94VLuHAUf+6DZIAwrj1OYNq\nyTfRRJfMUTSYMvpiRGCY5gJDajn7NC3aHMPBMrcevWyUuH5pLxSk6L2NO0k2\naHhZp7s5X1ULpiANt5OAKd7HskwJDGqoR9eniIL/xOuo1K42cr1G2zLrWnZR\nYgOG1KcTJeuioN/F5gj6VuxVdtGJ+77L2qgYEo2xd8GLGlyWIGgw3O1awr3N\n4agznpJNwA8ayQG7qHdtXx2ZfUoeAPcPs0N7doJbykwfbzuRViXDuilE3Eue\nIb7iHAAxtTG1pgP/7Skx3pRmqCjIc5ggiKreAmuP61wYBoylFQcW/7G+FZBx\napaDXqlyYcwWwT9LnraVp+OOX2BFHYrNzTA6EJ22jcQ9XunCsvm9pTkWXAhx\nIq9dbafDvqQbNUtC5cHWxN0vsLTdr8QbUr3L1JBXL7pkUQIGHuxVYBUpwh0K\nTzLJ\r\n=idde\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9wXfVrRJLasq7tiIN90Td/w3ieoZFQuf2h5PwKUMyTAIgJ1aM76K9bOxMtQQRcyhutp581VoGyDLx4IGxbw8heg0="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.8-canary.125.673.0_1617224154383_0.33033557743989284"},"_hasShrinkwrap":false},"7.3.8-canary.144.667.0":{"name":"storybook-addon-jsx","version":"7.3.8-canary.144.667.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"40839ae5f742c94e7cb05baac3f2f0a56663e47c","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.8-canary.144.667.0","_nodeVersion":"15.12.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-vuKRvauwLz7OW6aWEu+QdkahzzJcG3Ml0qhu4n3P4+bFdP96zaSaA6EHlKrNr0BHT3Wu5r33Kw7Yfmc4yHgPZg==","shasum":"9ec0f8f97f3ec8a8f40cbe0be9ff78d3b30a47cf","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.8-canary.144.667.0.tgz","fileCount":28,"unpackedSize":170907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOH4CRA9TVsSAnZWagAA7HIP/0nzZ5Auhs/FG1/tWkM/\n+Oh0ZBzXASLsQ4xN86GJyPMYrGcaJQGuv+T/83yCx1IqVgTE19c3yPq2baIG\neuRr9o+NrHZCJki7PUyZdU56Pt3rrPUwr4m9HmkVzrEjIr8lbOvRyGhjCKP5\npat4mbGbx7H14kIn7Xi3EgI7qn3FU+iPy/c+Gknrqhqd2HYPaKU6n6MoFIm0\nf5C3i0+FVKfTa5XaMa+WyQntKRGOBaPrZkjQf1ffBqgnMlA9xb6zNbouFmEw\nzKjt0v4gDUrP5fruiDtmREeaLe/DblIL9Po/jLOQbWJZwHLvjnzvMeB7FMFR\nYa+4QE3J13K8gd6tjX3bM1NhlLRpb9oHhb1YdVrDXiQz4NBeOpiI8h72Z2xe\nB5TJE/KsbTmg4sxVJmw3xR3B8hvsRPP8jbks0LiJ0bGFy5Ib/GOH+FqSxNIu\nKNFW7Quc7iP1mJLfdZ5XxtnW6NyZmN1WVc+gj7veQ+NT++6Yv7sUarZJEWjw\nJ0x//Jh3ryaYEbNysmWwP+F+5bdPaczJ2tJxmvbqgfw3XAdD6+FAGNo1tZu7\nFm0TS+wnvfB0FwibQFVTC8DYny0asr/tWxB9zEgtPSk+L/+6s+8kTzmtDGDr\n5W53UsNrCH5tNc3qrkOpyv5su2kSJzL2CB1ZaVXjc3O/1ltaZGJhRPrOIQtz\nl1Mv\r\n=vF7h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOMeSJc03DDA1KCORulxXlaYl/qt26oh6jBuF9NYuqnAIhAI7NySSgUecl33u2kVwVMbTVOFaaYBVSQAf12vjXht4a"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.8-canary.144.667.0_1617224184470_0.6757683915246646"},"_hasShrinkwrap":false},"7.3.8-canary.141.681.0":{"name":"storybook-addon-jsx","version":"7.3.8-canary.141.681.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"6e0547cd1b44f537859a7a8006666b20a11302f1","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.8-canary.141.681.0","_nodeVersion":"15.12.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-XJ+qE4V+8RqewVPQROs703FqUbSbiyA/sEyUIWIgClzlcVG4ubF9RElqCPOLKRsSKmmRLxpsfP0ACjjkjy+z3Q==","shasum":"4c9077fff78d466ac3cc8a3f3281db6f89b61911","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.8-canary.141.681.0.tgz","fileCount":28,"unpackedSize":170907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOH8CRA9TVsSAnZWagAAiSgP/iQYH1t0LHoHADohmX33\nCgdBGGkMshYE96mMleu5L8soby+62kqwQYi75FYAE/yF/bgqAa4LTbMAe9h7\n41kzlDoyo0ujGYYYaMz3bMXTFD1DnboRHYHM8/dh1SD5xUsF4zF1VozPOVjz\nct6AVSDqUBjNHBir/Odm4j4WXXhBkzozbqTnZlLGRYgJQCgXLUEkBm1G26CV\nQqA8unwlCABa7i1muMGEc9hl3CJfmCMh0DrIMKZZmOl37MUmVD2o8+5yTlZ1\n1VJ/i3tiGG3/VuOFYSZOTO0sOfvp8uTqj4Sz0a65kCMShzvqeDDXWLSZJimx\nMoQTTc73Y1bw4wvuPQABBNlgzXitSG7I44CxcXW/tP7/KIu8dE9TOo5eR6ts\n+yEr9z+YUNDjsKLTmO3kIDMZ0+nKXd5BiwJtAvVaXLA051ZqMaINF8Aw7bZa\nyZPTsQF6wof0skSojlr3n/H0xs4a/ImDDNPcy3fMrXyIs9onN2I4uVHY1KoD\nF0RZWhy8+QZHz8m5s7pBcJ+RaD2QE+CA7n8yVNl07zWCHKl1s1/ZSUg+9XOh\nUij5ToaAaytBN9XZGg7xDMXvKfq5Z3eSN38WU4iCiw9CMmPYZsp5MDlMYCjP\nkr+RzXo0dZcBksqRIxHJyt3xqiwW1ZhtfxyxCgG1HkyrX1EFhOEmJr+Pc9Yq\nh9dz\r\n=t/0s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEOjduiWILzwa2L07YSFZCZiUn5pilI18hD8Y/Z/mRZEAiBu/HBUO6YexrUipEnPZcF3fU95kuX5CY0+I7rsz1vStQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.8-canary.141.681.0_1617224188276_0.18167656097651763"},"_hasShrinkwrap":false},"7.3.8-canary.127.688.0":{"name":"storybook-addon-jsx","version":"7.3.8-canary.127.688.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"d9f062d442054a9e748c314255950f605700fcc1","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.8-canary.127.688.0","_nodeVersion":"15.12.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-ScXbwwsk0iWD2UmPFKIPWLwn7COX7PErpAeAPUJGlkK06x2Ts2rqsK8ZPjRYHjoYw5B8u9E8hlRw04HMwA+lsg==","shasum":"005b30626c8b4767915a3414761c7e449e8c8ae6","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.8-canary.127.688.0.tgz","fileCount":28,"unpackedSize":170907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOIPCRA9TVsSAnZWagAAFTcQAJUow8I0LS1yl4/iuMHI\nVmwkUizv8iOVJLmC+vke8uUIxHIg2bPywT6m4ePZQZX1+3DBQJc2a+xFypyW\nLzP5qB0kqlax70Bb7eEmbTCSDpgus915YKQb/LzVNsU/dT2DjYK51D7ZHxWt\n+nCpXLl9ARaIxk+Zj4ScXPiYE36z97Y0a0ManC0SMmbvkmKCYMx3ikuRC7Ar\nBXbzoLwo6XzczMx1U3TBWRVwxd8PTXa7Fc5yVY2EX3TRsu38aysPk1/xvVjw\n1ogKhFbLvbPR44nWE6gHt0dXzFfOWOLB1PHr6dVQ4SSI+z92AbU/LuGMHej5\n5fDsECkD72CIG02FTWu3dS7tjpEjsBtCtVMMnK9KpK2GRPAMaxLabagGq9wI\nb3I/gvi19Ziw6AjrkK2LY+ByiGjuJcXZnB+ARBi+KlSkjbEQ+NLPTL7wyTTu\nFnSblheRS0secRkstmdWieGseN3uvwlwlCNXd4wSAKAkEflVPHj+t3W/8aJ3\ne+8r//VrO5Nf+af9z4UMiCfrQk+I3ZH5SQzBD/kouonCXwP494hGZZwVWsIM\neDTGbfmIk8y6IL/NRLjuddUIW8mxLHMszlJuDFMHt7iF0DV1qHnNfn3lKDJK\ncpVNwEApY565ecOKPmbXNEtsd0ziBhspcl94KAZw/MlvgYBzy4W+5ExWRr4i\nNM1y\r\n=HJHZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9iUSknpvAZnkpJ98Abd/TLdkPF++8KDqYfHUU5f6XqwIgZKuVwvMCYhdvinDc1/b08hSk+k3Ih2Sdyz/3zwsTluA="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.8-canary.127.688.0_1617224206839_0.6379795279453049"},"_hasShrinkwrap":false},"7.3.8-canary.133.692.0":{"name":"storybook-addon-jsx","version":"7.3.8-canary.133.692.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"ed3200cf9f7ce8f4011dd6b24b79c0aaa6527815","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.8-canary.133.692.0","_nodeVersion":"15.12.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-ynu8pYrNjKaggj8kIzY0yg0I3NO8oAvnrDuLpQtYB8WW6J0+jDZuZ2AtA+ELNvBRPwDFCAWDiXqub4YNJnxeiw==","shasum":"371a433b0b60382a26f310d61c4e15a333c63d32","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.8-canary.133.692.0.tgz","fileCount":28,"unpackedSize":170907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOI9CRA9TVsSAnZWagAASWQP/jCi1evVQdA3a7h6nhUI\nOC2GgjPjq9GZAK1xCOxX4MHKOA1J53kz16las4qKqmYrpUFgVob/QQgNKOMI\n/vOrFjyfSQl7sPqh95lb8s7F6p2iFNR4NPfP4fN/tWSdjVD/Bxw7wAnPSsfO\nDEVhEfS2/H4buMQTVbF3kJX2H02UE0y8+SscR4mbwZfw4huhQBRWl//CbgLm\nxXHHQw0EKExt9lMXrzNHRq7xB64QR0Fh/a3Q2ZzOUuZQUjnZhmAhWSXqhU0f\nam2CAD9hilVmJRtwIWFnxx6JKpQM737qhGWxO0dTvVA1mCikmdKSrXf4vGrA\nJMqPe8Zv7HbNOvFMJd4iO/qdk6XPunJpuOkb7o6JfmQU0iZq24tILGBC7M2J\nodfUtXPs4w8macZ5zIPU4sqO9w5Sf9l4VDUFwDAHDiXXPwHO21jmBquMy/MF\nu4ucP0yC/esRnC85yI2taqcNDhBqCi+Fl+UZYREFgA3DTjIH/bEDNLdPRImd\nhubzgInKKjYNFfUyxH4tmyoFtjqNshfYdA/vjGB3j58KZZSmZIdIdBWvTnbx\nXrwBbZJfktTvzFufN/E2QgGDnyAfEGTrOyfJguGZ6NlX9qy0BFbN/dd2xs2N\nn/WIc//OBF5dJ9RXt0O48LiO/RxOftUNlivEnCbbBLA4zIfq21w5i5wimP9U\n/Hl9\r\n=32RR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDcSHDq30ACB/ERuQcURAQlw5UKNcprSjaVa9vHNIqstAiEApaPzDvgBrjTfG8cD2cBjRK1scdLM/ThcAubywKfbmEw="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.8-canary.133.692.0_1617224253442_0.3442162504804327"},"_hasShrinkwrap":false},"7.3.8-canary.137.700.0":{"name":"storybook-addon-jsx","version":"7.3.8-canary.137.700.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"64269396a3d47b594fc01d9736a68b824a1318b5","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.8-canary.137.700.0","_nodeVersion":"15.12.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-1Zz4YIr0ZK6A4Lep5aetxWGdiD5iRy08Wap9K/yIsWlQoNnGPcyBcwWtRJ1UvpM7K7++JePKu8/PK4p+bj7Sfg==","shasum":"dab7e7f271a3f32a1253e9ebb3fbd87089376caa","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.8-canary.137.700.0.tgz","fileCount":28,"unpackedSize":170907,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOJYCRA9TVsSAnZWagAAcG8P/0+AMt2zsyZbW7ZT+ooR\nkZm6S7sL8CUH+MOAKzVjDvjQXdNElRxLjb3aq80fB5UpyKS/6iO/2x05FBXM\niKQG6c6eKY/rlAbL+CyPOY+J2PzYGMJ9okbGLnEkqi0UCdeEriYoPnGKVNcN\n0ogfspCdDHjT4j+oGaAZclYOvLF1pPJf69po+AtHjEydD4k3cNAYaexKnvHM\n2BkzsrFrsQyS5tSTeKxdT8n+xDQa2/6Ut//xuTi2upDnehfOOt4GmPWfKyUg\nt33c/yek/trGByJhBTMAaWul8NUhFBWOp1fpPA7LBIqOaiWUXNuyMmKYh3O7\nqXZJxVcYGqiaBo29vGBUruffs0qp8pPD39LvlzBJ93F1k7jfpAGmwkpHEACQ\nPauuZGSDaaZwihY14TPOfODJREwANak0YxkMbP7+vVcJ5NuRm1zrzOgmk5hr\nF8TcSalP4kkKmNOOh3GHUAJH7asafJdDcZUC1aLCbCmM/4uY6KYy0sJIxdNT\nalO3T7n3ds6aWyPbY7YCgENFejInHoiAi93X8COSW3brJg2I3oV+EMeVGtua\n0H8Di8qkih9teT/PJZyd181N99PojrUCLOBccA2E0bKkU/9Su1xJVYJWPsE8\noDGCE2K7VN6uUVp5KBZTkss3vBv6WcAMO3qP1pDtR8rGPFVwUrKBQ4CDENQI\njpHT\r\n=mnq3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA+vRC9vdrAzHPZCN9cBco733QJG08mZJ0/Qis90yXJtAiEA/7IWxkw3+QyJ89BXMVOLtartC0+Uxaxi+e48nRnxqpE="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.8-canary.137.700.0_1617224280215_0.8371744276567743"},"_hasShrinkwrap":false},"7.3.8-canary.125.708.0":{"name":"storybook-addon-jsx","version":"7.3.8-canary.125.708.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"0a67ec379a172c38e48b1af0615c38ab843cfeeb","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.8-canary.125.708.0","_nodeVersion":"15.12.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-eeB2Duwy2Yzx7b2ZyOnJpmJutz08We68hO4dfePeLYh1HEPP8sBHi51MpqodtOa3kOebd0k37JzzKzkZLoH7qA==","shasum":"3eaa3ee89791f4013626f2948f39f678510533d1","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.8-canary.125.708.0.tgz","fileCount":28,"unpackedSize":171819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOJjCRA9TVsSAnZWagAAQo0P/29xxEJh7PusAjDo5p73\nsChm2ppU1ZCaAXgNXs+k73KmFFneNvaqKpKT4MDlXJMvoWygChNsJAN/ts8T\nuL7gxhIVCb8+3evESqZSjxSHtMhLqxkjIA4ao+OEQZ8lz/DoN7xar7lx75ce\n1e6aWipZkoSPKlISayhM52rLtxBySx0oGqgYJZFRU0UdCo7ql7b8aThGVoWQ\nj/gJ5rg1jNKhW/cAMMssFE8s7w+3KBH+jrPkxETDpKUOjTRshApkkRHccW4Y\nXi3vr5TG8TebvTOkDcnBbQ6s7XNykf/BJd1uZFll4V82MlxdKuS/nes+VzOh\nVJKjDnPNMivuzBrOwI30v4yOu62YHzeB5jkDfltyEc2MSXbHtEKff9qJaTHc\ncylbgMXh0q6UBl69ksUINdwGUTT0MlOXPNzViH5EZApiHcDfYBzf4cG4ZHal\ne27ejTQuFPNrUjwqruEcXMM04timhrEJbG+LeU2cI0+rUbPV18pS91itz+A0\nCDsO1M9pdq2/bDkOlb+gUroNTHfyEUFB7tO/cX+zjGNHbpOfAldHPONfezau\nqyaXeJpSN15jlrozXGiQk0xWtDOjAg+AOitfOvuumeERHfoFIhF/9SQDHKKl\nSogpyy0PTCzNzOdf1EYPaJPjF4Jui64nnVF/EFUlcDq2DcJRUa3Ei71xm+H2\nXLlF\r\n=MO2T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDnS3vLW/zwUJBySYI1WjbYD6k+27/tjjWmU+3DrfdrmAiEA6vqIqoapABt7nlElfxMahNZPx9c5nY4qGfnOkhjhld0="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.8-canary.125.708.0_1617224291224_0.5282250025130195"},"_hasShrinkwrap":false},"7.3.8-canary.127.706.0":{"name":"storybook-addon-jsx","version":"7.3.8-canary.127.706.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"0b74710245b573094fd7a25ee814da302b2eeb0f","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.8-canary.127.706.0","_nodeVersion":"15.12.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-Mp7q/P8ZQC/13qv7Whtkz99ZMHY9jvL+MIbwO1oXNUjI7F4xNuSHVtAhSuZPdUKFzITBi1+XcmEUdeQ7z9oIWw==","shasum":"c673194365094c2e0518273daef3475713d6741c","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.8-canary.127.706.0.tgz","fileCount":28,"unpackedSize":171819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOJyCRA9TVsSAnZWagAArtQP/39+USmTf5y6se/gkaLg\nC9nyEilhmfSi4+dHsM1wzVONogWVAWr4HSv62vV3orh/2ypKpexrqsPI0UdC\nj/O2lSs27763QnxQDZvSpCkL2xB51585W+Xm/a51iyGXr3tcDQQlSgbs9NSr\ngVt47sQydal2otXl1gI/7dYqpbHNZrM70/v+l/gLGtE8D78aF0lfusPVzA8S\ntmSAB+tga49i1NPuvb9/MiQ+tsXXCmqCoKTWr8CqJE3Cij3D8e6SEHBj+48I\ng8jZCuAx9I/p29MagbvtvDsbDlBm2MqHT1IOdKNS0B95A2l1OJEyPDLTxj9V\nnbqbYilCw/ZJBqGDcGZWQjZBYYtvKjErI8fQVOSSS1zb62FryJO1Sjn5bX6A\nftedjmjaanhbZbouAvbrhys+FZgGgJEVGv6zQ9XyptPMisTdIdsj9InLbAVx\nBwNW9RjgEw+cPqMqyb2mdK/nk7vc3yyVx6QpblRSXHE9W/cpYiqIbKYDTqp+\njMPp2lb30ue+Xxg4ZQH0l1lbf7aztWmQBxBcJrUdyJlTji3Ri2l+Jbk+BeKj\njBH4m2LPTvwp8ep1DDssU16Z8qi0+4ANftAW8PFrLE5/6XUTqDzGatCyNWuX\nLgSCndNze5dP/9jor37z+rnDj3AxqlWDZOz8318Z5AeR1ToPA+drdpEj/plu\neu9O\r\n=0YvJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBkhP3+0229PSZrmAJFGZi7Zi/+YLMeFNIlTGdjAXZDgIgfHuNXi+IfgPLHmRODw8r+83KEHqqrZXTf6LF+0bnnTs="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.8-canary.127.706.0_1617224305889_0.8680119215920907"},"_hasShrinkwrap":false},"7.3.8-canary.136.727.0":{"name":"storybook-addon-jsx","version":"7.3.8-canary.136.727.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"e69a2f096c038179d99e3aa3905104895e9d820d","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.8-canary.136.727.0","_nodeVersion":"15.12.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-ujT1iSRpCzssFh6u6b7Fn2UDMTl8wW/uXsDBJS5hNgTt9e27fL8FO7itn74Ru13C3kEw5WGdKhawJ6HUpxLI+Q==","shasum":"6ed38e3bbae4055d4b0a7c138504621a517211dc","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.8-canary.136.727.0.tgz","fileCount":28,"unpackedSize":171819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOKwCRA9TVsSAnZWagAAfcoQAJGDrMIesJ37t62zHb4v\noSvMnOgXg2jRelNy6LX90ZGhAhszjAjvBotYOdC/hx4g1y0uuGatXuI+wlFc\nD/LKEG32oh5T9KK/dGY6OkVX60xEHXGXvi+OuXrPWsg8cjYB1Iv0gLSgDzeo\npAiXXyySkcmfXSDQ8eHgi+xfaCcE9c4RyaCVqnWnEFBOTrjjM8S+loltrZ3r\nfjmOHurlL/OXYiklzaEu9Z1Bkv7yCIfsCt6LB5jeYqwja6d6Sw5Vf2fvN9Yg\nCcegFDrMbdzDT8ISoD6678MfF8UwuobM8QPFY8VyOJvTMoJGHGVW1QLIbcxA\nDIRCLv2nMXuxREhCbUSSVaZfdS0ygZv52mYZuNf4Gm1Y3277sQE8oQ+5QHHn\nrcB8T3+3ZXGmD8HruvKyC39vWJal7O/p1J//yXsyw7IPFZEdr2/qLlGJv8Mu\n9jai1Sxo9uUfObPMq5AwLn1jxiLMDxcyrXnnWAkf6nNVIir0KLWcK4ICQgak\nR1Xh9A0Tt31lKhllRvu3F/0D5XBPjXkPxfl+j0XsdXe6jQ2Jxe+0Rt1iIDCK\nVeWx4wrWfyLqr6QpNXUkf+WBecXwu4LZ4AaDUsI2dY9ClajJtASef09S3v+S\nStbZpIdl3gkteCxTKbEeXlT1nOojjwBr3/kKwsVsOSrXugGOQxSXQ6Ao4hHT\nZBRs\r\n=2BfD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH7guWKKx5Fa9rj1vmNWydkklBxwOmmPxHZCSYw9fcT6AiA3vvi3E8NlZUJgeOXUSilSMe3DGhRUJIr1jFt03PvgIg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.8-canary.136.727.0_1617224368041_0.19296962881007862"},"_hasShrinkwrap":false},"7.3.8-canary.111.730.0":{"name":"storybook-addon-jsx","version":"7.3.8-canary.111.730.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"b39f351150b97d97b6a4c49985766f552c08596a","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.8-canary.111.730.0","_nodeVersion":"15.12.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-ZCVU1yJ24b0b08sIqzgFb8AVH2qdP6QBTXHX/4NI9MWv0HUXfbkYRD++obZ05VzcpuuSBI9CwJI23Tb0akFQMw==","shasum":"ecebbc627675de0f337c632f20d4e5037d12d75a","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.8-canary.111.730.0.tgz","fileCount":28,"unpackedSize":171819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOK1CRA9TVsSAnZWagAA0t8QAIYAuafLvBfAPeNBjBbs\nwBoIAZnC06P2qfMzrR8Ov87O0XPMT7UBMvMfT6U3iLgitDA0mXPVlXoSM9r0\npvU+N12aP+lfnkXAdab0gLE9lTTNvDUQp4avcVtubHbv2LWgy1Ks7e74vSVX\nq+/7VZSiN9v50GIdWPdKBLQIPdPZoktB9we5tMeTv2zg2iYfO1S5jgcaiThi\nsupYQt9/Rf/V47XZ3wozcz99qMsZxYmd112DR5HaxtMoRJWbgzjIfwIKAxry\nDjV5xwcNE7p3Gx6sK6qfPES75HH/GYDHCpPgX4BD6K1DdKYiYmyn7AFQvE0b\n0/zr8V8m+3jc4pdjztCudoLPqalLz+asQEDk0TYP63o9DyT9Z48ESQvUzwsM\nXTpB2dEHZOBVPpEDgjQztE0peewx+dMXaacfcLRzV7cJlJg+k3X+MJ4W4oik\n9kOKN8GX7IcM77keCVsu+BoHWlXUfpvNzNTYZCdveZiCko5BpSu2kMj/+a+S\np2KpgYFU3L1m6iVgP5bNr8vg5toDmkJzUfeZyNkjTNPxquHjDcfp03PuA+lS\nRE3A1jq9YbgpMYTEl2MWi9CBl8HorhWunPpmKs6i/Q9ZrIjRy7IooKh4Djb6\nqmDa0eyOIulCqBKNlB+PrSpNzmViUhG+8oHUKbt7gAVQg+eISW0xS2gzO6mi\nCKpO\r\n=rgD/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCq4RzXGyWHSleA4l6LFuuOo0nvhNa5EsFUMFZSrEpZoAIgJZpm1sslHS83pfP8HRVqgeOVJnuPTo2KWW6KFhgK07E="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.8-canary.111.730.0_1617224372691_0.48720131071380823"},"_hasShrinkwrap":false},"7.3.8-canary.133.729.0":{"name":"storybook-addon-jsx","version":"7.3.8-canary.133.729.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"277d1c22da99c8d10e0c831e26700284400ae6f6","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.8-canary.133.729.0","_nodeVersion":"15.12.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-md8MDT6yykhZc3leO93SUjg7xyWaR3bVgZfhsql0WyfECkrL64YOcxQ4EAKZW11nqM9cpvQCwO9SGqrTU9t32w==","shasum":"d271a0c9b1ce2a7391dd0ad81b0b3916c82e5f3e","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.8-canary.133.729.0.tgz","fileCount":28,"unpackedSize":171819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOK5CRA9TVsSAnZWagAAxS8QAIRkp3bqEFfiztB0eyRS\nFhNQ9Cposr2y9bsMIFCh8rqzj9qRrfsbhK81WSIfnlTAjiZiOe430UymBaRj\nGUOmNuC2unhyZ4W0LWkScYReGUpUYaajAj5jrsokXepnmhNVG3SyvAh9OflS\nksBp/NOlB25C/aWQdYj/Ukh+vBI7Mk6nYBMhgrTA53q3FG08jbRM1gdlUnUl\nBmSUEbyGLw3bdJKbK1OMioLFDqznizsRzXKt8NwudsAkroPFlemFRdVo3Fw1\ndVVqgCvIvrhsxPQl64x/2+gmEbzqu7YOkvcQqPM4BRuTJG+s4ZxupIIf6EvB\nm3fU5Zu53U8CZZAKUZzsQGuTTlS6GaDhZTx3N/E0v9A7DDC970ILl3tb6vty\nS6htMrKsWfu7676b5ZqdF93gDZ0dwfCD6zXNJhczNpeBjA0M0JpqET091Pmh\nu0HYZ1tX6pMV1ncWw9llOnKzrBV8DMKx+GriZL+qF3F+XaIv0xI00GuSyqWO\ntXdem2tvQMdO9TOPCS6cc2+RLenvSawtQfrpTwmWSj+2DF1zCWKKUfEzqGLK\nK0rQs7CYfU6xP82dEnx/cZ3GBTHB9sDXILz6Cy+w+/kZ1wu6vYcZRekS9k8Y\nZSr67O1pIpeHM3I7ZQuuEB6UuWA9D1U2ciLg4lcXyOjFgAcvuNIoJUl4xlI4\nMGY1\r\n=5KJ7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlxHYwp4cP0Gfg7fu8xJJkHEMlmTxYEgoJAQWVYQLA+AIhAPFqQZPXAVKIAVUq5HT1FkE65WbIZ/6vxDkWA/LtDOSK"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.8-canary.133.729.0_1617224377396_0.3856835962455314"},"_hasShrinkwrap":false},"7.3.8-canary.143.731.0":{"name":"storybook-addon-jsx","version":"7.3.8-canary.143.731.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"9848a22e8a937f74e5535ee7af7f3cac978028ab","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.8-canary.143.731.0","_nodeVersion":"15.12.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-nKUcGxGjYSPwqCKNu+gCYIC5a94VxP9gzWtamHM2ORgkY79EcnKDA214Ca6H99i111AZR5/lz1Du2W8jJySIrQ==","shasum":"a1d03cdaa06e1734ac3cc9aeb290c8d6b474baeb","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.8-canary.143.731.0.tgz","fileCount":28,"unpackedSize":171819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOLHCRA9TVsSAnZWagAAhdQQAJBJ6VWoWgbuDDTdeT+J\nYjfXEIMsHwndqnUa9p0p6EMVZihzch8oAhq+r6jY1AHBdD6cwxi9J/amYTgG\nUIwwf8DnKIoSrfYQ7r/3f1W81iz3YAtTYE1v52HbYYLsvZjWos8cuTkyVCDB\nDUynzs5z56BdL3co59biP78ZQ7k6762Uvew8HllMXBD8J8fYZHfzSJtDNaaM\nNoZWL/BRIbeYcp59qSyx8JIaiwLS/2SC+1HviUo+TQvEMHv4aUegJtQzFktK\nUHq5TAP2j5PvPUASSR+XgntyeJ94myJCmNfjdQBQg8v2tq7/E6wz1bZoKyE8\nM6OputBXeZ21Sn7vFXZokoppZ8NOvZJ7HcziMbMmC3C1r5q66Qa5vFDNNsH9\nyDoLQj1ZviKLv3aMvIdD8L7ULT0tW6G2vpYu4w1aB4DJQ4TK9EycZMad1Hhf\n7aesCJDD+uS9iMTkLABKzYX+XiUZ8Wu5Qp++3h/Z0rB1lCmYcvwfOs1sp2L0\nr+K9Quv8ZTzWMHjraTNP/UxUNszHx4ShYb4OH5OeBhyM/mwntjj0NkwP6n2N\nZlQLcYsHPCOeE4JrxDwNrFScyl1BYcSHGSob/dCbPCRu2+rZR07ivNNFSSdO\nOj60Ptiz94PIx5E0+gg5V60wis4xp1IanKL1tRjNPv6RQyRbmhweQImpesfG\nz5nn\r\n=A06n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAbzNZI59asfcqzv+PpXBBBbq9etZq7M5fSIFqZHiLq3AiAgAq2ALStGdV4r1RUniULwVbb58ExKJ3ICrzCLfwT6yA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.8-canary.143.731.0_1617224391043_0.04569993435023467"},"_hasShrinkwrap":false},"7.3.8-canary.137.732.0":{"name":"storybook-addon-jsx","version":"7.3.8-canary.137.732.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"c9aa3244d53325a253fb9ae3dbf206a29770c1b4","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.8-canary.137.732.0","_nodeVersion":"15.12.0","_npmVersion":"7.6.3","dist":{"integrity":"sha512-Ra7NJQ+wTgfcufgrO84Gri6tEKFYJcjAkBDkn1e8x0blgit8cgjsrOm2TkPfLwt1/EdihFhkkuCHImPZZWCA+A==","shasum":"591b25bfc31ca5731e2ce601aae424d648853107","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.8-canary.137.732.0.tgz","fileCount":28,"unpackedSize":171819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOLiCRA9TVsSAnZWagAADYkP/3Gpd+SN/vRGZDUrxKM7\nq4PIBXqvH6VcVqdDAYTajNTlDeXz8W3lGjn1D7wVvpY0tLmbXMGjrA0tafCg\ntsr6XeO7cMq17WDaIRhFfzF/2eSN7Dq8lvS7t9q0JlrJhbf1MOQ3GL3Pyqai\nVPArqiwmQIUVrDOV87phcR0q6kcDvyNCEfYGNkfUHKqknSn/Rv1JoT5F3VTi\nD99uW46axT5YzFN1BCMF6k5KTWk3dYs0F2WbHWjhWWDeXHzuIyvqFFbBJmBX\n2pvML21caYgwa3IdwXKOzsQ7b6edAh3XIwn6lHOnXanTFvKnIrWJKJsgJSDw\nrmFA8jpRdYHEYV6rZXstFwXEj8D462ZGoJOuFvInvA5T2xMp7XQdrykNIDn9\nmtdOfsOKu/RTJozdyntHi2Wd/TEBRMnE0tHM0vNBFYbBqjrpaiWKLoGg7nQf\n8FCRjYObLaySxUeqtk3fMuU5DSL05sVz3XrmEH5s8Um625Hb2dpFRjdbQllS\nmyQicalb65DTdEPY8WKFsC9vUYVrche0A/6L4oWnVtlRLo0vmDaae0GB+ZiD\nzL+wvOk/ZujlIhhRrsCfZxyPHHqaL/9+/QH62pcwU14yf+wg5IKhR+Xmx1MF\nipW4/E79CArw1OeDPG0FySyC0FK0SZgEvVaJMT5lghIjSKBboHhsQWBmV/aZ\n38eL\r\n=n8rm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFawiVuRxQlgJFwVivzVTqxjFgNfhXUkKIB5SDXKHf7zAiEAqxGFYp8AJvbCOIaToGYh56+X/yiHdmQoW05wnYo+2hc="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.8-canary.137.732.0_1617224418368_0.38239598332211977"},"_hasShrinkwrap":false},"7.3.8-canary.146.737.0":{"name":"storybook-addon-jsx","version":"7.3.8-canary.146.737.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"4523b5752a4e03e078c589a8640591b091ec110f","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.8-canary.146.737.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-Nj+Kl4NxUcfh1Q2+w+E5eWRHfY6FKlv7l6+PWX8Y9A8k+40LzhbdGHuF/ELM70GZoIJ3etZfyL+mxF18Nr8PEg==","shasum":"98f8e2ffaeb1f50fafb37b0f53faecef67938bf3","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.8-canary.146.737.0.tgz","fileCount":28,"unpackedSize":171819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdbbJCRA9TVsSAnZWagAAnc0P/iVT12dZ7cpAISsl4wW3\nhEKE+cRc5quc9gSeZuAzKcyYzF9mY3w6rEOkX+ocVUxIHimcqk0uOkojqprM\nRm4jg3eA4EjCZ4BWD8hAIl1+foE3KXosI/eGC6S+PyCHd9NpqjDo/cOb6RTy\nQPPBcKtkM8tPlI+QDVec/kO1O8oOcX7BJ+F+9XjshFo3ZNUOWLlvVvpX65uL\ndUdl/UCT0tHbby4PuIXtknQ/ZVRiLyrUfDkDSJtLrKVtIU1TTyBP9blYO4ZG\nUFySqRfTYlQE9MB7u5ZhwSD7HTNEviRiFNMaNsHp96mJ+ai4iMQQCDI7prZH\ng5oT3yvOkP300W8AnjosmZdMBoMUAPs9GftCizpCslqLwHD9/gKmHDH5L8ct\n0gbUtnJCqC+MDzKHchbA/NzVcdyQdwvJnwuklNA9EVH7sHNPvWWJehB2pg+Q\nYoQ5Q8ycrleSh0lKDCKknU31GwLDCK5Vyf41ABw2O64klnl+XF9WXDnIChHA\nkZ7d/qpxvFhIXz3C1DSjpw+9jc1z6HWDruOtlhFoMyUXxdtFSmmJLtgMH8B5\nY8Ih70lEwfEgBdWBhTQ6NK/wpB6SUeXrTpaktOoPOHaqh4FU7n0j908XsE2s\nzdTaisQhAks6Nq9ajsye4Oy44pCp9mGndLXrrXpFrhsHHJlm17+bMnUapw1J\nTXkC\r\n=9vP+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKStKeAV8VF3puuAePEr51fhfxfhxklZo3FmfSGXjdtQIgKxN/Sk6vSOIPqf3BFgkxeUKyKlSoSrtKhF+9/rZPmvA="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.8-canary.146.737.0_1618327241114_0.9513626859394744"},"_hasShrinkwrap":false},"7.3.8-canary.143.780.0":{"name":"storybook-addon-jsx","version":"7.3.8-canary.143.780.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"4a3c2836952d4ae004f95bd44e61e80d925c598e","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.8-canary.143.780.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-uLnkJi8Lbq9npNySLCAd691KSM3oNsv+o/MS4DbTWplz05K9FtiO5nOgfCZjuMmxjHkZRdyb4Ck737VkQmVbNg==","shasum":"75630ab28c808496a330ee6d28841c7c407dc608","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.8-canary.143.780.0.tgz","fileCount":28,"unpackedSize":171819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfLLiCRA9TVsSAnZWagAAd8gP/RjB7rXxqMZk6xHyAgME\nwQyYBNfiEQYCSkLU+mbnfhXnY8aHjmucnrPVklISeCAY157dTYrq2kcpYF7K\niWYqrKaB7SD8731c9NLzCwTrTNTYus9+6oMSySBJ1gLKTWN9UfLRrEdNW7xX\nqqXlYQlAIY/ctPD0zA+160OYJXJM7Ow9h9c16VfajvwZlOuQRRKPVFELwN2D\nyon4x1OylMD1N9cegsaGRUqqC2GZ+z4+/CMcJhU27pOz+QXP4zC01JV78P0+\nWGGOHdqej03SRP6l2Lv5A8nWYfvlMM7Lct68O6sWFwAKCGyp/Zc26TF00P8U\nVZ8Pj8qwffRI8N8P2jFPmvmiiInsajQb8R92TFY4P5GwiXQNbjfOeo3MuGIu\n7sQAPpfWE0Drkol0+5RQRai8MCcBIqd9D4J7KI6VJ7LJzV/T2h/X3YpgpaYw\nPCvLTRTaMlg7Vxsb+k2b4kiaYS/oaeZ5zWcg1Smt/96mTyDomrZnIIQYNNdN\nUnCs5z/koUj8VDN1YQEvdmcc63tiJtKUd5pSGO16d8RlLY1x5xvME+qJ3zuk\nVK1oo4sfYNLkNE7xYeeWiH4ZJ4CEBXwAPnt687NZFZXbXFUpuBuN7Gu4QC9r\nysjAu3wf5T5FPELNIjCAZBZ0mbLsv3WlNnBX5GfGUXOcmccria22YAWKqySA\nMHUc\r\n=Qd/r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBSFx8JWwoDy2rBmyMT9wTcikYMcFiaXd3+NvGc2X81AIhAJt9oglnOmOHgHS87YLce1zaocUjO3cHhj5XAt49Rb5w"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.8-canary.143.780.0_1618784993917_0.7605601081396449"},"_hasShrinkwrap":false},"7.3.8":{"name":"storybook-addon-jsx","version":"7.3.8","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"gitHead":"f5ae6edae6458bdf48921656ef0630cb4d25ea55","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.8","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-fDZ4/6nFS+aN+nXajv/55d7K6ihe05/ipvvNUyJeJxW5gs/b0T+3aYXrBmN6vM4K+PSbj4estqiI2v4uGPQAMg==","shasum":"50c9a8c81be15a544c8b1e419739c7f5c860ef64","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.8.tgz","fileCount":28,"unpackedSize":172079,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfLL0CRA9TVsSAnZWagAAhSsP/0pDNgDfxCsRkQmEZ9Ly\nFoPxbb50x6z0KpqjhZZAjn88JL2y4t2y3dpfOLD/sUispjzbT4klpWqCsuHA\n+o82l0fXM1JL60+7Tpt34O/5YS9/TLLdrg7ZRIjM1L9OhWWVIdXeOiZYEhxg\nlUM3ZtYUfmQ2F0HpInzDzeax0hjz7C4y39/T4TzGv1fB+a2LKMCt+C8jhdGD\nRMC8WufyI6SCAZ98ykRrBjK0idASDLfeyvhCXOXZhnoZWbJRwvgAuRX+4vBr\nebDfzWc5XHk4Bu7uEgO8e6opV9vETr1hbxx/nMSL4RwNy5eHm+66CHUBpDiq\nF1C4AnB9mi+Rt77jmGaejZhl+ycM7WidBz/iXYde4PX1YvAlbCB5vy4BDDep\n0m9PEWsOcKxJl5tNnvrcEb5eoy6+lxfy/y66AA0aAkKdGYLqmNfjW2waS1hZ\nTQOWsmPF7kHxP/AjEp1LKb3XRZR7y9zL1hxu3AEzLeohoh716t9WIh6bohLE\nai0flfe76E2ROIXs7kHOhtZ1J6oyjCCezqisG8dp9mADolpqAO7thJ792I3w\n0VyzMqfLy05fohIfjAf+9f5a2ZTsbj5dymelLcck5l8smhJzQHGOpwhnx2iN\nNb1HqJuL2YDWmLyV0SkpGfbsAC/X43b5zmgedfp7qqRJKPlBb/2q3RKRl+M9\nBVRM\r\n=Mxvi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEvlE6Z75kuLw5AV2Q0YR6rpfOmmJL2c1hemwOra6h37AiEAxuT8/fIvfNGtEXlifFLE/IFuUzFKY9MHpOUfXJxUXaE="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.8_1618785012145_0.5803144380395533"},"_hasShrinkwrap":false},"7.3.8-canary.125.782.0":{"name":"storybook-addon-jsx","version":"7.3.8-canary.125.782.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"719edf947adcb8996203c094eee4176c9b9ba21e","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.8-canary.125.782.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-qRK2dQDLbKFI4iJ8H0lnQ6lcJdmeJ1ySWbNqg0f/hnG/cteOn7kjzb14hbX/nl/TVYF1oxFCRSbHxD8VfUk4sA==","shasum":"7d9164a7029fb2e7470d741d19118298dc5f3301","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.8-canary.125.782.0.tgz","fileCount":28,"unpackedSize":171819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfLL5CRA9TVsSAnZWagAAxQAQAJxouC6QjT5W+E8jreHG\nPrxQBxQfNV5QZQTc54VG6AYULWxr9ozd00EADjPoWSDuVu3UF1StLT/fXxfy\nchsNkeMPUZpEWwwKbPtaCOhNUb2Fu4jfhKJVMRX+r0O9/qB/GHo0eQoEtXT0\nzwWlpSjDvk4WuzYtGwDLsH6Zb6vOp2CJ+xLTmMqBM0i/R2S3qh5VdFXITtBx\nZtGrVOARGi8pRa9UeYuYHvGurnVFOOERlzEiqUKwBUC+/bX4JEXzPZusWqkI\nszCH+b1ywU5qvNgENoI1VsvcqQPa1y098VJqD3MGvdyCtKx8Vv/hTE1dpQhY\ny2ddMFVwbXDEXRSdtVxY5CoXNOM7Nt3lK5mxHJx3QlZS727UkaVE7ztHcKIE\nxkUMj5+36G4ZEhgBoRFllL7j2F3GJp21dg8T4BmMF/vlBoQb+m6Or7FZObwC\nNgfJNLbSR+PVlj/XcL7n8cT21RcsAth6MNinzFCFBiS6kbVrYLHJpZHZHgxf\nur0LTKtkiUp+/FT+TPMknSrc2qPo1+/KSh6S/4TbIh3IYkpD4PCSF8AHiazo\nw72QwWIjK4dUf3t+UgzSWBtF03IUEC1VnkYD6D5D6jK6Qtvkeo1E5Sa7bIot\n7NMkN1WZ7d0U3wv7zX5EF8i7F3S8SryMNHE++FUK+KKl5t+l+XVn3V6P6Y+h\nU3oq\r\n=7Z33\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGTqmD4ZjikurDoWRM6dOKwq//zlvN89ZxONabC1MJKeAiAMcdLXBNle3hMCWEhxhkLx9GKXs0nZK0ML6rvP5JZ+Ow=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.8-canary.125.782.0_1618785017078_0.6198301465627771"},"_hasShrinkwrap":false},"7.3.8-canary.111.783.0":{"name":"storybook-addon-jsx","version":"7.3.8-canary.111.783.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"e5adf77a889d70dcd1f08391dc1296abe07ef23d","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.8-canary.111.783.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-JJNvyv2ATQ1VgyKHUfLCAkTp+muqAq8Fm9o595d8OopXsAAIc20c1lbdNBSJ4eKvGjbQ//DA0ee+acHZDOFaaw==","shasum":"9f8a2a47a8e94bbea49cb7c7cd81032772099bc7","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.8-canary.111.783.0.tgz","fileCount":28,"unpackedSize":171819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfLL9CRA9TVsSAnZWagAASVoP/iOXVnQSwDW37Rv+DRz4\nM7Ce5S0Y20VBRxqQHt/ErYeZAr30YPxQieNR+sKluEN685xoDFwdV6R9REg/\nwyCRRueoPLxhBa/lcdpswJ70Jv35seKoshia/IiuplnQtjokIpz9CaMe19Ps\n+eDuFcON3xepr/8cscscMqmvit0tO78zTv7+Th1V9OtUkQleC8VYfwPe3YI2\nvepzlnZA7sUO23p/QpamzTPstgIy3CrmkrbKMjw/LPErl0f1Q172Pvlp34yT\nJvgidGTpgGo6MefwUJzSSRXxCWgF8kTjgamcCgsb2mPsaZdp6EjhjxNhvl90\nvl+DyYQnJQewhTmiQ2d+S5V+A4iLAUQf1rUbLYhX8/yH+Oa26N7RRkbClhcR\n/eBnQEMU0/2X1TZkezHRCVMh6d/x2Y+fzNKKOwmxdUhhaSuvxiUJMYiocQfC\nklw+kD46upZxoLqxDtfiq7CmVWeHEsKHsFO9HEobhvtY8YLgsMF3QLIanZFu\nQy3p3uPO6XnuMemGzfCQmbWmzax72sev21Mf4Bkglu+qlIgw4Tqw/sPLAv8T\nWFSvi6k3tbiSx5oKxExI8Xb9bgLVKrIsSIfJ5EUZN1z2nOrCD11ACnwKTM91\nAhnnaM9nBaFdWmHW2ERmFYA79DhV1GX4BH/KUCgggRNp9hj9INHyesni69Ok\nt5Ov\r\n=5GqS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE6gjmrho8VSc8vv4SmfizzHonWHsXB1rrSR42MYQl2jAiBPH93I8Endtu/nhyrfzdlt0t7XTmhhP+KixxmhS3hczg=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.8-canary.111.783.0_1618785020596_0.5586702478175962"},"_hasShrinkwrap":false},"7.3.9-canary.137.786.0":{"name":"storybook-addon-jsx","version":"7.3.9-canary.137.786.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"767dc6de24bdc65dc03ff4c1b532cd065da02403","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.9-canary.137.786.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-giCAo5vuyJ92LhgfVv5PY/dMNiXwcPW2JzDqiASJmfB7XnrmZlW/PFW9Iv+QWQrW49iJDdNRHCpfCPVOeOBLuw==","shasum":"6ef3ba7f7f3099fc9065f25b2032f3c1b4e378a5","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.9-canary.137.786.0.tgz","fileCount":28,"unpackedSize":171819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfLMBCRA9TVsSAnZWagAA26sP/RzNVBrCr1P2VdUnUHWD\nqfXZXUHSdP5/0C+c4DvU66ebS01sVI0r0RvIrws7mgZ++ETv8azsr0fMSPvl\nfZlmrQn490rGShhW50KrgLEedGDXSGH2yYiRBBkJ1blyajBLa3N93VVD+lpE\nvxprGxzxwbbmstGsfdzPXz/81WExWvR4As5FCKg7u553XFho1nnFtALcMCiO\nGVLOFukFAsVdjstIiA2BQQRYDHQfUc0usRCztecockfF+76PYeNcqAcbW4Qc\n4s3L+ljZ75giqLvMUHqgDQo95V7rNKY3xTk7cWO7N1dyctYcTvhsN9oRtkGv\n4GNEhHeAovKKmLHIadyhnWZ+l8Fl5rjZzMoIXkzsGJuwFnWOlC0zaJW4YXJY\nS5+1T3Bz7DXubrmRDKei8F4i2ZmeWhYmQTAVABr/ZGeTorH77HFS7dFudSY9\nflBXxrTABKJOuWQ6/6k7Sbw5vVMHEX8iLRhUuCi3e+UR3cSDuxT2jlNAHfnY\nN9WwlhIW+n1/Th06+qdwDYd9FX+OPWvVk3qatdyuvtHknP3l2UovuafLSWET\nbONxmaINNKpXua1knj4Ua/eAUQRAkMoaCr9wDNC3iN7NJ0HwKCWqPiCdPeEh\nXtV296CH0rjqnFuUTc1w2psotT+sAq7bpCY840me28vIU105v8JMaMfAlD3W\n+KNo\r\n=AIgF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0BnCUXkS9rHQar6YO8nrRcuKefUWRszhMNXqY8tbJoAIhAOMmRmS9CoWZcXGpPae3F71cz80YCdKn0aoEqd4g23wp"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.9-canary.137.786.0_1618785025376_0.05846315323576445"},"_hasShrinkwrap":false},"7.3.9-canary.144.785.0":{"name":"storybook-addon-jsx","version":"7.3.9-canary.144.785.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"2eda2b91cd605e44d1282f52ae1dcef0e70d01ab","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.9-canary.144.785.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-+a94dgmG+/LgqxGRirzqmSlhEm8+u1m/9YNkqGSTLYqydsXeOyCBfEvA7Vgh8CxBNUVoFerxUv2Uj/ZlA5RO+w==","shasum":"657a99e221023b848b479a34fffef4ce9b873c35","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.9-canary.144.785.0.tgz","fileCount":28,"unpackedSize":171819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfLMLCRA9TVsSAnZWagAAG20P/RMhqJZIpr87By8aCnYz\n2tcVRTIA2Dd01b6xGNb70xaqhV8C35FDrjZJ0RsoAQ7kSr+YTIJ+hYHbAY1h\nKuWZGRd4MLN+WOrPQs2cr1ky90qWgP8k1es8qaMQEt7jaDE1sqxlmC3hjXkC\nqrOfaVpMBSPFGCWb6zGaktng/oLhTw/mkP2jVvJwJQhonGvbSYP5zhJ1fNYo\nwluX92gk2CvSs2MPA5fba32n4mmVwjULNz0Uu+J/2iNoDX9fnKJNU0m+0mIA\neMnVqnbNxzOrJbf0xJDNJJ2/xFtIO2SMF378itQxHy/2DhVSh+U5zf5qrPE3\nM2rtV1bwRKNX+0L2H/Be3tVZAYyxpNjcoYO9Z8DqGsV0ZIjN4O6md69Muocr\n/NmhLocU/CJ1GsJRy+B7QmdQkJLyhEIX15a4y7C2WBfPoWnalv7IK5SyFiSL\n+6Zf7y3F86mxjwAWrzxUS3iQQg3HkF9kt8I+gzlVS3l+df8sizw7DowRyk3f\nQ4yvoag8hI+lliHKTqPmieu8gfwWX4kf9lWlJuyI3YcRjDOCZtbB5NHXzTxv\nnVJvDQs3aSAB0DQNCSwBMkLv8zLGtRQnqqBzjinV75UkXo2EM7wpxpCJBiBY\nX7NR9XRUL6l3Hsjdc6/ZowaCUDzMThJBAVvAKbxVmvtcQNaiajVkXULHotEd\neysK\r\n=luPn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDItl8zE6LefjRbbf1b7ilAAXTBkG+/eda+KML6NCfBfQIgUpMz85TydeGtmJab9JqMW67koYsdSpAIrboUzF41b0A="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.9-canary.144.785.0_1618785034853_0.36388891350654107"},"_hasShrinkwrap":false},"7.3.9-canary.127.787.0":{"name":"storybook-addon-jsx","version":"7.3.9-canary.127.787.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"4e751e2116a733482154ceab48c70ea29bed98e7","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.9-canary.127.787.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-bZSvV/8CNqptluUGWXhfSGkWbrVRkhMr0pcRaKIu9EX6HBLj1ZUsm+IkUtGPwrb4dnZco1JgIopbyEG9+nA41w==","shasum":"22dd6f3eb858727dee4d7ae70ce12f16fec25368","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.9-canary.127.787.0.tgz","fileCount":28,"unpackedSize":171819,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfLMSCRA9TVsSAnZWagAAh38P/AusFv9SrA964WgG01R/\nEIrFR8cehnRLMRZKaeJQ7XKhAWso+XcwNpf+Zm14Tx4e0V3AdVk6JuEcGJYz\nlJ2yNPRSa1ptnCOTE93tlAk5aauC2LVGeYBNut2JJG5ulWavdghxjzkfej/c\nTTD8pBLnl1RDU3RypOP2GLyhM0o4KTjMYlWFdDtqEOT1K1c7zxScxBNSZJui\nXx+YPSxTyKUYwmmp1fGJOIJLEOdpWoewq/FmUK+VeiwAGoY7jlMi2OwilcMp\nw/uqi2VvflY1P2rL0cyrXjUdJU3w/xGulq5cNxTKdid/VQx2aBliTxiZvVmL\nICAb+sTatwG0chJ2CMK7RJp4QCULgt1sbd+B2HufpuuQawvA6gBrJc+f6fyb\n5BH88TPwr/19ZTYjwlofVxmiTVu35xy0rN/9lPoKLyq/OWs+YnJXffDRz04c\nYWUXxkPTlk00DIYp4FqGapVvwIIWRlREBIhEo3v8ZgtuXG463keiMdnyW8pg\nuhKebSB17Un9eOdUlhJy/Cc4kVpduMkOIimcMEumTQQ5HS46lkBtylh+D1bh\nZDGi2N1NJOcLJWg3pWIrKHyiyx/CRFk93X+BBw90o4dYOdLAszO7IpZX5HjF\nYm7M+c6s9ZHc3LQ4FP90LrwoUt143Wyn7aopvIPoh2Ufc430QesJi+UPdkIJ\nVHkm\r\n=6otx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDexy1mQVkXKwCxXtzgH/cW/3OrQkjBaJnX7zDyo0OVZwIgdwLYB0JSxAE5SoNXPgVc1CbjyYlYgn5sF2IwfxEwes8="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.9-canary.127.787.0_1618785041783_0.05427174058658246"},"_hasShrinkwrap":false},"7.3.9-canary.144.825.0":{"name":"storybook-addon-jsx","version":"7.3.9-canary.144.825.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"28c77ceae9d7028784b31ec3f68e8b6c0f4eb8ff","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.9-canary.144.825.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-btHENV28y8r/yxjfBEe/ql595Q36n9DYF3ikLkhUhcEbB3KbMiCCGtIkFxnWFahD9+X9eqqz58HgDt1rnKVD0w==","shasum":"89a8b70dfbfc0b44f61dde5697b27adaa007c87e","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.9-canary.144.825.0.tgz","fileCount":28,"unpackedSize":172096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfLOCCRA9TVsSAnZWagAAI9IQAIc7eAqxBJ58cG2qrbu5\nHwGJjXpR5bG4GLT10vMKlw20G/NNVikcsIokGYyykpMwzod94kfgWSgwztmb\neXsVHpFDXVbzKpWxETyDm5hSOPE+OPrOjrkcKhwgK6ZKgDQ+75kZuocqIYBo\nKTh+RvdDkYmuf9HllU1t0r7/7vweV6IxHBdtRIQRzVjv0dHiJrrVI6N9Fmo8\n/I4nRI8UV0GD4BD10tpZ1NCfyfq5KMNqK7lBE1UbseTj3kh4an2V9uwLo9jz\nziZESiwPKtCcsJGHqQJDvmjb8PbiASPOAzEJ0tjpe9XPWM3DLM/BKA5wa4sd\nlqimJMWLsUxdz8l4h0qDhueOkygg/yiGtqDWwHWy/F5fXsSHuN6aWUkgniyO\nqZLNQCGmxA9/RHXOvLWoKEHdtNXCgC2T/IoxjqqHnpCoCh34Lxb7ZBOdvOgo\n+9Dvh+JAoEUyyPJMcgwZ8/ijo2JGpHIq1CUAgXr9Z3AQm0ROtijR6DoBDPQk\npa0NY/2W9ScUAXigIEJqGZLXMSAEbrh2k+7zl8MMYFgCvPLT8OwpxzyM3pHW\nZ//camWhnf3lnAp96ckrjuZawGbu1JZy7mqD/4Rq5xdbQFN5CNhYxw7f4KNP\nVdHv+qjIRN80Z284/PfOehJIwAifLNSdln/yI2Cc+9HOKxwrJRaCvBbT7LyV\nLRPJ\r\n=V2CD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDjX7h8TNnST6VCWWDr0gOBu2bZ7B2XD1C8BR7gC67JeAiEAuU29yPwQ6JsIA7KvDkC+VBVwFAVO12hEP0BthJz9aTw="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.9-canary.144.825.0_1618785154214_0.888589498976986"},"_hasShrinkwrap":false},"7.3.9-canary.147.827.0":{"name":"storybook-addon-jsx","version":"7.3.9-canary.147.827.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"9add96c77c87163a86e158e068035a14c0d0e620","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.9-canary.147.827.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-upbktzXiuTK9KNNsflpdHOjdMXJl755kU3/D2xhiEZsQlJpjtAQmwi5qAYF5CmCwXOpatQ1aFytPmkjKqT1HWw==","shasum":"bc77a21b1d116f167e36f029084563cd89dcc055","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.9-canary.147.827.0.tgz","fileCount":28,"unpackedSize":172096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfLOHCRA9TVsSAnZWagAA2KIQAJnjttc2MI9ol2oHpZqd\n9EJarTSyJl75XqqIVH9eZt+N0AEQnDOnHcD33n7b56UHgrgpmxBotate230B\nW/ZVlXYietNLWl8zTENCI5A6ABrZAT8ET9SMaMC7XWZXsHWT/ESJZetOKUh0\n2KadKkAXak+DRN1Chxbom5O2hcMZPZjzuPqPRMt0rNI22awcmZmwGywOnHje\neGRYNUrn9GqRBzHw0vyOC0VP5KRcLCKlJdhdrfLZZ+mA7gtyS9yCxeFE8rNw\nG1uJUNysCGrow6kxMcw+ru21oOEyKRPYixHiv/jhhWvj7xs7gOwdx9xz4YoT\nLIPvaNq9IEMypMZKskz8LPASWnyBr7ilShXrH8X0EIBMeVxaZJyaDa6LbZ5p\nBCNWqH6PByNmhyAClgLHFU45qnBy9HBPOQYHPvu8DSWBKL9lix6+Lpl0calP\n0kyo1C/rZ/cZ6eJV/UyILKnBwxrzpCxGwYZyjnTbBXHCNVjvB52ZfjQUTPez\nbazRRWuznn9Kb0ELoH4vTkSDIwzlj+s5t0GqSI0ZLxG7p3l0B4SVymlMyNEn\nnXRNqN3sFBJvGUt6UUoAl7lFPRfaw+LjibPqnKzzS1815VeYNErWNz9ai04P\nhxu1+ZZToyFovjOEbM16vwCdFTNhKsBu7/sC9q3ZXVo34fZ8mGOA0yi02RP7\nh8ib\r\n=f9l9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEwK1AnhDa9Dbu/gOn1kS/AU4LUPlpTHxn+K+28RWJ3ZAiEA9sYO5DOljypdomcCMRTYRs8pXyyZAz1V+n+1B/C4dVw="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.9-canary.147.827.0_1618785159272_0.12997461465754534"},"_hasShrinkwrap":false},"7.3.9-canary.133.829.0":{"name":"storybook-addon-jsx","version":"7.3.9-canary.133.829.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"91d6bb59611529ad5fe9c60f985fba9139393cf9","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.9-canary.133.829.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-4lb737Fi8GbyOB9tisKa2Vv18Bml5AwJMpxD9RE4do+N9Y526czFdoFBQUCie/3yuaa9ZKSuSc+PJgIsC7LM7g==","shasum":"c2de67c45b8eed29739c8ba3c73496b13b90f24e","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.9-canary.133.829.0.tgz","fileCount":28,"unpackedSize":172096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfLOPCRA9TVsSAnZWagAA/+4P/15X05qgdauwx9Xkn2I4\nY8PM5trzJvoxDrjgmzrctdxv4UmWkNQI82SOGiN5vzOfQilF2WStUhetiK0v\nrxaD9GSJc5qs2GCRvDqABSvzbD++QZIwAnVFAqNLUPxMUsVcLfIDyFuNf7Bc\nQ+JGAYCiL8fukpZzYLEHM+aqyFPS8cQgEMNGh3ThcoaxxEdxj9CrFE9M+Q2F\nq6VYojIdFIXaNBWyAImqy8G8nCHxoobdwE75GmsNJIUsGdW/ts98vGmpCCl8\niFXFRmOF9EXoWqA4E+gEOXkUsY2aLPe9KWFLRWkVzWeIxHw5IlzyDeF6IX1w\nNnECMbptdSNDj52H+jNiQ690dtgB+7cCASoervqvgkdkKZYO8ZYmLwwGO3uA\nDaUy5YwtrNF159BO9ZHKk+m6t/E4xs1xIvf+KRxWxodscp3knf6yzT+Vwgp/\nsnO0AUCnGOhtmqkbF5H0SukVqKmWAHzx0NWJC2VqFNBYGoY7W7Qu13QXJNoa\nb8lLLytw/CBqPWG5wL+bRc1fiNfdQcu6098X16GDcWBFuMAIkrvGJfBx7JWz\nte4hPU8YVInfzRaNf8TuJzV0XYiZIIvZLz5coSiPqZ+yjWSMLwNf7Xq977Bx\noQe6SwqAw2I4MMh0DXeplj0hWma/h/e/QD9KOhJay8HD1ehdqI3e7H0ePDbd\nAfdG\r\n=hQBv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICVbs82jFbL3FtClDbUvEvEGoIf5JFPGExpvpbV2sPRDAiADVCShOSWjxBie5ZkHyp4E3KGP8n7r8Ou3BaW8dgpMnA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.9-canary.133.829.0_1618785167374_0.7219959793491553"},"_hasShrinkwrap":false},"7.3.9-canary.137.828.0":{"name":"storybook-addon-jsx","version":"7.3.9-canary.137.828.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"d04a0305cd8f035eb6983b34ec16df02aa7990aa","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.9-canary.137.828.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-PX0ZffAeypHpiWGwLQFUKIEePpGq/bVkcodK8ZdeXY8D3M4CuRtT+SgV3AGnDRQyOe6qX8d6AIPKCTeNg/iRWA==","shasum":"7bfb8ea4f59d127af785390eb634334113564003","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.9-canary.137.828.0.tgz","fileCount":28,"unpackedSize":172096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfLObCRA9TVsSAnZWagAAog8P+wS7q8xQN4k62KquB7lQ\nqlQQhG+3kP4IF7obrDAZxAkjVAuSbM8Qu87NjblWxROqo+UbFsCKGU8eiSuz\nVjjUmMy8LgND3fruvBy4mL+BS8FHrghqrDrP9JS6sHE+y/FNGAIW4kxVBU+o\n7lIAa8Ai4tT7nEJMtmx9y7mU7v2k24Lo7kvBwdoK5Np6jWOQ0YHISSXvEfpX\n8PMgLJYZSwuaZ/YaIUfahXClUUc91JiVZECzqRfhYh/vmElvmlTt5Uq2X7sf\nO5Or5f4+dnEZR2jkp7zj6UZUQ9rcBYeLkRcxxXiFozq37eG/5CU1KeE2Chae\n28fhqfnPRXbFVI65njpi1sn1T3pHXZvDT+IhnxsVkUt3OQYMA3tVF5gb1L6t\nQ4n7mEOmyYX+KObhUY1qqBiApR6LSLV6mHeEGsrX5RwG4JSRdWKBNgc50hg/\nqwR4CiHcDIvrHcuk5DhcwpcJZI1s9tcC/boMzEoC5H2A3Qrcs9tnu/tXUE2n\n6kv/wBGbHSa8zVVhggckXjiu1I034vDDnHxhMFuCUYByzlPipwk5GduluP0j\nPoHPgU/jc6/1HeZoQz/uegLUQ4qhuroaZRVkI6oMmtFSvmtaDNorfhu/5r8U\nxgntsSS08XxI4TVpmmLQL/8HKdW0867aVjqJG1PUeLPH2lvJBN+qeyoHGx1l\nfsYK\r\n=RbEH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCuuSnxIbArubNvcSjgue0RcERnH3d/LxtLrNCpDVV0TwIgDpYs/i9SPaG+8TsfScfdN2Tyh22sgcTgZuF3x3xXkEE="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.9-canary.137.828.0_1618785178606_0.721307062166439"},"_hasShrinkwrap":false},"7.3.9-canary.111.832.0":{"name":"storybook-addon-jsx","version":"7.3.9-canary.111.832.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"794f70aee4354deacd618a425e029d9318d69258","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.9-canary.111.832.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-ZcFDa4rD7NwFkpofnuJELTevWmKQagfdxdtE+lsWqk9gEH8xqNcvFV95RP1I1aT+ulnar1gpLG04vXY52i/+QA==","shasum":"43863807fc59743ba61e9e2893d8d9fbc5192ec4","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.9-canary.111.832.0.tgz","fileCount":28,"unpackedSize":172096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfLOeCRA9TVsSAnZWagAAGw4P/iEGlayvG2NNGfGXx75+\ne0gv5gQRQoJLLQ/9QxRK2Uqbich0d5HhHc0jJkgZf4z72Yi+jxFXyUypUG0U\nVGuyKa5N43g5X9cK9hX82U8U1tQXKB8BP4hjM1Rtw/+e73GxVtazPWmry/r6\n/3m2kpwfen0eILa1CSTfUI/1Mso281AWtyVYW4FJD0iQcADYQehy/SfMYFL6\nkzmks8uCdIq2BycdowsGnCbrMAIEKUY/IZlE3WHdHktuUPHwNiwcuP/rcMF2\n7oOFTmhgpsbcqcClnP66KiXXS+mVZDxVuIlknBXsOKz7Gu5SmW8Oje+3y8X5\nijA2CRu0gsZ+BAlim45P7P39hK7xSA/pNL3au6aGzhBFwAghN91tF98JYcjm\nJU96wiV9JysYycX10VDYquU9gcWi/16U/PqdzNsLZtFx+Nhp1BEiBP/U806v\n5fBbqtEIUyleZiX1kQ+o/a49/QkYgWLs1NMVvFms1myfKQVwS6LyPJaTuh9u\nD6VuMCFmLejTRywOARU49GGxCBlxiKctjq/mZEaxwZc+AN99elX4gdhcO8ds\nPZwlrY2AtyrKxF3yOGF/0i0zHVCdZEe4bTGT7ZrTrGrfzh22x2loAlo8Mlu+\n1jFKb+BPkYABpQrAUisbVJcZv39venNHpk5YcEc2y18Zvb7y2ZOJ6TaRmVD1\n/W2Z\r\n=7JPR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB5/E6basuL3njBBjx6GLw+vbJZi37Zse9Upo/42kyz3AiEA5+oTY1C/0/5/f3UmVWlhvZ2Dor755A4/oaebxiVRvfU="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.9-canary.111.832.0_1618785181997_0.3416619831222534"},"_hasShrinkwrap":false},"7.3.9-canary.136.831.0":{"name":"storybook-addon-jsx","version":"7.3.9-canary.136.831.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"40538a8a20caea54e5fd6676b26d6f511cacad15","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.9-canary.136.831.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-2LoLSwygQE2Jo1SyG/UPRj29vfhZKyL2JIZnPcHaFDQ5UTUXLwfdKEBHhKarruApImB4DbDrYQCJKDuQgNmPQw==","shasum":"2747f4fa1ec703fda52d88f95ec738ee0479d13e","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.9-canary.136.831.0.tgz","fileCount":28,"unpackedSize":172096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfLOqCRA9TVsSAnZWagAAAkIP/2UYR6RRdDFXyMNUVIUN\nPO/Tfizd/nhqcYQNjPNv6v8ulxLQkRo4RfUkJeLeTO+IIBl6W/yW0riiQ8IJ\nGZdFGKABua3HI5e0J0SrKgnBfRRtVoRgVdBjv/BD7CeBlJMXpoMOmXXhPSqK\nQ3dC2oNKi0ohNEW6YpktW9PbFrL9IBbvx9EeXA4v3zzB0TN2RwktF1WiEo8j\nk1FlUvWzv96HtyxrQtWN94w+FzSOM8GfA6YFEYcn7Ce4L4MDx2OQCi0bR33q\n5bX0D/2UEOb+wXaYUC99t9hzM1ODin79uCGUobiujPtxEkXq+IBoIZJf9yaw\n2emsmKKuzaTZst7o7lZ8qSBQLHICZMNnMo+nTdTZ2ES6eOxecV3qeVhQskEO\nrJedXQ3+RnErpPeFwzLhXFbkxvhuLvuplDN0ycz22gw0+0zbFVLE3konfH4I\noSu10TPDJ8ONPxjzDb+8BdxTB7qFFcwIN1iinousuaASMX8x9ru7FnTC9J//\nTgRFeLqu74126Vw6YKX6zD4mQAgkjC0Hk9Dk4zqbwTxYeQmKNxQWGdOglccg\ne0/waobDz2bB0beq5oM4M2YX1itQxFNGCygEWsRHQGSwuhZDmiu0u7N8b7pT\nKcLyj8vX6iyK7aqlnlxUIf2PqE4VjnjvbGl161oMunBRpgo+Bc3MW3cw20SB\n/r/G\r\n=YwxD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTUzGUcyUeUoiYxQ88ry+toiNX+a+tlJ0qAM4gbCxMFQIhALS8L3fGYlh089MiLOy4RjNdXDYuoG5MWtnZECb4eNve"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.9-canary.136.831.0_1618785193803_0.5008918378263181"},"_hasShrinkwrap":false},"7.3.9-canary.143.833.0":{"name":"storybook-addon-jsx","version":"7.3.9-canary.143.833.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"1966013e2fe6c261bb27763ac57ee9aa0e58d287","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.9-canary.143.833.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-eqS58P/g+1ZCsZ4Fk1N6RYQd52JV3lsfSKv3dlxzqkthgxUAeFyO9PMBmXteXYFPnfMicunJlzzplHM08/WwPQ==","shasum":"e3e2bbefff149515983e71d85f0f7dcaa1adedde","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.9-canary.143.833.0.tgz","fileCount":28,"unpackedSize":172096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfLPyCRA9TVsSAnZWagAAoEQP/3sOM7LX+nUL67BpdEB9\ncxQu0md2s8F8GCVN+fLKrqfjOuEqXiqb1Z89+H2dXBv9jktWmO51OWDATlge\nCM/umdTZpidavS4/kqrDZtTW1dzEbZo+VIF1POn9m8I+9/W201uq7WfkJltw\nfW8SO8IO4ZiIuANKL0fHEGsjIgEoiB+lIPdFT50MlTEUUTvlgJlmMRiV5Ax2\nWhjyf1Tev+wr2n15/gBljJUfWZUZndQgACMaTbmUYo4F0qFhu43kqslo/7ZW\nRPaeTjov2pOCxULHXi0JH/Xq7YIaaZ+9FmwtgaNpGwA4RPmthwHmVqnYjulw\nncEdCBJfOBzE2ft6am52OQUrZYcTXPI9z/KpwM2LADtTdJyqiUzdlQQjv7/A\nwsUX/fPA/0xW44SnF35CVFU4Aokwun7ygyby8XDJ3Pq+3uV6ZezjfRZBKti5\nesK6TFEJuBp+pvFhXvoNtBSHMitIpi4Ab8F9MrdVqTpvNDuPSI2DkA0hq7Fh\nmRR1k5w2QJAnigFU9m/PaGowKl/ocytuWMEqXqqrRSyU2qpxzFQ7Krtp6ryC\nsX77/v99SnAiB9owXX1lCM3Qvc5AMIrf1prE9ltALOhlo63Oi5ONnk94Bxk5\nxNru+2Z4ylm+CeBKoGBUQRcpfSH37q4BNbQgY181cQotJREzu9sjMBo4UaQj\nZmL8\r\n=3ko6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7fAe7LYsTHnV4AePlCLeXuujlJSpqK1eUglMOjkRXcwIhALC2ejPXuDhYrjHnuTj8bkj0ZXxGvrECINivogVOckTl"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.9-canary.143.833.0_1618785265920_0.12345413741532996"},"_hasShrinkwrap":false},"7.3.9-canary.148.838.0":{"name":"storybook-addon-jsx","version":"7.3.9-canary.148.838.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"48931c72ca5ff044f3639d3bd551a7e3796d8788","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.9-canary.148.838.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-WxPpEOhaZrhAwKUml9FnHYBVOIM7BNmPFBubsOgih0k5NtEiUZ68jbQIgr2KpN4T4lHHSNCqHEKvkuXAy+zMeA==","shasum":"d6b9734965bef3423f0b274e7032ddc170435fe1","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.9-canary.148.838.0.tgz","fileCount":28,"unpackedSize":172096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgff6fCRA9TVsSAnZWagAATNMP/2kLqw9iXIWmKE/fVNVC\niLJN+xjS/X5bGo6H0vDd5mB1TMFYbYCH1Bt9GKTp6bELhXKe7CVirvUDKJMm\nM/3AsTkWFTirwGtlI+G7Nr8KMVuM6g5yv9hCsuxiYyx/sIYTkwqPtU/JRzZi\nRTA7Ie/gcs6ueCCAStUjKRmnKrig9+LvNL0R9A4uqVo5LODs8voojjwqIbO3\nKzMgdv2D1DsNJ3Zegqhu8mnF7ZfRZpEFmVhuv2PXbERUHIG2xStf9yeUX+KX\nLJfs8BuNaVNdXqURu0wLVaR/4tfSDmLcosbpdVymWu7rJgQXFOlpd56Kkt3n\n3OkxNLOkjWwM+BV6cjmUpK+uiEqXmnGZOEXo8vkdNl5T5qmSb0TV9wyekqZG\njD/ZhDr+ksw40AAUxvlKf3gOeVkBMBNDHDJ3aZCxV+VN1o7XM+oNZ6dKOQOH\nlR9SahbgY2E3psvJUuRd3hf5vVCWiLZaGzw+hbfYnIr3eZmwCOWAMJpkNWnj\ntiynbtk1bnBKMjlUm2THA8Mrz9ujujGdSzssGFC5vZDDstQ4518REZvDkTnR\nlH4CJvrQArxLQcLjD11LkGZnJjbLzKerGiZni8yinG3sedRtUhnSwm0TUunH\nTN6ZhU075cHD3sElMT75y/yNdwMescnF/BPy/K2Vmq5tHVsOiRMOTrP1r7ZN\nviiK\r\n=gLp9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6WyigzsDr8Fmu6XHj+btxzO6qt0n0B9XNDPy5ijrZ4QIgBWTmTcLK0FPlUT+V0Q9vW8jAkWT38SkK+MbuAYQaXWA="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.9-canary.148.838.0_1618869919341_0.49907671184025215"},"_hasShrinkwrap":false},"7.3.9":{"name":"storybook-addon-jsx","version":"7.3.9","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"gitHead":"cfcd6f4182aa6c0cea90b8e6a04d24b7a53bc8d3","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.9","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-+IslGm8GXsmhpzaxHlhL2/kTeBK6uMuDcKp1s4p+gA1sTVe+K7MyICGxoWSHbEExnsnok2AMCtaQoA62A4ddOQ==","shasum":"2009f08ed021ee8049889e7dc138e264a010571b","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.9.tgz","fileCount":28,"unpackedSize":172354,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggCnDCRA9TVsSAnZWagAAxEAP/RwHkIpY9f8yaWQ8keW3\n7/4KHnCV9iLbRkR+V8GFFeAQpYVrmsgHQ8l5CUY5ebqZxEOtCcoynBE3MpR5\n3gYo5f/U5+lcuglcBBV6TU9RoY3sHonaxMIRIWwYOoUdJmSveohbs82HrV36\nvyOAl4yV/m+DHG6ZZgcOTLipA/GDlaz7sBUVMSKgKrKXRyXaqY0TCH3XzIBy\nx9YuPz0gWaR3UwL9SdMKFnldtaKTYcggvFm84PWlatDoWGl1C1IpLMrGAYhP\n+AHtvTAlLH7FsPAsw6yNgWzbiYGQ+/VfEKQ43LGqhLccp9NywOfBShmpQvEO\n0Mu8wRGyX1bVyxVnsqGHxr454ixA4FVSX0sGCbXXYMnl0kWtLsc2P/DjJuov\nuKrsgc1a0VzzlLHsGUnRP9raMGHAFPidtIdoTlekFXPyYYExmiNwojpctMoT\nqHkNeYYD9n97zSs6MLbcwEfm/IRax5z1GYoM7o7RS2HKQM86lnOEmqMTJ2Ij\nGEU8EH+YHfoPUWwI0kqQbaoEcjw3OFJ//VkpkLHIh9CBBXWql5GzfJV/CenD\n6aiF0KGpWYgJe9G3Gn6kSIz1kfFFsJan+4E19mnlnT+C0ihxNwg6z9D/I5IC\njg01V8tGzRsfZrYat6ewLVEXcWLHF2Db1OjhIZTOOhyhdcBQVxlemuRGHru0\neZ2G\r\n=VG27\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCusuD6c4O9kSYSXinmLZRESYLmH7pNlxXGWYKubne3GwIgHccUx8pxMVjkIfeueK2w1NpuKJbXxoKVErBA7LO+DMY="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.9_1619012035269_0.7864358392185893"},"_hasShrinkwrap":false},"7.3.10-canary.127.863.0":{"name":"storybook-addon-jsx","version":"7.3.10-canary.127.863.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"62fe74d089bcd4ab937754c816e1154bf08f812a","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.10-canary.127.863.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-lQcfZfRay1B6G4sm3CmrUPJlICHE4yPEyL3TXWf+BXIi5Biei+9AIVB2ObNXoUSJxnIJccBeSo0tCaJf6YVPZw==","shasum":"f6baeee15c6b2239ed77972e9964d20b4953e041","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.10-canary.127.863.0.tgz","fileCount":28,"unpackedSize":172097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggCnsCRA9TVsSAnZWagAAH5kP/267xyaYMN9UmIpdaLZ8\nAcsAMVfuPSzE4hibLYr+J9KEXh1jxqmcKK7EMMpQR05/J4K+KovUovb8PhXU\nx2gffIylIKKQ5eOP2uTlvNwG6vy6m56I1sh9WwteEoo6ttndRYnwJnPrTeHR\n1T0sP2fIvOOgYu8j7cUDdq7FZ86M4FVbDprqwGLqA0Bq6OlgxgtWMl6JqnPc\nRowP+0JCXbN6bM9McVkaP45mj/exTfxM+gX6F6k140ZoQEX4QH7eHth8gZ/7\nWCV56Ro5/Ultlh4FW7RbPeN4xVzS/U7jw2R09ffV4ZxHoqCHlhwaHOi5gbH4\nbOiexmBq7m4picx+/5wNA80AbpdmZ0ZjDbd3PjQJu/jKiwdEDch/IA+fqMTp\n8GgtSvvdCRZpM9zlm8fZE7ap4Ll3IE7XAcEoG2a1TS7LN5XPdOvAtrkdXH26\naMyhM5WnRiIZ020GkeDrI1e7hVRQv/az3Tg0+gdwNiy9jNdPhF4wq3zWf90m\nCR5IpOz4Z/EJlIYvMuW6QYKxrryREWvV57tCA4GWtqyD9uvwTe59MSC81UJv\n6DpCNdPSy11VEFiu2e0OIhxwLD333OkOsr7dWN7gyi/d+ZMWS3yp82u/K0Tz\nwxmMU7dxTLR/NrnqBNN9UnEcsc/6y/YkOkpXolvEU1rafEbksdd14rvDOezu\npPbt\r\n=gH2u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFIDp3V9tHO4BU6KUr1+jxs2fcTzEdXZ5ck/YaSZ5a88AiEAm11l4XI0tWQKy+amO57h28xsuyc/W1+iRSo+5JXNBkg="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.10-canary.127.863.0_1619012075461_0.6561406446629432"},"_hasShrinkwrap":false},"7.3.10-canary.125.864.0":{"name":"storybook-addon-jsx","version":"7.3.10-canary.125.864.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"0b84c7500114f4fdb24e490c71dc6e12a6680c0b","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.10-canary.125.864.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-nORBwNTSfqF4YpbX6QXO2AJhQUk74a+IT4TjLh6vbEEksZUUwFDvv0rmTWLeFK/5k89ZOwZOKveBSqSGMAgfJw==","shasum":"41f11972d3e7d95b83f15c4c1e1baf7c513516e8","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.10-canary.125.864.0.tgz","fileCount":28,"unpackedSize":172097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggCn6CRA9TVsSAnZWagAA/40P/2qEoK7BTLRpBzvIWR5U\n8NtZ7lgcygY2GB0KpZ7gVeWqJW1T7627Wh8WDy/cAuPJ4XHbuBMNatwMNVw6\nI4WAUHWkMVLsXTHm31E70RZmUaKF1abh4gII/t2g47nNN9fBEO6lBpW2L6UO\no5NH5IlNIOKGVurVOZilzIGIpOEsC0KVVWdcZonEAIow1ROVAOGdxRPJk1BC\n/gbWWifHOHKfP1U5Y+IBYezsSGXbZUUiHI8U6jm4H59jSG8qCdEdITfx2RdH\nSsB100xOJc2L/7DPwA6gQPvhCqOoMkjBbpTmcfa+APEeQjouDEYUkKZlvzXM\nno6b8oWsdqZ2W9Ms6vXY+7aPYmMFZEqCpycyaL0/NOWDLfcTHp8tNCC6xtRB\nBa5F2kkDx6ZLS2nY3Mhi9iljQ+KGG74HC2axOqe8/YeaOLdg6LkJ+AAPFWNL\nKuiZxdMJwSBWgiuQs4wW28yzSZ3F2lWvNAoApeQL87UWFK2Nqom+cam1Vu6H\nlORTrv5E6RAuT+3U+wEwHBeRA09tgqm1W3JKSe9u0ptuUiBrhlRQJ3TX2hj7\nwZEngyfjP7DiVvIN2TZX4fWL9+GcwziGHRIQ7OmYvMM+yMIjI9iRLBWL45F2\n9GJjIJZAbw1qZudQveRcRvyOjR3s/P4+iNa/7ZgWCrG3US5YOJC/37SKEuZO\n6V6m\r\n=k0Dp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbBQYlXZOooIOKjT+Ueb5Xew5jtzzUMQ8t6IrC10JPOwIgI/hpSGteIcoiSG2Y/xtSPChrWGmo/c08dP12H7tEPng="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.10-canary.125.864.0_1619012089557_0.8909503503636171"},"_hasShrinkwrap":false},"7.3.10-canary.144.882.0":{"name":"storybook-addon-jsx","version":"7.3.10-canary.144.882.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"82ceb7ad44fa409667a895d17ad3e41daae18352","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.10-canary.144.882.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-O9OjuLH1qY10eqVMhmKXh+G2n6+qUUE59dHuU/hGG6LQgyRvy4RcON3ggssCGRUVDwWplBvp/J93Z0haZlV0mQ==","shasum":"2c3723002758b62fba2d4020a4312979a9dce624","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.10-canary.144.882.0.tgz","fileCount":28,"unpackedSize":172097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggCo0CRA9TVsSAnZWagAAWLwP/jzTQ0NOG6kLm6SnpkUb\nHNOZbARlL1cmFOuoFuh+53WKIRgLWJpN/ENlAnS20NybsRA9UxcR28E+kXs8\no0RR6AGr6W8lFY9k1H+PoQV7zAi7o3+3ulCSxg4+YgiMsnNHEPDoDCp0kBRb\nRJzvuBBT6YSqg1NH2YVUYnQfPRsziX8AgDPYxU3FErfqqcj96NcVt3SWl67y\nk8/9o2lMZ3iGpjQYGOpPaw7Q8BVxl6QpduVG6yTRaYCPxe6BqVVAIIw0CAQA\nd/k/2dOyDLKk+thTbngRVtvLekflIC8ooh/zh9HheibeJeQ8UNYKpTC4Wwui\n+zayo/pe6xdMUrgC30Ijmh41fZpL/eNipiGiQdSgu/tljJTDaNJaaHO7Q+Ey\nq2MP6YU2x4/Mi72I4LT0n6lBwlT5kgeRQfhY3fcZ5s9HuW/2lPCy7XxFJ6oY\nhCA1LzlVjTYoYfGb0FHlRF0gSC7h/4dYVabgpvnHpPDCL535Ryd++P53OXbk\nUO1rcmePpq4ZBVhQBLssVMfKXxYFCrfGBMeWURdpNZivNV0wn+AHlyIxKltA\nPupFiKn3rRW/xjGq2PMxhNOtfXO3QHSa2NRXWnRe6cRxa8ca13grrzSgmPVT\nZnoQdS5sl7/X6fET4XO9k4MDKgY1N3yHV24XuFOYfpxKNyBk2kSpLHK53GfA\nIB1S\r\n=1x7y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGNiK45GukLhe2Mnjs6GL35YeNql0cyZOUV9xfgzl3/WAiAMXX5wZG8IspebuG3eZM90uSZcG0/qgB40+iXvyEdQEA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.10-canary.144.882.0_1619012147883_0.48657660204882824"},"_hasShrinkwrap":false},"7.3.10-canary.143.886.0":{"name":"storybook-addon-jsx","version":"7.3.10-canary.143.886.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"2694e511d85ecf871cda4d8c4f89497d27c2ded4","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.10-canary.143.886.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-bPaUv2+cKVsCHSlY9A13rz6c5HyHO6gGnoZ0WMUCrCZ4D0W6Wsg+/vhYTNU4XGe9/uHWcqQeOpaCdqH7wfIFrA==","shasum":"43f525791a2395266101c1e55b67744bd4800be8","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.10-canary.143.886.0.tgz","fileCount":28,"unpackedSize":172097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggCpKCRA9TVsSAnZWagAA2ZgQAJMHguD2aQv9u/uImQmG\nwrNxOM7F+qyY25X9pQY521AIdEfy9PUgvgnxbhPXol2eICoX0jN0t78ZJDLM\n+p3a7Mg8D72wwiJE7tjyJcw7ibgjbguKwsxnUoUu2XV7PfwUT8ZW0b4psRc6\nUBK4C/XtcigVcrrLjF0p19RkI4mIwE/c1bHSulji8xUTiVybS4RwqlYsPhPp\n3ldD/0BIqTbPHZ3io9thMIKZHlo2hjU/TQH5g/MAc7BdB/VGdL+Zz0L3BtLw\nrTLEf0QKZtcCw6h/ym4n19rrBRrgQXGfvLEgZY28mopNsLSEcKFM5WG53iix\nm0Qdu80AROTKwX09b/9X2c8hMbhBnHOF4pA3MgZTeheVwtroO7oDEdLgrzAK\n4Lbh77U1Xz9ibEpOsYwHI2gzJ6Ju64F2d803kTKfwvlXeQ/5PHDNpRDJIyjw\nzYIE7UBWCGAbxV6/G0vBc/FKrWmnzKSF9maJbAhFBBWdUXE4ezAafIq3pJY3\nB/v1c5+V20hLJQ3aRV/Xsyffc1+sl8SCbbRvGvY2Jqjp/EAsZ7uayrBbzQ8W\n35V6T93/3MTc4sHF61sCxgaVz+3WBa41nDe1+nKUiJIvGQRVOxduQFbf0xAh\nax69isvWXrGnR7KYmrGf+zXqDE5oRyC3X47lFOQitkaNEY7BNj4uqFEGMTtz\nKdyG\r\n=zmTS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDN+cGamFyF49fINMXivCb6IvKb+vTQtspEA9kAA0COOAIgIFQLCO9waaK/84sDJKuKQ5eI7DP78Mcu3Hp3L96l1CQ="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.10-canary.143.886.0_1619012169718_0.6489441741079569"},"_hasShrinkwrap":false},"7.3.10-canary.111.887.0":{"name":"storybook-addon-jsx","version":"7.3.10-canary.111.887.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"83140c2752f7c3ccbe00b11ab7737a7d07b2ceb4","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.10-canary.111.887.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-QC2HcJ/lMx8Ecc+lERdunRd3A/EixWSMX4dvLOYe9Kc2NQiUEBo0dVOYnImec264/9HSg+suE8YuDpjb3NleOA==","shasum":"97c653cbb7e9bd26d412ddc1fdeddb9ed07050c6","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.10-canary.111.887.0.tgz","fileCount":28,"unpackedSize":172097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggCpjCRA9TVsSAnZWagAAdlEP/ibFtn7He8h+MR3d10ha\nT+yEvUKtWr+/DrFujUSOj9/ioKagbUFnB9ZmV84XViX2wcP2q/zXb5/gBbc+\nCuiRNy5vINVCSIVM0GNmsKny++NJJ33n7aeGoEefHE08V4+GXwotUrJTW8pI\nSD7JJhEZnkrvS4v7n/OCvHdG6jOZE5Q+K/7bvqO9R8k6taMRGOuLXldnu+fU\nojHaBSs8oLxKOL+BoqADIxJwznDhwk7AJEjemxT4Y5fHmQLeec7RRcPn72am\nHqPF2JtpmLyu1APvh+bmT1se2Nd1+L2thzz+4hzrY78BRssEmiFEc4x0VIx0\nqzyS6oMjnEVdne+SVMQCjzbxikXCcrNf7g9jleJsUrMtfUqLBWYN1zdKJGHn\nrTbDA8e3GYV3x7EOXx8dBIAMrwiy4VqKNVIRzAhnd4FxQaWTfA5S3WO9Rbnc\njqxsI8kqQYprqOIHOVStN2LDqFG5U1BN41D5mXHXivitsN47w4YwzBEkWdaz\nJlt8DkrnGdeR7QBaIT5k3ptRTgEvUHruL6+hQl/LQG89J+KANHzkKaBhWBB1\nukoyxJAMueKYcymoyMjlJdgTX9WK+lLwqnUaadHrYzjsMPT1Ie1xRCVTLLUc\nkZ0eVXZNZqbHx151RZXZVCqepzhyFBzwdL7hPPMBc9jFnsMbBdTeWUF8djYg\n2r3d\r\n=q5iG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHkYal4f33WBLfMOJ87s22t5TFy4j32ayHYF/p+eSXAQAiB45Vq9bTawxwxZSbP8wY2PGQ40o2mm0luQFIgrfyvvoA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.10-canary.111.887.0_1619012194523_0.9653286126712062"},"_hasShrinkwrap":false},"7.3.10-canary.136.893.0":{"name":"storybook-addon-jsx","version":"7.3.10-canary.136.893.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"89d5f6cc389f28927a35507d37ee6404189bd32b","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.10-canary.136.893.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-3khjcEIwPzl3PVmBy+sQ6J/FJelFhamXOPWI50iQxC25nJvEna9W+pN2TiJQKMUzeZvW2d5GsbSfwFRYuPLmZg==","shasum":"b50df44d3cde123b4b909134a5c90aa8e4048dcf","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.10-canary.136.893.0.tgz","fileCount":28,"unpackedSize":172097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggCptCRA9TVsSAnZWagAApNEQAKECRX20/gvQIM3agI4O\nIeEAJLKoe11QWK8+kaZJlrSTg4oRfWagQzHvWSF6d86/ymGY48KlbpHLlcF7\nW1mVVg5NnN4+3wubm4a85jxK23LzMoxG5xe6eXnBM5uuSjNf0BqFcTtazCSx\nXdAa9QnnlbO4XPtWDf+yEhDN+FdkPboyUuIcCitTs7QORotz7zucpm2+xqhp\ntKKw1AudQzC9t68MlVZ90AiRRznh/rFDmzNkUW9esx05cgQziJawPIWo4J50\nTYkXSB7vzbyNFbsZoWl62Sn1B1Hoy8t4CZunpRrb/IVezCxLmTDbzhhhYXRP\nEkrj4hYEo6SCBL6oBlaf1eDvs8lEYUgOVSvPVKwD9skuW1K5rvoIGgL5NpId\noruD707sNwbtrStXpKRftb4sGh/ImswWBsZzt5UzHsX350quugUhQ06M1KGD\ni2MmTXny83LcrouqGhhflIhZT018J6alINxRElAp2BzOSMRv8KlNLix1DaVc\nqQg541Q1mkHAhp0mnUo3Ot2Kj0yR8MGIx1Il2VVD8tH6yDh3U9GgVWn4pp2X\nnZpXbsS/D5l9+5Aprw7g/zkUUSAm2TG3BYCUe62x9d4tukzl7MbrGGyhhssI\nhQ/Ek0cqKs4Tqbat+bV9dlmFplDYndeSbE/Yp8q93g4KrgvLhF58y52eEKPK\noGNT\r\n=u4yT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHovzWgF3/MGjv8N9+I6/EUtJDxYlWP728OAcbP4CXlzAiAPnRvOftidR53ecVMauoSKYoLYO2Rp9WWV5DIFQ4K6iw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.10-canary.136.893.0_1619012204637_0.9649305185764789"},"_hasShrinkwrap":false},"7.3.10-canary.147.897.0":{"name":"storybook-addon-jsx","version":"7.3.10-canary.147.897.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"8b11cac3fac8aa5a6b1b6e3615c5586e70f53bc9","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.10-canary.147.897.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-LKFj19EwxhOapzoYQDEJK9DEjBST4UkaAjU3w/jqoA7ru9YDNpI/2WNiIx2Qxt6UdbJuwuxRDUskWTRcV5q0SA==","shasum":"917e933b8d2c1daeb0f8a805c97186be2c7f0029","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.10-canary.147.897.0.tgz","fileCount":28,"unpackedSize":172097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggCpxCRA9TVsSAnZWagAANJsP/16TCRznUkBsAAxTErMQ\n5tJaJF0g+ACKlvtzCqMcWVVstuc1+D6rdi5Z2HdIdovNupnfsBculXMH+zT/\nIgQlCjOUvNGmpTE0n9fkAEVUZxC2rXhmi/E5fU8xRL6h9dgZVs+4w2354Mnd\nSDUBgPlq6YM/aa/6j0cRJNlrJEJ992IgVsE8ejXTO4BNVwAPw2s5KgehEs1m\nIjnRXOqdEW0aqpiQf7IApI5qKk8wKdmJXTZJqTNYhKVjpMQjfIV8Qz97aymT\n7wvHBSGcb/dkbM2ZVtBUlcoPOHNCml9O+Fp/F2nxKTsCOCuC9hpdibEAweuV\nS2odycPt8nSkSUnVd8J4KTMjXPTyREvLTVJS7R8pze3KbG1BTigGw9imC1Sv\newB0TjhIMYRi0F7XcnBITQMZDExuBYsr9IhDdHrFee8U3+w9r7NewrBLgce+\n8cnJcQx/c9HqtgWVC7Dz1TpD9SNWPcRIv0hn8i0WbEmz0Pwe1CGhKHN4cFZM\nsNArNDVgdpb1EuQITqU6tuwvpZJXOyCzDLkOusDoRP8NeX7XDCXLuRnaZIc/\nAa8yPk/lEd9DTdgvODyf8Wde4HahrSGaDkpDLAGi8DA7FWJCrI+OSyk3rYE2\n78xjU83p+FeW3cUBGk6sk0Bg07DtdnB27GjIzwBKICwvWmeHAl9rhQmZ8kGL\nn/M+\r\n=WsO6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFyQBDqLjqNUaWooItgehbXzuT0Tu9K8WpBDwhQuqXwuAiEAuMclSiiJVqZhMfBWp7dPSkn1i5urG+wHIb/LQhYjnxA="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.10-canary.147.897.0_1619012209357_0.31830747494767064"},"_hasShrinkwrap":false},"7.3.10-canary.147.898.0":{"name":"storybook-addon-jsx","version":"7.3.10-canary.147.898.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"e16b12be3d866008622273bcaac6c9b471bb85e3","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.10-canary.147.898.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-eG4D+9QpkLOkrIyWohT/a8zFOs7Wy3DaAMKjqGZSEnENBeK31TStj7XqdzP1QKeeJxiOIwaaZAt8qb8XjIINjA==","shasum":"7b8cdbe44a9ced2374014084f2aa706efd5b5f21","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.10-canary.147.898.0.tgz","fileCount":28,"unpackedSize":172372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggCp3CRA9TVsSAnZWagAAi3kQAIfaGLfXdGiyP5O01Dwc\nn3P8M7ktkWJQFX40xmRRV+L9WYSYv6UakWH5mbid2E71dkEtv8xvBIkiKa1Q\nk5j4fTvF9kY909db/JJmgXdd1CCL0fDJ/wJy3E1bSBltFFPFNn1kfw3YEwY3\nMXqPsNPd4V4HkQ3uHDNJ6uRxrpPSOh+Rv5wFSy/gn5VDR1S3qJnahx+LlXnf\nrJl5TMIkHIH4PiA8/6hL+3lo3BfFUQ6ZlYNIuSOnThVvXQulOpQv/jrfWinu\n4C4ijQniEzfz7Gh/AxjmXUcztg2Em3l3k9t1e426WtSoRbL5gp+jzHvZuqNz\nHPdJ+pvXru1eHc/scUJYyh2do5oU+pxWndRS6CafLIqcWQNIqcyZWi7IbMRV\nhim7Ei55HsFTUM1S2I9V1vw1+H1uMt0cmOOmf6gmH0CtoSSemxqiu4RUti27\n62RYNKIGb7iy7p7mkSq1FjzEXXLQtL1NTq2DRXaTfKRMu5gtLcnqw1FQK1s2\n6+BIpMRnej4DaDD7g+MmzdyKnTZ91ejQEYrnUBM/zpiQqDi29YXexKxwEah8\nOnnoqRvTYHZYCmNfpDcLHzAd4BnRwpyZsQFI5ibMxyx0pnHGM4yYdl/CxxJx\nReUqB+fTeZpRtkS0NT+FXqsrcp2TfdK6O8XCESCLTvRz0aJDS3LPp8Exv4lJ\n3WWv\r\n=TBdB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5v7KIS6yaAbjuABVLTM/c7W18y9X7q9QEQmTnqpsg9wIhAPjbZ2qsF8lxtHIA3DtneomWgYHXUhD9KDdfAa5shg3C"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.10-canary.147.898.0_1619012214848_0.8975921310371247"},"_hasShrinkwrap":false},"7.3.10-canary.137.901.0":{"name":"storybook-addon-jsx","version":"7.3.10-canary.137.901.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"29d3e09d02f67b6647bfdb9d109496f4c7776398","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.10-canary.137.901.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-qk7e+kRBclNMBpJtf7BHuSwZMRaOK6i+LP+/0GJOFAL3vYq7D51lxMkdsNsQPSK6oK78QYg97zx6jYh9Ijo5ZQ==","shasum":"c95f8eb5d4cfcfc563c74cd9c655458035f75cf9","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.10-canary.137.901.0.tgz","fileCount":28,"unpackedSize":172097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggCp8CRA9TVsSAnZWagAAMQoP/jKRzK8VQYjsA/CVmwSl\nuhS/1QRcgaGFdG/XMZMtISXN6GRHJH9ju3nRRorXy7chQhwKm7foe0Yb7K5m\nazwYs/n5Dp+mdCfwzT54s6MUV5KbqdhskuOis2i+fjricCaJlboRZbIrzZZb\n/hGAHIKQYkzBoMDgEpLL/5suE2i2lpqMrmATQnWtu1ntDtOx3FvjGIY5NOkp\nDozwu7BkfaozxVPXTtziALOMv3+kWjhjUXGKBqbppFSXeJEHx5977Imsfzt8\noZ2hr1lPxsKj5B6WbbO1FqSUKslIWNnESCMJMcO87Lt2ItxVHMqaED22sCf3\nPE7bTdb5bjLgosNrsnUaVphkB/5ilwxO/VapHVbTN8ofs0+uQnpxTINyOxIX\n9M3xUG7CiFukhd9gjapibmnxG8t6bSlIPQ25CqVJ0ptsN+Tx1F602d2HUycr\nKjVQvQxHSkp3dFGJGXb1R5gimoCAvd8q5V4KN9PeLdTSwXYAsXWxY7LfpO2n\n6eCd/lXeT4wtvQlOrrHb13cKTriU9ApenctbnqcPfApVW7QrtWZmvdCqfxYg\nx7etuC9hdH2BXIyy17pP1yjUvqrN2WTY1Vo4TE7QrRpP9DyWJyzfN8cAfNdw\nOp41L+fc52+svoCrAh7tXKnNuVHJBGn2lxW9wS5Dxy4PrbJL+bT25Z7DEOuX\ntr+8\r\n=tDCf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVL6RAOd3kQLDaPvq4rQ7ITTY+lGnShSxTXtozD5k56gIgdSUFYOqTvpJqWMQfAJyaj5qvT0rZyiByhKHr0dzEkB4="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.10-canary.137.901.0_1619012219808_0.8728089576578366"},"_hasShrinkwrap":false},"7.3.10-canary.144.921.0":{"name":"storybook-addon-jsx","version":"7.3.10-canary.144.921.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"16d193d4636a8e0f085e4088a03a8ed902838c8d","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.10-canary.144.921.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-AReV2Z841Ws9JB4oy60UjfizDhYJ9jFJYlFSli6f7uu/RgeoEYHAaa141fNRJnQ+COvLfRRVLcu2sl5/vww+kw==","shasum":"93a36bb74a1cfa140b14bab1e8b27326ad8a340f","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.10-canary.144.921.0.tgz","fileCount":28,"unpackedSize":172372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggCq8CRA9TVsSAnZWagAATVEP/iSvx1dDJDIhjUhd+w4j\npi2RvT16KrsmU0SfWLaYe1maeczR86+9seW2D3IXiVxT6HpGpzpx4PgFCNYy\n5EPII3kUkOgm+EwPgJh9L8fb0VbUvLZpEwemaZ33Ncg1bJCea7gR2t7uv5SJ\nzgXkeiP6q97ybzNVpodh5GP+STM24yVJTLOeuBLotYTrsY8KhA9XYy/t+hn9\nLz7LfKgqDiXzxTokfdpwryibiZgYhMvk5BqlM/YEAkbV13kLteCPLtF8TNVv\nByZgSirYYR6Va+J/P7X+yFLbCNFqMvWHWnw0RRtJOdZR1u5xd8xYDc5fdAro\njxEJq2yHDWPqu9zAnQXE3733riC/TY0yPR3vgbLpGNpxM9/1036/hOJLELQt\nkUzY2BG1+jwj2HsPh6//hpqDSS+0A3RnoM9fRFoeON2jX/Ny1N9ZzFDubA3H\nenuiLYtG1yTgN6PNCpL1F/Mejj1mxIgk2rsAu7YgZggulwSdctb9HJRlEcUb\n3H+afWlEu3Qmn3tLhotrXp2Upj5cxbSsglL4fDOgZ1YUmpr7lijCl+KJqeLw\nw5BhvHQIZxhNKaSGLm7JAa3uDA/blKHa009tGLTHo6Q/LDhYD/GrLnHG8a+X\nN86kgUPXfdN+H0V0LkCmkISFMKaOHZHJ2uUaU+XTs0rc7PUArkqhe13vEUg7\n56zj\r\n=pwYC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBl0dKFtUzyGl7u/lHc2v5zPbcZ05qw6CsYsONXqsYUXAiEAir4fopUXlmPi1S1TwtIlN94c6jQxUOHHuvVI0gwHlao="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.10-canary.144.921.0_1619012283457_0.2603954942987039"},"_hasShrinkwrap":false},"7.3.10-canary.127.931.0":{"name":"storybook-addon-jsx","version":"7.3.10-canary.127.931.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"c561cb8ba7e1d6b6b1c3149e310936cedba2a017","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.10-canary.127.931.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-Quoyqi0Wfc0SBuO1kJ3xYzaRlQxVfHso5b//gnl1CKPxG1uHFnPNlm9WjhJAvVgI2cIdQo14RG2Hb2kGA6vl7w==","shasum":"de6a8d9633f52c41d3f868e24ac818319fef0999","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.10-canary.127.931.0.tgz","fileCount":28,"unpackedSize":172372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggCrNCRA9TVsSAnZWagAA1sYP/3p/oBXqI5u1t+XBhCk/\niXRkzLrx30fwQoZKFiKFIaVWM/9/k/B5m4roB9+I2joVwTCQr30nlfDhbjce\nxz9a73C/bXbMftD+d6jU381SchUFPTji1kJzczb+uEwoJQ40113xWK8fFvn0\ng9F5ooLTtHIWZfv3J7Jo3fp+bctP8QRIQF+SvM2KaLb/kNz1CnDyntZ6ClVd\nN0lV3V6o5UKlYnf2xXBtMunqFRxLFCBLsn+Y0T7VWg6v1GI8q1a1zkyFYMZ8\nRk/xE4j2i68kOTGYUYeSXKZIn/U7YyaRqjrfi8lRT6zOK5w/ijS8laa65kVP\nlIF4YyIMlxBbu32x+rEn6VwukWc+lWa+iZ9D+B7lMwk8zCRp8vmv1yJWYdAE\nO0l8JYa2o/vwR/1PmZ7ZYhCY6KnKw+BusbUDd/o2sAPPBo2HcorlwjkDtTmE\nZcTxym6Sa85qWqG0h8kKanrH3bSFYoSvt0vtFujSFIFq0mP4tkeBQz95d1MF\nmpeM7zpqNmw5jI7W6OZ0fjFp2p08zW34+xdxwZbHrrkqiogk1Dg5FCak51vC\nPIEcGbFhGwidObv2cellgpKWeybXGnQOdKfxgYLzsAtybqnnfJqTQ9w88mcg\n6lwTaBmNQf7X1jTLoOJLMfW11CVJm59strcgXI6ryIdwwgOBBPH09ksm90PI\nKW2W\r\n=X1Ta\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC69azCbkdfBj9dzImXxGz64/L+r02QtrEYqy6Nk9SW0QIgEjPnT0eVC7SiJK21daGs7DdFr2NfMDNnHgk8gqFtILc="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.10-canary.127.931.0_1619012301121_0.2621497749299342"},"_hasShrinkwrap":false},"7.3.10-canary.137.932.0":{"name":"storybook-addon-jsx","version":"7.3.10-canary.137.932.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"f059da2a1fad8d4211c29fe6e7b7209d6a052685","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.10-canary.137.932.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-N8EGa9VqepZdeEqax9HoSYk5f3ds4cOSx5CBXiGyH+N7oBgDW960mQi0XKLHWm22INLIvXocpLTgPlY2O7+dVA==","shasum":"2f69a596897e8fb0c935f1e3a86441a15a8cffc8","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.10-canary.137.932.0.tgz","fileCount":28,"unpackedSize":172372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggCrRCRA9TVsSAnZWagAAVeMQAJN3/YmfEu7KF/v5wjdG\nOQwv3KT4A9xHa8AXeoB0333/3QrEdQ0LYTZQJ0saOzxbW43USq7yWz29o4UQ\npbK3mbldTxJNz73ffgkBxigKs3hNqqAqliKFDgH4+Jhg/sNXxsQ4dV+sESZu\ns1dI++Bs1gMrQTmQGu27nIH2yirqfM+QfgoPaOjovHzup2AAJ7oQ9xgpYiJy\nSHMtzaBp1LKe+GPaWmIEOevv5wQfNgq0WNz5FkjSfr9VbVryY2/v+9l7LZVI\nMErnrrJj4mQUeb8/65ErgdrKhjz54DQF0hy4zwf/QoSqqkrPuLU0T6DW00rR\nvwDWcCTR1oFFlpxRO615VqD+LoND52MHABtdyYEQkv55HHhiG/JZR73eU6bN\nER4xo5Dv8D34A7FfvgRyF7pL5w/FkPQ5DQhRQ5R4w2JM2BX0O5BfYJQHj8zO\n9mBOs5BwqvYT3NHHI/ERYeIsl8o45dTV1RKngSto/DDHPUpECAnSpkWj3eLd\nXby3k6tW0j8Nw6IPDCaLXzksDlxoq2foNjdoLnClVooW0R5N5GBr1knYhQy8\n7Qod+p7uPdh2f3XXQH/MxCzxUc5oRjKtzo6TJqTmmvGmhI+w/dkdxRr2Ukcg\n8mN9F89AUtcKSNzq7YSpFCyqX2cGbC0FYq5Dv+Xo89YFJuGadNADGqNkMajt\nYLv0\r\n=aVCr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGEbIC8JEMyfNoME+glvZOga4yp0paTdx5GcMjWNcj1DAiBGaRatOTAYZIEMIe39qSJJc/nAW/XW4LzeVfdhXgMbIQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.10-canary.137.932.0_1619012305492_0.3309422304944083"},"_hasShrinkwrap":false},"7.3.10-canary.143.933.0":{"name":"storybook-addon-jsx","version":"7.3.10-canary.143.933.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"3ae093db30ed662cbb0af165b972ef0aa3cd87b6","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.10-canary.143.933.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-X6rcJdMQtW9jfeigoRU27gpsdv/UK2Gllhx9vPMi4GjmF6jjNefoSvIYg0HmwVdduN/3F5ifp6BRkFja0G33pA==","shasum":"af8fa96542d5df7f0ef7232c58e45ff4de3cbde2","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.10-canary.143.933.0.tgz","fileCount":28,"unpackedSize":172372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggCrVCRA9TVsSAnZWagAARiIP/0WsQjyubhxEYQqyXa6x\n2qx6l+Qb2yRkMl/f37rQKr92Dm116p9Dlt6PxRfcB5tF4INzmp5PGQczMC5Y\n76xHdIIS2gLhSOahERgX6nwiAQk3E3L9QYMiMKaKwoYjiOZdeNTB9TkQBACZ\nu3h+s181YZJ/d9fvl1Dt5nGWziaEK4HfII4EOy5WyD3unrWrYOBOAl/PFJDi\nypOFOjHmFrqq3IuGa8H+oVEA+O9ZblageX5k4QmTqvaKlj0guglK0mJ78BPh\nTcSlEeIdxhNjrknqDSaSNbDE2x+toZyMSE3/4W1YLdH1fZP6iO5w3i703vi1\n0exZ71vMKXyIkuJnrAUfbUHEDJVIsTGqyTIUBwn9BmATDiXGeE0zf6znUslB\nOHZk6RuZdnozSbjHq+Vso6MPm+9iYzztVildW7jdSDNddQ5cOsmZIAehQEL0\nbmFQv/FvxQxDV5hDqzysKi3hJFMM7hnpzV9+bCWz8MSeJHx+fnOdjoeXo8cu\n9ESPje4IDGZX9xCbuGc9hLnpuoPpadRSiFxNzPSaog3oyyjW+rfEdWHfTu/v\ntLUFNWy8TDP1Z/PrxfhBiBwFjZhhChhiYDHTx7kI4/BVCQa7LHzGX3SPUpDm\nWIZDcYgAuocg6arEZyzKjXp0giAgd73yxOLVDKdhYP7AHgKfxUE6exa8yuZ1\n89jJ\r\n=DJyS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAki+akwSNQwskNkA2o0k05IurxFE/fGfANOUzvjkRqBAiEAy0nTrHxzHH5OE5EJIxwYpyfTP2SBE5m8Si1jTUu+gCk="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.10-canary.143.933.0_1619012308967_0.2326913599696383"},"_hasShrinkwrap":false},"7.3.10-canary.133.930.0":{"name":"storybook-addon-jsx","version":"7.3.10-canary.133.930.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"f81f59625a804d2bdc2a67421e9c3b7aea38680d","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.10-canary.133.930.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-qrZbMPh7VKab2FSt4/lNWzpprFmaA4+woI2uEoWOiZMpn27nU3KJQRlMv3MenMWnJZLy1X8J+Tiqb3ATUyUnSw==","shasum":"63fff34004519b43acf904d6061c0b04343b0c73","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.10-canary.133.930.0.tgz","fileCount":28,"unpackedSize":172372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggCraCRA9TVsSAnZWagAAQrQP/iYDB0XtqG0qxP+P0fzT\n3yChP0ullSW09jj9qf7mfn6uisDINMSn1/9BUWW6hCCRzZz55rGdASemV7E9\nsV9fNWUJ1tqgQRYtRMjTYX6V3Hjbdo6UDUrN8CspzcY9wGovY8qL4r8TuXPs\nDZTSiiX5g8Ib04xz6TiWSSTD+1ZhJs/6meH3mv5BR3sTtONYZwAhZluubJyw\nZLsXWOob9RjGsSdgaqTePwFYUGniGqIpvVh9sowkncMg2NIwt0LuMNMsATWe\nMGDBF+jeQ07Pz+MbAjLzgzvmvhrbFXHFI2KegHnrBgiQI7QoXd+QIdXp5rEd\nnWGC08gK3YNsvcLWeZ15hUqvp4yRhKKkYXIIGDIhwirbvoKjxoE3wmMkuwh8\nCHjUmvmwaBT1obfU7zpB5Xg38/r20RwcbBh4Ckeg0ZqKtoCHmHO5wQPlRr2v\nF7mivxWDB9ib3a8C3m3/BuzdkY7A6TTErS3fQmnjX1ZpgynMNzt/cyZWHkQf\nPKvYi3bJpznoYFJMKdUwkFQPZwJP8ekVKYlgHTSZvmuUoFJsEWOxpSlfvRbG\nIahPNwiJCbx0zl9n9B+EKkrbNqeSe8ank69mBe8lnzgQ+KFJeZnFvmWEoiDa\nGwJ7iz7O1pQjQOm08i9qzrJ77DaXj/uHnG4Cg6C545QEZW/Ii5yx08hVX+Kq\npnGd\r\n=r2UH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCwjgnuFq3OWPwHjXqCJvrmAodM2gy9w61KSeILXRiiqgIhAJ3wx37LAHQOlZvFqylTpw5WgmevjV3BiN4RkS6v952e"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.10-canary.133.930.0_1619012314112_0.5943768327423893"},"_hasShrinkwrap":false},"7.3.10-canary.136.934.0":{"name":"storybook-addon-jsx","version":"7.3.10-canary.136.934.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"76a78690d6d44d9e0f85ec6d462203b0d84c0c77","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.10-canary.136.934.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-aGGvaaw4tnpexhweYfDfEJTTmOZTpg8eYrKLr63YQh1z3PF7D5laesIFiEYTAb0+MVC0K/7bOK0cgPEAuPjAFA==","shasum":"1b22ef779fa08a32c21b0f476ce73e1edbffbe79","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.10-canary.136.934.0.tgz","fileCount":28,"unpackedSize":172372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggCrqCRA9TVsSAnZWagAAQKMP/0A5mReS54MWseziQWvf\nsIiUBi96gm5FCINDXK/vMTZDwVsnKORovGkcqwnjDGZJ9psE35x3owgi6oii\n+4QrZd4e4Kzbu37NSe3w+gfio8S/1ujh54hGG4e88/wR0U7KfhGTeRGsuNVO\nnK5kSA3pPLQMVH61xxwwYY3NRAl5fKseO8a1CCOYSrWhjfhX+rl4jzF+wymM\nN//B66fFKF8ed8cupLLX1ppN4oTrjySTdRVqz2bFAlZ5y7FFqKVBlyqVYwXd\nsjqNeCaegObVt6GsyU8d5U+l8xHc9xFoAqH5SQLUsXAVBigxBPw6Eb4CBYT/\nm2umij20CZT3tIZUnawEwPQMBzW9of9qAgxNYCEtattiQ/F4soPY6s+sCokx\nyTzU4s1Zpu5lsAE0ScXcpjcNLPqyVGjPMNNFZDWR2BwpJwJiS1Sqe3MTXHpb\nYxcpVzez+QJtbnLCYb8lMq+vQ3TgX12W7jpU9BbDG6Lv4BL7VbbGm9OSIRk8\nanuMVexyMnK1U+MSrMr1kWHEJyWA3hKr055/C6FMptadxr0cffyLVUgTjC6t\nzu8Hk4hSIY2GanvLKzkVlBLfPy4ng7hWz/SvaFQzo+ZdYi0QbjOU+9BAjHzm\nZaDB6B6OllTRrcevjytfWj27sMPQgbLkJZf3Fso1bbvdM6AMTtDfxLb+TZYY\nkCky\r\n=0IND\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDu+/LglkDE80xzYR9/QWArp9+QESyYoUCko0v+EEsxNgIhAJ6TT2KHwBF5pn0jr1ZGo5CK9meJVUaX71HGY2XzkExo"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.10-canary.136.934.0_1619012329491_0.8569514956369082"},"_hasShrinkwrap":false},"7.3.10-canary.150.939.0":{"name":"storybook-addon-jsx","version":"7.3.10-canary.150.939.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"eebc057bc3eb5784af99b71aab6391d4cf624cea","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.10-canary.150.939.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-OlePqqpd2TgyRmzIRHIzK7CLCMFvrB5OS3S4uG/DORxWI8QPBI/BWbM3wVmA7GUNP6h26pEZMPZhOyWUnErJ+A==","shasum":"e97184b8d1e540b32ed6648eea4d72cce29b7709","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.10-canary.150.939.0.tgz","fileCount":28,"unpackedSize":172372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglG0nCRA9TVsSAnZWagAABakP/jLMQVzX6/3blUHjuvoe\ngAyu26kihbqrOSBO4oWdGVxL6W/T44V3OYZ+v0Q3iIM5O/OH+zRdmcMEEzbb\nxz8lXEbvMGqrxBFAEqqcXZvSov6QgYBjRgXKWYkq9z+lRl8hbf4mN6Gy7EnW\negOkupgDtlcYckoqFGK0yDOnW03fNNRh9KGVw58Rqfs59LERXPP65Y+9lzVV\nND7nGSG/ckiyvSLnmcpig66DDepcUYa39l/XYJ8XESKM+ZrONEc9r6aKuU9c\n5FxFtYCglJVblLkxPrrjcadl/08SozzW9an+Vny9iJIaW7cb0hEeGg0ZgiOa\nr0jQW+uBhZNrYTY1oSu0cjC2zfGW+UVrEtAqdN3g+3cks/t/CtPllHczrpTM\nD9MfVfQKgo1LutoTzt70WS7L6RgtqdceumM+siAEYWy3xA91uSCKh4bw1CRV\n4Hwfgr463nVoyV/wkmXBskANFu3BSptJRBLC0JqzQ5KKyEz5AOOnjJ5EtUqc\nSZ2+T7zqtBxtwu6Pcz4QZgXSF6appVEO9qurQZ212WavPcfqNa5cQeo4+Tob\nYnrEtip/jVz4UCxx0ATpKPvuBhaRHSnVa9XpMNMLIOubqLfbY+j76/apEKCK\nvGLW9In9wh/raWtId3kXRynxBev64uvM0f6sj42drs353ddjLzRNZbr1geKZ\nTk8i\r\n=dpsa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICZbEUWkXJVrbqFCuASMyrA6lF/+3R4zODE7U22UGjG3AiEAt4fjNPVUjFObFO0tbz8j0FjTbNlOB1SII70GrNGBucQ="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.10-canary.150.939.0_1620340006725_0.4359469962012017"},"_hasShrinkwrap":false},"7.3.10-canary.151.944.0":{"name":"storybook-addon-jsx","version":"7.3.10-canary.151.944.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"7fe222b5dace2aab9ade1f09e814c652a1bb1bf9","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.10-canary.151.944.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-vjypUiOKwhRvJDU5hAihBMlRVErFujevt6lgRZ1AUZlsy8XZZMKFeI/QlYxTrSCoNCS9/Mry9jS8R6Zb7kGk8g==","shasum":"b91ae59806406a04d1c929453e96c6397c838a98","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.10-canary.151.944.0.tgz","fileCount":28,"unpackedSize":172372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglSZyCRA9TVsSAnZWagAAWrgQAKTxys+CNfqCYja6cbdP\nqaLCYz9dx0dKwHLVVcoBA4vc7jSZPaSckdzhPh0qvIDjsZb1foHrISxtXw3h\ngJP2DsQ6ZHcmKQy5PXDdE0ZnMPuIr+TFhT1KmzotnhQcrg3zHBwnOjhF/VNV\nm2Vf8nbD6fhE4BmDA66G/01s5L68hOXr5rYBs8FmzdLEZ4SfTPvfUJv52bZg\nO/AAjt6zxpFJRaX3gBxqHryVHnL1uCA7LEmcTsvkTRKu+ZEoE/ZVOv3WT9oH\nAjhKAFzF+q7vU/+wJwmF8WJJ5dMACVfU4akJBHL57g2Ku5Kd7JkofxN23RX/\nylW+3xrjNfYWJtnvnjgKWTgoHG5c+r+awYeLhbsPdfk3SAflymLDYbBicZ3C\naD9YTlrWgIEp+JF5GrQwUCJe7ZeGybqxSh6gZc1WdvH7zO4fqIczPaIQzKa4\n4Ik64Qa3U737Qzdpq0SEHcpOMApTN0kAcCqPlO5idu6BoubaYeBJvijjU+Us\n8cuddV6PJ6gmz8m7VEEd2BNZ5jaWC+u7OaqfBdiunBPx1C5UtnVrP26yUnmn\nbuKZl9oAUi2k95w5nTAOhPP5A80TfNg8v1YAjL4p9LPI5gzeL4fxGXd/ao8x\nphYswtLB+lihSVwghfsBdAKj9IQV2Mt+wxfym729elzDOrTqHlqIr6q6NKY4\n+nse\r\n=FKNl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAvL8j+ITRHZdGGrXc+sbnRBGNuOax49D5pjy3Otr7wCAiEA0RH7Zjam1VH0LgSQRD/uKYFY0MPg38hYRG3HgoVBPQw="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.10-canary.151.944.0_1620387442244_0.8191840891968094"},"_hasShrinkwrap":false},"7.3.10-canary.152.949.0":{"name":"storybook-addon-jsx","version":"7.3.10-canary.152.949.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"be38eef3c71db35caf05f3784adee501b8e17f94","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.10-canary.152.949.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-lfI+8wE1ydhUmi3EJf5b2rQB3Tl85nlQTd1/vn8HIPP1GGO6T/hvf3tbiqM7+Q7swpm5BVc67nL9egM71trgQw==","shasum":"a22e9a7243c710613b51fbd4ad3a11dad25ac11e","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.10-canary.152.949.0.tgz","fileCount":28,"unpackedSize":172372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmJajCRA9TVsSAnZWagAAKxkQAKQFj7gwAqlG1mKBIzQb\ntOs45Q8ZvKfGY8wDmnebbHRd+EaweMg/rwH+1sZRKEbYM9VOtgbRzMT80oxu\ngho0tbrWoxSoHm6dkmlCRwqCiqT/g+XB2ujvm6L2Hcbfi3VTM9uDM3oSIjQ/\ntmxQEtevYM+AzrBjaPaVug+6MRJ9YinT2aAuZlToKApLfeJLJIX1K5JRlI6X\nonO7tP9lb3oxQVse5Ybseb7yhy2UI7FgfDFMTy5pco09BeVlRokMYbtpA069\niQoRBSbqAxckIWLjcvUZmqYMicne4SNKqfedNzlIH9vLpOjl6hLcwHMmT5/Z\nWVrCN5yJRliQdCMWO72LJikiH6KzD0VLPlG56kWwzyqqwIJZd+CdHqPYaFPS\n1jfBTK3hjhjXxkOs5w6dsOnPY6Ue3fSKOQhMNG3JCbX+KfRUjVM+9xgigOhZ\n6D08cPlhvM40UfgmMtY5zchymS6N2/WVNYqbAC2YvFDw3RrQ0EJN9t4c3/Vu\nuRTOPv8DHK9GIjCzigRF2BPzpwNbIff5g2VzIRKsE6ccN08pLBT7BG4Fj/d1\nSp9Gm/5zE4EX0aTl6ZpMAKmvqVkixolgWe7l++4UoTiLBRsbxuBXGZSLwBEs\npltqjGUlbTRUwIhF65XBOdqFC7TPNKAV0tzP9ZTqCssQn54xOUk3KsmjdLLh\nBnbD\r\n=wJQ7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE1aJjsvnlopDsR6ZDPj66egxkj0EqDafoK8hl1G8PwkAiEAtPoismFhfTaZJ+vZ/Mk3g78essxlLTYlheaHc5xUxWc="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.10-canary.152.949.0_1620612770851_0.895277633117624"},"_hasShrinkwrap":false},"7.3.10":{"name":"storybook-addon-jsx","version":"7.3.10","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"gitHead":"5f64d607ea9dcad29e9ad1aa246cfe3491ccbe3c","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.10","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-wfzd8mBoE9StZHhQeFLdTRimyhvb7M1tR8/PCH2WpLmQ93/zlyBBSoyBajbh0ny21bOO2SKALalfjbmvThFGAg==","shasum":"9ee7b1454edd36854b11b63cd52b3637e2a99b75","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.10.tgz","fileCount":28,"unpackedSize":172642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnShnCRA9TVsSAnZWagAA0LIQAIIT7dBvmOLGzb453CUO\n+CyNv8m7DeWKyCGvFu08LwL/uv6N/ceOZaoRKiIEw8KhuY78QIEKy5YNJfnY\nnoOrQzJgxrahjItqWj3DS76lrTk20x9i86F25R5ZLPztN7CAAU9AX6TRWHYV\n1xLNoVCcEPu/5bwkPPuISe1Yfj6m7ORRNJkZlk0agXtP+DYSaNNv4Jx6ZSkY\nkGdnyegbKQtNnO2v0yGi5jaDuzVwE1DTYuN0wO9yLyymy3bKiEaf6k0lM7yJ\nsIS9li0CIYu3V/JsVKLrsNHFQSUqEupIzNQEnhSrbj/XOJ9NdufnJf7IvdY/\n/ho/ZbLwMX9w2w13QvaP+SllBLVj3Tdz8yeX+bvYZ5W1aabNNg6xK4mCBdDM\nDJIRPqP1J80R1NrjoSH60KqoKf+yEzf22tCsaf16vvFdhH9XUW9zgA8Lcf0q\nXLPUorKj/PYzNHg0CbVWlnixk00NHzDSn9uExKRmfZUiTKHErwVE2S7/i24w\nccwgxpXOrq1N7n+wkJFvvUD5IpAJDZeWlLCbycRRyS/Lj0icbBUS7UyxoBtZ\n0ymQCcd5nl6EVrFS0zRcDG0pmUsYqhdcMvFAB6QLNK5/79IwFQdEZwxxhyS1\nn07Z079LhudBZKj006CXqcPeYghtE6TcyLWHmU/Rx0i6w7BJWV+Qb2W9fsR/\ncmiG\r\n=Ss6X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGbEEqfmpqIpNqVp//K5X3N7+6cvZkhxUQDBmBN0I0IbAiB9LGywUgO4eNMdTT3jBp+wnLyvrJs5/811bgKNqwJ/gw=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.10_1620912230456_0.03674422544497613"},"_hasShrinkwrap":false},"7.3.10-canary.151.969.0":{"name":"storybook-addon-jsx","version":"7.3.10-canary.151.969.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"030eebf0510f91a27cdae1c271f51d89af968ee3","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.10-canary.151.969.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-PxFM7EF3Z/P/+kbxag/bX3mXOf3XEYw/t9Rw7ilC7pU0k1QZQXDGaHy9vmE1zhw8Ew4epQjlk/3cBDYOA0ln2Q==","shasum":"e2ffbc23b46f0fa3e527036ca0c016a9a698a7d9","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.10-canary.151.969.0.tgz","fileCount":28,"unpackedSize":172372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnShrCRA9TVsSAnZWagAA2WcP/iLR5ytcAGdmb2XdIu4O\nC1ePqEwd5rBncOFlev1ApXYcnwEP69wasvIO4wqbpPqCkmO84QXH4s/5FFxF\nCKp9oAJSeCGNZnmS4W1oKgxB70B+xTrJ1sf2beG+Z9zbXD7ovu84EuQWRW64\nsYjBFkAA0O70vMQRf7YkTGfNwehFIx/JE10HX32tq4Z4fCyjExxSWdMEG7wP\nLQCHNyLuQYX63d3EzE47tEU9LVDhUa+bSffFgH6VpVoRCMaqMuqolzEocxAF\nqhMEbELnW0tIT3yyAWwnhormSNqNk+YT0EXZOcoIGb/RYUtB9fiSC98FV9wp\n69H23nsIuTYzx/EZeDW3H4tJ1NbyWJmD5CUGxyFG7Mq1dGfeEmxL1DZC6gdz\nl/RVTi9bj3i7sb1PVjAMHtpPCHU3TXPbjXwVg+KsZ17CSk6v4wGycO/NqniZ\nY0g/7rka9u3YQYLSsQPh6FTJ6XmB0auiWI8LJuzJ0k8p+c2EvJDt2jxweGgv\n6ThFbFVr/+hYxpjk9H7i9n6efdFELwuFYhrm4Hna/RJfukv3qrStoQ9j2izk\nH77mEXUYB9Uff6h3GFrpx4SDKZ0g4TXOPQP8DN2RBjYrqFeAUfb2ldf0B4Q7\nBte2QCfWWqw9L1sE6lPqHhtXtOlfle6+lsUloAoQfcojXpL7uEEOr6Wv0R8S\ndrMs\r\n=fqW4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4gSVhok/WFFB0OIj1WMwX2gMfX4er7FL7ujRfPMn2CgIgbov8rYBz1//bnBdBNpJBjLPwGfCWaQ8AkBUgn6PZQiU="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.10-canary.151.969.0_1620912234783_0.47786097475975886"},"_hasShrinkwrap":false},"7.3.11-canary.137.998.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.137.998.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"184b15b946f69c42371be8e2e5cc20fb5a6da757","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.137.998.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-9+2mMFPcrfpPfveZu0yqB6uQ6Gbbgw3Oq1qnaBz7kBtQqGjg3RYn/e2BM9ya/CA2urGdF342v+rJRrb5aqp1mg==","shasum":"e556dc4a15949f827f1f3f9c91427ecbd7a7e0ce","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.137.998.0.tgz","fileCount":28,"unpackedSize":172372,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnSiDCRA9TVsSAnZWagAA2TsP/27Rk6A/LHeLhxcI0RqI\ntgzEY9ZqASCOWcP0kw12hJAZUdjqw77DKjaeO9WDWAHl6LekOZZ5tXCxHbeN\nO242Qeg91fCXIohbv1EeWKeZAQiTHpIKHxoP9z88XxKldJHNYstvk3klYD1W\ndaW5otfu+/+AG2v9DWVBEiUc1my/nNejoWQgxsxM9W0ew88r+xM2QRmt7zl0\nCwLXMfsEf7BhRPM4yBryYPFmkRAgLCeqsEEolsh1FIixesPW3A2kDy5TZ4NY\nivkyNHqjzcn3nMEZ776WDAJS4Y/U452H9A+zBsTTuZv15aNqgGe7m6yM3Bv0\nYv4JYMyd6Yqtsl8ZD+37L6O/uFgNIdPIsyocMO4juz2MyC4VhqkO4ccoRoQx\nUcWsC9v/L0o9ogidGWiwd8kmOKNxQN9XhGx5HrhI0F5npjgu0eO7Nqjxv7Sy\npc9W+xFtfEOO1Pov8YB966vHVlth0U1hMQuLAa+qk9rKaieKqraCadlAjRNx\nlNqBdpkJ5de4NKIIElBTjoPBZKb/UxGi25dO9kMf/K9ZuU5m5vwG41Wwzxpm\nu83YghVzYZhv+dkCOko2RsOaODjMAMmgUe+kJZwULy2NVVMUk4JLDzPI0KJD\nrylIyqgmR4sbKBd3V6MSY6izZL5agxJTL7J8JlSKl2AUiWLyfxXrqQWkDRvi\nahsJ\r\n=Zqzj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXefIbok0BisaQQaUhGKFq4oVp/XLtGASEDfAK4SerMgIgOnK9cgZ6xIdYZ2SoohER524hVRUl7D1uln9469Yny20="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.137.998.0_1620912258795_0.7768975874172293"},"_hasShrinkwrap":false},"7.3.11-canary.125.1001.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.125.1001.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"6a1bfef7df8bed6fd4e2f629e5703688b9749910","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.125.1001.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-3vStioIcMDrogX6G2VEfJTEMd2hFLDHMzdc76UbFA4lWNITLpdtQLtCcemE2PK4RP10eOl2aNJlhD9wDe63iSQ==","shasum":"676f739345215d5306eb5e72707174ccffb998c1","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.125.1001.0.tgz","fileCount":28,"unpackedSize":172373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnSiOCRA9TVsSAnZWagAAiRAP/3ZvisOvDEUTiYZcCipF\nvYpKLbn0uxqaxwbTmMbw77/x5FlUNb62p9lBg0kD3pMdVQu5fCuEx8fnKWYw\nflCBeOm9NIqC8uYkZq03lHI9tl75mbGlzxHPiZXPaJaeDpcVMr6pDXjGLXyP\ntnFYbATCwObIHgS4rZmg3+L3RlKuXUZ8jHP4GIgdYfO2enAknQ0qF3ZWLxhv\nk0KwXp8pZFGbUSQ4Eod8QKUAHWmjrAygEjULSjpeo4T9kD6Im6VpYK4h47wD\n96KEWC3KKhjoORnoqNAY/hrPfmanZAzhZCtqhDv/4hfkdyDw7VEBtdphHOAy\nmQhcbakvhqhbYS4vQISAj40iUnDhAxP3LrVTZjg6vsNYWn/v7HWcaLswIzT2\nokuRlWpk9ynanzWftR0ZwlgPdgcfXpTr1X6Qgg3L9S8lbkHhqpEQzJ1N06Xn\nmXJGpOUdD4DqnfaUx/7L/QI/LJ6sTGK82HeSuH5K54VrHQUZAAsVdDOC/mxY\nKin3i6om3PV34WLvP9aSV8oInFxVhbsv3v0bBXJ4b+away6EpPwdmqd1S3LM\nDetkuO1nMhZNjrkTAZv/ut93x+ey1RaTpRu2XAA9yM8s5RDD6sf5eRlqSEA6\nXAzkMLOmJsuQRBgCldCpmGprUdykTLahdXJRosOhxSyE5uYoOoU4Z+2YbXaN\nMyyW\r\n=rht0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGTHjnXlpRAJkpN0BKfJfY119GHOb1BBuUyAF2P+vamJAiAgEefnX7DErMt4D0tAvLFGprl87ZdF6Tw/ARVRwAEG7Q=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.125.1001.0_1620912270035_0.9757697950926636"},"_hasShrinkwrap":false},"7.3.11-canary.136.1002.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.136.1002.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"d00a1392224accdf74509492fca9db2d4874c9c5","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.136.1002.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-TZoEfdgcDcjA336G29ICRG1/vz1zgwftJnknaRgI7vBohE/fdVlPs2lyGB99LT2pdlyJncrPl7+tRaFP7g5bIA==","shasum":"fd71d62527d1206cdf2411f4cccaed80a3beef36","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.136.1002.0.tgz","fileCount":28,"unpackedSize":172373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnSiYCRA9TVsSAnZWagAAV+wP/j4KfibWyDnUTZvIAWz5\nGTXQRpJpm687OJZRC+D/QkdjGPsyN+TUzBzAO2LQbYYSc5AJN/Ig2Kk7iHoN\niIQ64yAAfFMnsCJur+iyiUYDVMqjUPtAaanylz38iELP1Bdy3bheEdIN54+r\ntVG2dp79wfq1JnmlUXDmPkDYNQpIILG6FQmKiHapPC2xejscfsJo6E79/GLQ\nC/MycALmSGTQsu3MxkMKik9E2y9jt63Z1JtHNaxIFTVjPQcCuSa1waHgQuq5\nimOcMvCwqWTgEDBcRGa0NjP2+dTE1oDo0fkKQ+UPe/QPKmcYDKb78x3s1ZEG\nAWcPxTI51VMOFNER24kpeVLY73HNb5Ek0EhvgQ/v8gfKA8Dl9xBVCEBY7RaL\npI0WjdJzrYLqnP9nZOxQogETzjdnibYCQCC6sNGVevLxEXS4yU7U25jrRbK8\nCeh0sWcufAYmTDY5u3VNbz3oIB7dAvVZGxHVDplR8yyMfppYvSN+KKnQ92AF\nLXXKSgdxD81NjOp173SxwrnfroSREemUg3rVxyvKogYC7MCQRYqpNbmrW/u6\nvq7QfTRoSFcttkSYBctFZcCR2hSGOi44wq6fOOY0W3tMC6Bjp6bytze2TQkU\nfthCNp5hDzWuqAXuZ0ox79DmFx70DQMAeAfFH1awyf25Gg4urf1dpZp+g1D3\nqd91\r\n=ycRT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7jLcNsqH3Rpcw96PtSXGbNix6kKy5zmcme/8BNVRwnQIhALSOjFl3M1AwlPOZsNf73LnX45PJ0yJ8bOW42/kvvAYA"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.136.1002.0_1620912279743_0.7700673505399582"},"_hasShrinkwrap":false},"7.3.11-canary.111.1004.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.111.1004.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"cf39c25563001831d6555ad441f6af5fe2281d4b","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.111.1004.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-hCnz45s//r+vIEMOyOqP2Koo/cQP94XcObsmZUR1gt3WprDK3OH4fG4OI9ucf+zbE1FJOLqXQdjqnvrsGzYQhA==","shasum":"10307516d80043dc4333fb2c563bbc8ee8288f42","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.111.1004.0.tgz","fileCount":28,"unpackedSize":172373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnSikCRA9TVsSAnZWagAAc+gP/i2hNNHDS4qI9AUsJjZC\nHIO31V1OGNDK4vF0fXvim5VIX9IqyeS/pzdsNcIKAOLMzs78uQriayA6pCyf\n5EtMNhlOo1kTbKR4+kMjdIzmAfjuAOkF9QDuoP/onNKhCGJUuY6ZSk4gtFWw\nTwNeQEKaLNq5odF/XSsMvYo/OMofEyu8jfM+5vtn0rscbVAP/yVsObzazHkS\nJ6x9h5esLRtxJXUtG8Pt8Q2ySL6S734hZvalA4rPBZbb/y21GKBCQYFly2v5\nh26JHBqJ9JaMSvCL8bDYZFbMsM6/tRjOdu969c9yyhI29CgYq8+XlUrHNdEx\no+XKRjVIXau96uewu5o3RzZ0EGenSREabNdrVch6PqerHV7EcG3IknUmAJQt\n9xIRwfZgjcXwJ9XGfSu7e8c02fUhwr+WYbaftakrnKdjyWev3ly2T2q/Qt/I\nMDAet3UO7PwSESB4CgULQDpJVxW7tP09QdxJxWDp46kYJVCuwKYVRfZlV/Wy\nNS8Q8o3HiOLpriguA3wdD7JYZo2aLZv7c3lp8/Q+XUSqNMwoxIygCRFkhugU\nJHFQD/DD0PpJfZQH04KisRe/3ExP8NUOueB8hiWlWUkuCJFkyQCjMIdXf6KA\nV7x5OUkfx2ZFlbykFj2hfd5I8hZCo7Y9lMDRG9Us0duk80HeaMQFkxvP69dV\nnhn8\r\n=+J8P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHHfbDaY+n/Y9Bc3exJTSaOhYSh5QjPSQQdxde3XDD9LAiArEjL7YDXs3lUbcVjXHdNZ3hJMfOJ8JXWLb28VX+zXxA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.111.1004.0_1620912292366_0.4659271974701147"},"_hasShrinkwrap":false},"7.3.11-canary.143.1005.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.143.1005.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"df12b00a33a3ab1f71f65dd7cd964e21cd4bc893","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.143.1005.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-xoNMoY82BO68FPyXT8ASex1E9RRFq9cRbESnBfXBpH2/Xyrmk/iUeelO3mpsxYr0Q4egbSQN72tcIsWf31O2vg==","shasum":"46cb9e34e8cc0080d16f4c780a3a79cc0b15fe2f","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.143.1005.0.tgz","fileCount":28,"unpackedSize":172373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnSivCRA9TVsSAnZWagAAw1MP/2+Giv1fhQKl5ssQuxwX\nB7kKVaruL8YdWOa7KDrfdK58zbqsbxtPyr50n7165lc9hHjKaNTnSw14eDh4\n5F0JHKcudkCU8hpTo1d2mmjTEcW8iZSocOi7TK8a6u3pMp5JD3UzV0NLhQ1o\nQhd72728AiGAaeMyUmr47JjvypmvqVPQKCWgckltCJa0u9KznlPNDT4e+XXq\nGVS+9GVpParob7bdC3kOMxA2W2DYpTMTW2jtyu+Vc6at7mDkDJD6g3mqGjFT\n/h/ISvU+5za+zvo2JLMlXXUlob7hrL/qs5CAF1dlWrEOgnvBxatvCg9XJ1VL\nQcTDJQaI4c/KMleuCXFNIP66URGytTV6q2FPyMVg2CAGQxxC9z3eZEkIEsoW\nunVv88/pMQJ3pCnWaAUGFd7GTh1TDTcJ2WoN/+tTN5uPoRLC95YOE6fZMQ2e\nRTBDAeJM3ASxqKubXxJKZ+A9tg5Wog3anhkpfhpCdY4EhdekaalqYtv1MLTf\npSqmir/NgQtL4O3KMBDy7gcE6jHGMtnhBOLI1JSy4/oaUcM/9E52SwIT/Dds\naGXpYCuW1o2pITkFOERaIvBxhs7ZEs/TU2JqcGXNVml41gC2JseNOhLe98RU\nAK0MnDlIFQf3KYHX7sAiArWPgmWzW01n1o06MVKlMMn5YfUMack3ZoeKOPA3\n06Gh\r\n=lNaE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHq/2d1psns4lhYAnw2jHyTpapROPVNKQHfQYsqf9wDAIgfeNkD6Khi/iS4+yT+elT+8br99HDprMHIHyL8v6rKQ8="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.143.1005.0_1620912302767_0.8196991377861838"},"_hasShrinkwrap":false},"7.3.11-canary.144.1006.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.144.1006.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"40c7889c3709f23411ea7133cf9be7020415984e","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.144.1006.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-tWYnEUnPcnQ2GD53IiEkYHfiOTr/BvrnFwu4xavVBCy9pA+nQQFntYMwaSUywRnErbwNeW+ao75yn8DpqLegSw==","shasum":"cf5beb8e7b08646f456241d9ed1de1c22b8a9d27","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.144.1006.0.tgz","fileCount":28,"unpackedSize":172373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnSi0CRA9TVsSAnZWagAAurYP/3I5hyRsyH0ROk9+O4Yt\nWp+qf8LFw4oTAWUPUio6TwmZVVUVfH46iYnboxsRFxYo6+4nkQcbAw8pG1Lf\n9fhACGm3nJKN+s4S1yWcnVOyl/8LAqtPKJqAZ1ZOgai5NP3HG1dvouru4deT\nUkD3uYL8jfPltG0UXsQDdCiauZ0b5li/namWDpoJA0Gk6b4XZ/L7ivTdv0RK\nNMBYwMS1AzRJFJln42tmLg8fkUb5NPbYG3+9CNHeVfDAut6+qZ0sD4zayX2B\nCXDhYvdE2CicOxWPWY3eXCAdlW+er2meYnEl0rq4KOUzJCHEQhsWjNZulUve\nAVoD1SmYQu+v7qn0m2zL9jgHiooRe5xqHCI5oPnS6dkzDWTf5fU6fpTXx6cE\nbK0m6PJ+QZkfl6dEBaftFAwO7lHjnFZDFa54/T4opiibbwsf1MYqaFvJeyn/\nz1fFiuXcclkQaxQUT1HHGM0EoI6lUHlRuqsMwyh8WvNusyw8OUjJxEK1D1j+\nQx2B+0Lfi+jbYH+RTX8PzFS3ugLCBpAdLFCYHOYDAGheEW8KOUqsmevdINlf\nWuW+RWkn0xvsP83nDe+wm6MdgiQw5xmW7HVdLyojFZm3S/yVH5DxzXPEjh1+\nRMptABB+yH31c02/CTSh4qTy5VsyDzz8bzSOYe4hVoGILo4Wn0MYBL5vlf3Y\nzoiU\r\n=K8y1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGgxcAzrAQu7NFFlh6vQM4/6TGW9hGo0Z3PLRi0BBkBVAiEArv7B+ahoaCt5/StpQ5SsKBCk1n2HAfmP8T6rQaCtNOU="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.144.1006.0_1620912307849_0.08541455672798093"},"_hasShrinkwrap":false},"7.3.11-canary.133.1022.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.133.1022.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"ddcb2989074fc7e2bd140ae006c88c7ed13edfe2","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.133.1022.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-8Xw50JYpnAsEk2+1B/qEFrnge0/3JrTSIyeR82aG96WUYjReEvN6LuGt99NoohNzzwO5nkUrtlrBLF3LfbflkQ==","shasum":"d0fbfcb17835835372b130b8b2b3aaa5df4dde0f","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.133.1022.0.tgz","fileCount":28,"unpackedSize":172373,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnSjUCRA9TVsSAnZWagAAnDAP/RaZ0H7h5sjnBj97Tf7U\nfgXr1k61sr87dG78Hk/K513xelkMlgU6a/Pr7SctytQXwQDzGI9E8+mF+jWt\nNPK4Yo4PDZgXuhlQ3lcW2RyUFD0qipx+QHYj6NySGzzxW+VOg7Abdwcss3E9\n8fqUP3jqCc+/G08kQOgyLJ9scg6/xE3a+xZEQaIpNY8mq8lXBRrenvyJW2QS\ndTGSRzMjnw3GezOrKxP9usJxm7Ukf6UqvuOPtjBQ0AwHctYOnuWIs1yvXT7R\nT8w4gryLs0FmV0l/SzJFwxvDNq0ELSTFUTdho1PA6NtrIRa4uzmgT5z+81VJ\nC0TkFdHFTqpNjucyxRilT4heFC0I7purjN3eKdxZKZVLqY+AvGVXcMWaePen\njthppLTM928LkPHAY1IA+zLrHWpjLyL45GZ10gGT/Te7s8XbTN+URq0bh0tm\n2jmZ0kwhUAAo0DulohDC3wHAFjHNZ4wcw4JCUvTMaQg+w7e0r/Au968vP5/L\nTrxUwdEF++KZdGGqfRhcWmRJ03qVGHz/9bVNqZqC9PYYbsTvO3pdNyTJ4lLy\n4ZFlsoPUpY4ExR+Qaely5N9bNuz19/zPYldtApEBy+Mrcww0Nlh+LPYD3eOx\npmtRhSScXQuGEdgTzYTMDe3eGMdMYQvbINvHfEvdl3zO3HixVCUjAl7F/MQ8\n3Kiq\r\n=Hr3N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICrRkmIWFhTKYL9i6f/DBit2Ne0OCt6qIKGkdV+fW7+FAiEA4Q8sdvf9ia9Yo3UcVmFqASj6/nBevEXrcrm7on8b5jw="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.133.1022.0_1620912340070_0.6938268861494847"},"_hasShrinkwrap":false},"7.3.11-canary.137.1043.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.137.1043.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"d6e18f055a893e6bfd3f2ed5cdbd471af58621d7","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.137.1043.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-1kaQPjnr72Q1Go9mXwm9Rbe97zbfHxfYe2KwdMusTuUJuO/GRk/8sm55lMLg8neVF8qtqK5u7GAVsg1k9o9jzA==","shasum":"f832c6fe30092b5966cc6cdc9aed5ae25080bb6f","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.137.1043.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnSkDCRA9TVsSAnZWagAAoSYP/ieU26RS0rQH2M5eYrE7\nVgCEg0KH2kwt+DpOHsz/YDAm1InoYEkfptlc5/Ir6TZ82UhAN9MU1Ex2TsM1\nsqM5CRoes7qikjpRO53h6tWM93DWZliLSyLGqcL9sX2ve6qtmHwCt1r4rWwk\nIcpiVvza1UZhUavpPsQwY954CouJZSo8Rl58mv/Hp9NsoToinrvGDR1wm01W\nauZhLd0474WJjzHI/Y9066811uIQe1iqKiowdXp3zn6uKf/Gvrk71kt4cj9V\nw5uGAGv0IRWBcK136VEk8YmQtYOeZ8mV7FVbqahnq32P2dNhBjHAEKnFOB9L\nummqZJPSn7XxH4RTp3A+1cGyACO7q0B/80Lqfm4yI/Nz0PR9ZH/YUH2E6j3j\nYEg8gC8Zo2NMHZICKGsOkLFqmyAOmH/DVxVM0Egr4Huzv6vQx5BTMsIsZ0Ph\nSjQymGLgIM3KEpVvgAecEkh91wg7BBHjvLjFZlCG+rCbCGRCeJvQmRi6OyVh\nU3YrOoGY91PfCIUrdoQgmXOY4wcBUuzwBUYLHo3sCxPPb21k2pzi4xODQ5Vh\nzlKbrjHMUvB9JJ1uhXgTpC2Ucy5X6Vbgyjo97FhlalClEbOHi30HfTUiv9hW\n7x3d9pqLij/IEy77xb5emVjfVIsfIQ0tsAXIWRWjYDkBhiKXeOeOlQTkZfj8\n7a9S\r\n=//dY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBhONk5XdReaY+Ol653yoPLAvCg8UI15+3drXJW3ELRWAiAMoAiKVXQRhUadTDjl7g1e7bLkXFo05UbxUsFYguFQaA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.137.1043.0_1620912386767_0.8829581988977593"},"_hasShrinkwrap":false},"7.3.11-canary.125.1056.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.125.1056.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"c9123a7f8f138de388a40a1ecb4f842b828ee242","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.125.1056.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-KpT75OhUtG3ACbxBl36VupAsX5ciemQ5oI8oDRc2b7raDYgI+Szb7ox3my/et49C0WHfQkSKwTwzTO/lHiy5cg==","shasum":"2b1f771cf42ea571cbc85eae56a99d421bcf7927","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.125.1056.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnSkUCRA9TVsSAnZWagAAkE0QAJ8Vt0ZBeIiEvszl+mzh\nzpJckyty0e2cxsK70yNispufRu/w/nUJo+jLkJDP2tJ2sKpd2/9sQ8qfoTSf\n6sINVMS3A733zoDIt5wUPTOQ47JrD01n5vZcEenJXdPs5+ShNCpEV8Y8hJP0\nVIneSoEy7tWgrvwxyzfcVSHr83RB1uBOH3TboQvbi63YGdE/UgbqZ6Bntk9q\nSEGB6s1L4lDqk4oe5oK+VJnC0UYOu49QD1b4ALLQEtNqdWuwTyZvnotAuOY9\n+OXnNvUgkKn6Rficlhwq+lSDOdBbtKyjjo7POcpvZXPeGBxfreouU+hDSqo7\nF1upuFj7vvObJDjAHI7eX4YDvCcLSTN4nKg1D+lweyTb/z4oM+Mn4tM1OTmI\nHaOCp+mcSrr5DiNjA6xjMW6NZPEdSGhgbGe/ZL0K6jDUY88O1w5booPYoR+9\nRF6WCmaVitnIvtLg7lKugAXoFbatMhp8EiwKn0DBZUyL/f3ysX5Jr7keulfm\ngVy8ngtulydowoEMH4tfd+suCNKTAe+p7uC99K/EGtsOi9L956RBrgptgiB+\n6P9odh0uJMxd1N+qfYVi6X9f7J7gwtNhIL28JpytSc08W9UnF4OzoYXdTR7P\npfhrvc9ivez/THxEipB1pfkUGVFWX5e9CJW4VjgtZkBWPvy50DdAVwvMhMeM\nbz/x\r\n=Bnqg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICYDZq8QeINt9rHMCXJIwDL5nBBGk9l0ykGypEXB2YjhAiAY8NUo2XWgAziwScGu4hftstPliwH9Rdjow0SMRT2rpQ=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.125.1056.0_1620912404191_0.457577867033252"},"_hasShrinkwrap":false},"7.3.11-canary.144.1054.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.144.1054.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"5f4b3af6526f63f386efd6fb33dd961a6f610fef","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.144.1054.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-syYkT51ElFlBM5MJEzguT8CXItypxiXrGTJxfEpL6Sql7cSBBGJsu74ckKpN1RSGdvKr6wK2k3k5ppZVcr/VGQ==","shasum":"8174c0248301a7a6f65e27bdbc4bf1fcb82c64c1","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.144.1054.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnSkeCRA9TVsSAnZWagAAJKkP/jpmjDDn34sf2SE2w4fA\nSBRwYnlQXPtHIEWf1xk7ippz4JOOIkvaI4aKW+eyZPtPcnPJX7su2G2pRTZm\nTKNC7037RVHzDmsucJL3zCMe/V11Nwqq21CtFG9GBPuQTbFvblPSD5ApdWAa\n7vhjhKQFQu8GJ/FDQ/FF0QUr14UFhrgPTUGFGrycIMgTrelVdpC3t6mHaCRH\nwDAYem82ao9GSYJpOWpj9oVmHZUuP3TuV7FebLOkMS2Dmv7RXQx6aH+gkcOJ\ns6U5tPx9uONyI6KUjhRxdNB3FKVdL/VTa+8fCnaGOtSa7u5QhsPWCtwUbwtq\n6Adl0pt4drknjDHMfbI+xpHNorHNnojEpJsO2twgHv1JhO6YhCQELaHl+9jV\nR8h3ZOFDR0+/Fqfud28YH6K2e1rRSkpWQr0v99beM2A5SX8q3uJeTyLjXDUH\nNTtUk1EMBkmR9OfatkLsszjwmn1fxti/Yts+9Xn1WFaHg18yWMzLPg2HUUZ3\nxl6zVvS/KwJ+MuzCWazJlMMxgurjFctKyJUav4LkjnPRIc5L6PWzFTbuWCzp\nmh00EPFA0Xs/RiuUbeT/9TuyHmpQJOSX/nhlJS+rtUsnBLEcNQUb5DLa/SpO\nWmUZhHGdwq3CZ2UaOenhtDNymc+7/Nq+ZJv8rNGdT53/ICfP1GqmQbHpy9/B\nSRNd\r\n=fUt7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLNOySu/1+RFlATodK3BE27hpMIUViz3J2uAyNJgh/BwIgLa9/eZE1lFqbjoKk/Z0nKX8Q8imIF/nm0h0W1qg+jRc="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.144.1054.0_1620912414026_0.07099004018235955"},"_hasShrinkwrap":false},"7.3.11-canary.150.1057.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.150.1057.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"f6b12e80ba0788dc10191b1556d22ef1a76c5f70","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.150.1057.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-ipw4AJAFAmh5jJHR4rtIGxxhXCTvnVfRvooDPzRG8Oh4gFoiSflsr4CxA+7nWGPL9XT1dTa1HqI5190wGe91IA==","shasum":"edd1e1493cd3787901aa95a7ca674b62e0a72d24","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.150.1057.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnSkiCRA9TVsSAnZWagAAmrQP/2BNqEW1V4ZX1mK/7Uqg\nq9PrV2wtQeL8S8jKF35PWtXWmOBIFASl58cofon6cnDSZOO5fHuv1Ra4B5qR\nQlzzPay2BPxTtWIzZKfNyFAEuGhistTz25YCTACBndSE3CcLXBWlPDIH0d0t\nxzywLP2FytrODsGAfjP0jO8Oh7rrqqX0Rhhis++zgliyEicALUxMia8dgC1H\nIq5GUbAgSL+fip0tqs54HHBPOE6tMVRT+aK1bVBvdLxugLz5Q9E594hSquHt\nN3sTZ3jqPeHv/gVt8ffsqH022jq34zv1CBqGV52zA1baylhOpimNQas40R/z\nr39P4evSWzm8gfj2Hfdo/OIK0AWPGkg6gNENk7lV7CQHlqKK7sJOzD2sBnkm\nA0jVLb87C1l2DI5qUsyuMyCI2BGRklhezYHB5x7Ddn/H3wo/X3kbUfOHzJPk\nQye6sRBbifFpTRM6Wj9fKDVw2dEYOlMSaIIukwwenlr6RLqpU01lH8SuNs+x\nGZEdVTKZnDBiOFM+4sdCyP+XcM6hBmvx2pjtSp1OLCUurIGvqCN2g36KMos6\nI9Q2SrvubvdjmBW9iwpdRaLwU5v34mzmzmwyiV9Erm3TCSYp7QCEg2J0lWQF\nXTIGa7k4vEybuv9O8PljN8cngjVnYvkNIVHceY5vipB17Z0xeYfoMbzRIFDU\nAvb6\r\n=/sC/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDA2wVGIJ2GfZIt5vnIZgJa5gG2Hao5i8Ke3MBr+pl2FAIhANkI2Ut85dxGzlvYcfiIvyylhdxw9U5gpNRjpWN21LqP"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.150.1057.0_1620912417884_0.10794054782328133"},"_hasShrinkwrap":false},"7.3.11-canary.133.1059.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.133.1059.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"2703361074e1bd4f27f6bfd2c83f60f549a9d41a","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.133.1059.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-WeUIjnpzLURaTEMNNGVUM2TCGpD8mXTdIgKIqCpPb3rv7UXIgpaojLfLndgFigH/wEP4KYLMqw5jJVlOcruh0A==","shasum":"e0e73b8076b29e3925814fd5e40f6d6d52feeae4","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.133.1059.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnSknCRA9TVsSAnZWagAAKJQP/16qAzC9l2oX8HuS2bZc\nwWen+qhtlslPyWwEKpCgF2K3sxK+CAngi1XDcsh9u55gPbpMj9yOupWt+4Ql\nAfpE+wn10ySC53qXhq1SRyyLdsfvAGXaF/I0fuIywDbRnLVVlu2gR8c64Vbc\nZz4UGrPzBHfmlZCn60LitRgO/9Dk/gyx9jpzMs5RO3tJc3vmW3fwBmGrMnI4\nkktMyH5fw6AOCsyUZFEbU5w6/QQIXe/PDHxdhrw1AQyN0UPGbGCMZhyvt91x\nGnlxnhPzA9Qe87FXNl776miMs5Y6wrolnJ/p4B6CtG9dNwln6s53rvRK2YQl\ndaF60xvdDJQX1WzC6bNiF8ZbtiYSWd9RMfTpq3LbD4A0tsN0xqiAvUdLC40v\nL/n0Zrmt4xT9wUYnjSq40/JFATwKezsA9IWnJ4tjQxmKpEDps5L+Fix/PTuk\ndL4jJpwhXj7gChOGYsJk4JdVbwwYvcQtPJ6Mh+NiMWrdm4WTNe49JYVrAwr4\nsbB6YcIXNREb7jDGRzCGwyRStmC9WDeybNEykpcJFTgYWCRjGvhD0fYfZGcS\nLYp2YoUmSNSFSLf5pi2Uo/yyahLYXxx8cV/wzDeFC3u4FCD4mhc+PFL50aVE\ngXwj/b6YNDKSmNtj9yNOftIuf4gIa3HDlQj+mwPjYpyE95+aWH5KeY5wtt/1\npLQ2\r\n=2z0F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHArP45jT1syWRWd8/lFsvK5WRFqvb6HUAK9Ag15EkIAIgWpVpl+/sIN7OaEyb81wDF6nWiMDd/AqA0rxJDanwLSA="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.133.1059.0_1620912422552_0.2030451663371471"},"_hasShrinkwrap":false},"7.3.11-canary.136.1060.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.136.1060.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"a7f445328d583f878d4fa6a88431f5384ba99c9d","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.136.1060.0","_nodeVersion":"15.14.0","_npmVersion":"7.7.6","dist":{"integrity":"sha512-Rgj+kUpJQd8LEQniY4hT9X9IHeNakLuDymikDUV1UB+Io93OHh/73I3Kl5el54gjIioSptslZaZUu4H7kmtM/w==","shasum":"ee7859b986706cad3d347ab81e1f0b732d66ccd7","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.136.1060.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnSk1CRA9TVsSAnZWagAAJDgP/22dCWQIbT5mkbLIOWev\nNwSIr5HHfFyc+nNPFPdel5UyKWYBxSybhvryJQrdahMzLxNZceKfDKF938hT\nAa9Zr4OcsJoX4S05RGPVjiIpObyW0SCyP5ctp/kK/z4kG+lT/ADnxBOAqaM+\n+oZsCac6ySMpO9hm71TZibv3DssPJ5LAP1dqj0Hlg/A4LFsOkVDatklRDNKo\nexy+cYmF0EiB5RmsfvsbpIoV4rpqPrLhiZgKiA980gyxlJSA9KcjsLYZxocv\nNXr3W59K+WXiMkNoyiwpdpMaSkfsHzS+4evUbFJ/j47CRFu0e312e4tQaC5V\niffWmOmE9RqWCjGTzxW7xia3R8r+M0MWnDqPDr06uniBZ2svXquxAlY1MBP1\nx3jwQQWa5krFZtoyam8uGkLT0Sx0vn3Bane6vhbYXmWYPzED8TqqYYiT7x9G\nhSOCkk5ILJ5U0QLFUF9CXsk7/4S0kfdOqBFvWq6AXHpvh0c4NyflLrgE/42g\nMB3SGjkMnPFmNelZbWy9SKNOY4bjse6200gL5suQleSsHLFduh4lz7mkHQft\n5TIZud6XxOatAmjQRHXB+RTabutysxGgYoYlsxTiqiELjhWD98RzEEZ8PsuM\nz/JuZX8iUqGfBOUOw3ebePpanacZiau1cNhI766OGKK3oTERUJHhT50d7+8h\nd76F\r\n=kJ8N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyuXEGUrbnLOFlVGxTu7PiWtl2VEquXtQd0XtpzyhZ4QIhAMXz1BcfGDIV7ayVpbS2GHRVhR3n6gY4amgHGNgTHwdx"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.136.1060.0_1620912436975_0.15023776407097844"},"_hasShrinkwrap":false},"7.3.11-canary.154.1065.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.154.1065.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"d40b1208a20cebc0a109f4211b2ee649120bddd6","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.154.1065.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-8HEYC75LrO8fqPbel0ZalGgo07qtNTzetQ6cg48Qawq8/tsry3jl/26ULaxi7XPxMrNI1A4CUC5mq975pKXG3w==","shasum":"de3efa42ceb672e568245d4a08726e8536bb36ca","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.154.1065.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvp5XCRA9TVsSAnZWagAAszUP/A387k++8pYFMjfGp4o8\nSsYyH2OooisVTZr5AlbkMeEFiDUjSrNI6v7KtphViqFozhCvALRIokWQe17E\nbYGd6pKAyJi0jh1yAMIT7fG8KaCKAufwVt54pp4sSArwm5aFsdhit7ESi5Lf\nKE0JnNZetE9RLXae5Yay4+f5CXp49ktOYXcMwbZdZtIbM0135i+nqbCjo7KK\nG5LAjKEF1zBWZRMMWPLPDjc8Z2QBpb6xa3i+87Riqd+8Ko7fddF6l1TJ+sse\n+RKrT5AqiPR7IHZFNSH2zxo6+kkSYcFzsr5TIlQyOtZdpmowPnl2UjcShB0B\nw2ODgxOXETwsZKCZxj9TcHZlpYg1PT+QAMB2WrStOFaNLohPp0b9emL9MVJ7\nL1UGAqDS9dLLFqM04h/Nc2V0XpCohjMJDkf/x8SNX9bUr2dqU+fMhZspWd/E\n79cEft2eOa957TtnFO2OD/HdRRX11HYzpr8tDPUZk5/rz45dgxLVxwcd2Kvh\n6VZYuywqWJYFwy9RGfIpGUvpQXrH7Uenp1DQ06PGOjK946dABH62Hp+F9SCu\npDSekyfmqwx7925fl5pJcPz3lHDjFwZ9D6918M8YZqyYchLfvzMHpj7cglbI\nTkC+JsPVOuPwhL3sGzu/Rbe4cFcSTjRTYqAuMlzESVtjN91Nw719VqmNZtv7\nMkXF\r\n=/+sd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC27dqNH3sbufVoBsTsCRufcPSO4iqrRbGh9bcMsPZjDAIgL8B8UC3EfBo6ayIH74bcYeuKFqUL7HniHJSPFK3s1Cc="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.154.1065.0_1623105111202_0.8983466513825467"},"_hasShrinkwrap":false},"7.3.11-canary.137.1122.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.137.1122.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"7aff9ebaa280dc8600c30dda3b965da92564ea1e","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.137.1122.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-yOrk5LhZol4Rj15rblAQoEfsyHfs9Lo92ze4uzCW7g6boQgbETRWDIDuZEGUPpQYUKes9HPZ0dKSS51DLIQUKg==","shasum":"e3b7fc344f6a13965790d619187c74d36bf54f1f","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.137.1122.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyLUMCRA9TVsSAnZWagAATQ8P/RfKgO1LJg62AdX8Kj44\nIWqxChJS7+zu0caytesQNWYOqpSgZPlF6QycSnBiUyZ1I3HoF9ih65n4vifu\noFKaq0wSCPD8tYRwarnQ23ius3wpghMexjIWVN4T4ukTyRXM/+lCKoPbHrbK\n7W2izz2C7CIbWW8hiAaRvTL6Y85m/pK5MGL/1VbuqxgiyaI7je9fCu5+VY2X\ntcGnjfk6emOVLZ1DdVpf0CHv5kfOhxLf6R9dUuMQED4AwEZPxQ4Wk8DLhfnk\nPAlkvafyZx1F408m8b83lU0eE205V554jHa2eCdQtxDw4KwMHtJntkneE52o\nNS//5rZUDcQdzP9wi/ZmlOEpRZF7bUcrKN9x2cpsFSSnMoORIp1MYvgXmtr1\nh90OkdM0245UZoFMOAO8upwanDP4edmkAC4zVgXrhfj8ZpxeJtqXbi+qXLGo\ny7oNDsKNVeQy+MDwWXnYTebX0Y4T43kPqhhLn504IiXlnsowU2bDIvdtjF6z\nrP2n0XAMDyc5qCAkP1pchmO7EPen0QfB5l8YGhF31Tpzx0TMsHOk6AOlBM/q\nmIuc0sJ0gHSWsARbWxq3e0HEItLlPFsnZaVi9Cy+VJ0a8lWgbJI6s9t52SQz\nmXPhEg2xoHY7+crphvhUnD9DKh+yW/HyVH/OUBzOEKK4UdVJVlZFf5+lB7q1\nKnto\r\n=cC5s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTtTNCNhbShkOuEomQxGT4qH8+LQEOxKB+McCfq+kFHwIhANUnwHY8js4owim4IW0b9cbLOJgGp9QjAzxiAiaxigvn"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.137.1122.0_1623766284459_0.9664592198600219"},"_hasShrinkwrap":false},"7.3.11-canary.147.1126.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.147.1126.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"e17609aadc4f749436f1665560478d7a33561fe5","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.147.1126.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-Trr4/THNpvjwoDoUkYUS2SubOa3gxKWIiK9L1Byp/Y0OUZS2O3OfQKy7yD8BAyfHK80IB8jdlNlaqJBD9fc4gA==","shasum":"e4802afb31ea46a2ee66f391a449aefb291299ce","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.147.1126.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyLUkCRA9TVsSAnZWagAACLwP/0Ly24m/ntO2AXwThIe8\nLO5aSLCEh5ihqcvhFd7whU8dT+HlVSiHnDdRfblQV5N+Ke4ThHOlTjnUWLrb\npzftVXxSz2Ge/qa2qeWy7ZG2Tk8Zuqs1vDxJuBsdfxKj90JhqOeTx2w1cV7C\nSma6D4x2PZ9tdQ/9QcgEAnXcWj6cxlU/axWH5G0lvlQcWJsc9QDeTpC6CxnC\nMpttsoxDstlUBBRjzyL4oXSP9Xz8l2a5NMIzLlWH8yPnF+DfCfz5UNmR1JVo\nXXNXUe/zWI7h3yGLn1abeO1wFwY/nOju9AKa0doBbQZAUdKRmJqzQ3N/8ZsJ\nHxiHhD8Fd6u0XLM7hxvcD3ef+nX4e0QMwM7qRLQvu/VWXOqD05aoBpie060N\nly5it96MzliTZn5QM8b7jKnH2mlh6lrxE997zRg/6HHye2qDbUCkPRWEKW8N\nmO/TxlBtm/mthxTy9uWRpNsrQGnNEkN0cywqulxP2+Fsiq0GyZ0p+by+ZEEm\n4s586Hz7vETmtCYXv9afUdxjDw6wD1eVq0/TgWPM/tYc405zs0vi+DTLFIX+\nN+sYqBQMmTBrpumH01KIF2UGySMm8uwmPnTSRR19KVd0rF/r/aFeAc2s8Ndu\n9AzgtcaBk4uNcwgKuqZZwVAx61p8yph5g15elMCvSWJjrI97MdrWiSDBLLQF\n/F0D\r\n=yNzb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEpmPh3KnPvHSnBmEGBKCqFgiVlXqBHLw4SEaISupYWuAiBfFwaaQ9doYQnOQf4ovKJygfm1hf6sksBnhcykpgYt+Q=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.147.1126.0_1623766308749_0.4238763653949491"},"_hasShrinkwrap":false},"7.3.11-canary.133.1143.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.133.1143.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"c314a6ca10bc4db89f68af3e2f1a591bb1a9039f","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.133.1143.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-fRJtJxtNCjnzZNAdDtt2aVdLiRCVEQaIGuCG1OHDkE30m7CWylIr2pkIfm0fMTEYI5IgH1JQlNWOiFn3JJkAtQ==","shasum":"14639e0574775143945d89113efa428cac4b359b","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.133.1143.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyLUuCRA9TVsSAnZWagAA/woP/1dHySATAlxLUBXyAFBw\njkwvgqWJYp86wRoY1XPA2G86CCT2IchJCHGn3/9ydz9UKSB4Q+0ltXpiHnO/\ndqI5wU+X7yq5UNUdvVzuXMJTkSJloV7fa96Mx42h7CVuQmbMoo7g4KvLKPuQ\n8rTPmydE/Kju6CwNVXILXTh02tm2KP1HZJmfHz8qfAxNsh2W2x1C5Fy/Dgdg\nV7/RxAD2louegPLMzUNEp97hFSeOIrsuDFzqQQqmJExniNN1UjBRkYyUT/7W\nMJxDTBFNBBiWLHuqVLL0ZS5N8HUSMb9loSUOLoBtw4VDF+jSa5KcZEG41wkp\nTO9sMzVHclf9/bqJDgght+eQTap9McCXvBckAFyMZkKRcnT6w/WkL6jerQor\nOv6IUEoTAP/feO3nCsaPneWz+WFv7hppy7nmnT3Fk79GfWR1IrIfxoX7YRwP\niHbddyEiZZ9MdCSRZxzFlYNMP/W1q1WSdg5A1HRh0IDTRlc5toOuTUwLWjKl\nIJ5CjfF/SCIpoyIXBtlg6+/VcJWS7HsbxlJTWdXjuGbe033mkSKjIZeb/zeA\nzsbP/CLqKhwMO4M8HMTNMwVRQjUcSiBcQhoFKXRTfNXi500dRoi9poPYKJz1\nkUkNEFGPraCb/PK+2QACG51MnRwitm2psCHVPHAR4GI2gwVfLWPqG1tKO0BE\nMjqc\r\n=3yUv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFRO6JeZ8vm+KD3DIV2kH6DpBcpYVu1vNqn8Y0/4H9xTAiEA7RgMIBm0qU/vyZ93wPCtCEAhLv462rEd9r9/mhaqSD8="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.133.1143.0_1623766318573_0.06549100388353013"},"_hasShrinkwrap":false},"7.3.11-canary.143.1152.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.143.1152.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"b7919a472b1a43844c88327cc004a9ac74688471","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.143.1152.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-nv5XjAQlaW+G9FmPoTYadb0QT53LAFHpMZj7NtTKo4/9hky5SQrsu00UPH3EGpicqghBYDo1Y4I/Ih1M68ZXIg==","shasum":"096e51463c2914bffa103a77c7ac52a265ba2c77","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.143.1152.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyLU9CRA9TVsSAnZWagAAKJoQAJ7wXSuMB8Di3WBflkI5\nx/TZWhGZslY80titWVfvTol7t8By+FwgWVB+RWac4rJ+7uFE0VkY4zFDrRCd\nksdQPfZX1dnkbJFDCri/Z2LZQT3ZkyST50de5lBoyNGXb3JWxKjqH4CK+2DT\n83t/Uqavd/PSN8LrA1raH0OT93ILDjuYXCi+amIpnBF6kwFu03gba4yll8X3\nOjAeJPopu6WBs1dTf8Z9qbUNM1F2kYWiQA34zrCYn4yPpRxecakRqJvsKTV9\njofPEBYDrfMw+PCbt0r6cFEaESjpf67hjzCjizEvhgWMfEJeMI70RmhY5anm\n3dheIICYCuQzey1td/X6uBhjc409cMkQN2Lm+v8kqOsrrPHM/sRhnHV0iZYO\n0Rqf+0H7TDLOicutOHCs3/C6eqJRovwze0yElQ7bIPnUdLAuBqpy8mAiPZ8d\nWJ3ypthJasMYjURk4z7KfOlDVSKNaF/UTI3AZRbtUgD0h1AmDEpfUZkI5ami\np58jG9BiVdRprXZInv2TFohiuUtC+QZ2qfxuOx/0BcRPrdLT1+8ULLuCjQMx\npJ5XluPg+T546DmuFzAoozMAl6P3FTANg4xHHqu0jODzKWFSfrrJPtB+ax5Z\nZKcJrqadylDUjptpysss7rwvJYdU47FuLQrb8RHFhpRArCK5qih5gIxIclnu\njwgD\r\n=2D1a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3Pq75Z5vxsPnXeXQsOf5TOvG1NISt9Xn93KOPXBozTwIhAOvHriA5zLgXqrcvIDuHb74Mdp3jcBs+rVBo9E8LgtdK"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.143.1152.0_1623766333495_0.2700671721390735"},"_hasShrinkwrap":false},"7.3.11-canary.127.1150.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.127.1150.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"c08b68f835aac45f7841d9a384a3169958e806a8","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.127.1150.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-KuFj5Kut5y3ZyuqAVf9xtcBGH83KrZia47UsRBnjEMf9IREiCnqbLi45Z+wUcCyvq9r6ciM+2E7P+i7miMI84g==","shasum":"8b04ad55133c8a756e6f6b884d5fb0a9c674462d","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.127.1150.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyLVHCRA9TVsSAnZWagAAmaMQAI5hivjBvk/vmd+kWe6P\nJxaFXvwwbK/3yOSm5yXJixFzVqTksaeHBfFUixZ4+AAPYwBsJRI8QzE8dYAf\n0Lpy4iPGgwBXl2Hd5KA1MQi3ZwBEJtg2myH9+R1xwJOfXbE7kIf3Zzd2KKsg\nPyFttVvBpynzyMIGHwRZnKIQMmq+885FiZFuF6uQQhrc7AGOUpEqiq0dlX8x\nvQFy0Ccs2gadCAfZKTv2xJFq0hZZ9xIXG3di/uQuCxqySamxR0AGlr2Ujc+5\ndCPYPkhpJ0J/nbXof1MIHLZaJ7fIMvHbvsDoUjwH4EGRhNQZ1h2HkixE4bpa\nlCFAGn8jf0v3QEHfp/Ec8fLLGT/uGEvdre5toQenvIC85h84c0LasJxloyMY\n/5iqDDqTOfN8bH10v148lNTK80Jcn6YaPiIhC7+w2/TPCyFZQ+zFbs7yNMih\ntGAqgiOo6HuxRb4BME/AMamB7jCrvv7hiBtg5nG9PBxJSIfOg+/BhOiO8ngc\nOE6XiM34a3urQW0J5lpZWop7D5W5H+M04ppdNojLs75suGhzogFppkvPSDg6\nsrM19wxtivoQzcNxVNElkmW0k29x34Tjf2vgNQ2C7NrW2ZS5Szta7FsbdS0l\ndRZCQpltEC6628o5vZ/PueHyoVJeLzenObqHleopsFdZr2fjno342aUGnOMI\nS/UE\r\n=FQ7G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHcGQFaxVzFAtypuGh/MK3zdWFLFbcVKPSr02ayQkPrpAiEAqDSfzPe5Di0SXWybK2hEIuiP6nvhZwiuL7JpuLT8Zrc="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.127.1150.0_1623766343543_0.637833363057783"},"_hasShrinkwrap":false},"7.3.11-canary.133.1156.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.133.1156.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"5573bb2aa3b39c5adf19910dd8fcadae9fdb47e7","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.133.1156.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-msSKcWSwPLDnBXM3atXNiH8KeeFYh9d8MmjHu4Iglf8v9JmOptjP/Qebpe81XYBID2IUQdyL9XmfU4z8C7cnGA==","shasum":"1ac42efe99f90ce516a890fc27edd171ad87e2bf","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.133.1156.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyLVPCRA9TVsSAnZWagAAcfgP/2X9LZHPBnyrV0DMWGUJ\nHtGeWlHl7u93lDech0cxKopNM0bNpmo+4EtSWgUuiFhIrazG6q5KjwtvApjS\nwzXy4gSgRSr2tAH6fxxG8cIxOf8tXeiYNNjKufYXWptv1+PJCD1qewN3mhAF\nf/EK9YLzoSuxAywTh1IAGCC1hYTXYUId9NTGRbQBzaiJoG7AqBGlJy9lbOqu\nyb/aQjVRQoLKaxqwOkPTG4iIMM7h/hdNLTEmYmhC7QefRsLRXNAtC4yWeXHz\nSaTAiOnDfrrhg2ApVfxyyfsMKs0Jiu1NIYMZp8Mh73ZhFh0kQn0GjzlNhsa0\njVR0tO0FBurU8bIm6PK3VT+g55y3Q0sXdpmJ39HRoZWAeeo8DT2WiIuofqTu\n1U5LLiIn8LdEpBczPzgIIiMbqD9mZtP9d0Dpctc7DTF5dVjTirTRWkD2Bjbs\nDPKWript/hrdEjBTMwOklaN16w5Si6mo0EGONtpHrzZvjpQvb7RUSoW2Qipo\noSI94cauQc4NMbzCKHbkWW6d0tMimnfC7MSDqrhAkg+pqEUCYt54K9cadfB0\ntNfAZq17mdQghY7D5NO60NNJgG52DcECfh3H0gMj08j3PCKo1sfSUpGppbQ1\n6FqprQVqVzkhx6GVjD3BmAVDUN9R/83FR0itAxJ/N5NNCXfFv5KdcJqK4S17\nZkTU\r\n=VVZT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkHwmfccpKw6k3wGQn0Fk4wCUhgAhQ38QWCwy/6W23IAIgP/0OQt1lSoo1mszX9LS/QXYEXq4+1eGmmrB39hgPPFo="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.133.1156.0_1623766351181_0.09525948482056013"},"_hasShrinkwrap":false},"7.3.11-canary.111.1161.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.111.1161.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"4c6c1eb493c192db8cce746ed1f41d4bcda9af61","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.111.1161.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-xR1HJXmHe262DbCjBVwS4JU/eP9pjnnXyRnW0fXFf9B5ozGeDvnA6snNGuTlawK1duDY5koWcsGINDp5z6GdGQ==","shasum":"cbf2efb12ced23500683b0510f157f2d00335d6f","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.111.1161.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyLVTCRA9TVsSAnZWagAAPHUP/Art6MVZQQhTXsC5OSv3\nozPyBL+QsGI3FtrqHe7M2k/7HhyUfCeNkD0RbvguvS8f+OsZ50y+N5LOKUGB\nY0+rK0nfgHJLVD38z2RmjOLDy2dUe1jPkUIqeGEJjfG3uag2rx+i/4pFM+9t\nJ4OpCudRtgSMBjdg7MFNkrLuiFqDYuad7V3cNebAJob+HnkvNduHyCYxehUm\nIKmZPgkjwVSC3WNsdL3/Jl/jallO4c0rFP6fb48lw62lFhFkceLIT1LGxdhx\njgBoU4DSWvOWwwHKYsOZFH7jpe4geYWptprI0KxacVv2jJOjAmEl0zB5hEzX\n9gVNfjGvxVkhj4M4iB2Sh43T9duSPdMfK3lx7AUVIsj2dywkmBhaT8XVSsSV\nYr3oLTysGtv+jeFR177TRU3K3D1j9K9hMjBpVFBOm8Et1OG3D+F+zWcZzRsq\niUlLpBFs7Tx7TJJh+UIaVeuT0KShIesJAoN8uxds+BHSuWszJi+N/IVtSNut\nqJQF8ZE7EOEU76EhBtDT3SnJa0k+snvYBEkwmrRabiDYPvIYhg5dYy3uDsbB\n01ev9ocvzCgCT+xqh9y1RIxGBqNjUjxhEG4cKkxYljPapKT6AkkRrclyJ3AO\nOKyNsoAXeyKfa2l5QoW26W2bQyd3/h10zaIal4DZ4mvPfaGDVy7NyelqPNt2\nY5mV\r\n=sOCV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhs6XsR2lN/lhFXwhHx+R1NLBR22ZuGEVjfqK7RCW+CQIgJh8OfaQQ1NnODtDJPB8v8zLoliwiDxVo9jQpIlLcNKE="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.111.1161.0_1623766355184_0.7388500768074726"},"_hasShrinkwrap":false},"7.3.11-canary.127.1163.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.127.1163.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"ced90e8a1b7d580020289fa172357d5e2f92fbbb","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.127.1163.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-ZYHJ8WwBYgvvtZW5bZ/3bSSReUwvc48OIIkz0DCn1YeRgpC/uqxupyOasRUwLeAX3nFlRI6zvhal6ujwSlI7tw==","shasum":"24b8f7752d2e00ba15c4d6ea3883cf9fbcb5ba31","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.127.1163.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyLVaCRA9TVsSAnZWagAAcZgQAJ+OAtUWVAKRHhKB1D0Y\nEzFD64p9HJ7SbWZbSC3VU9q7NYFyiUlltD3c1XMBKU8xE2pd/axMDezEpkHm\ndgBqf4Pe3wyjJcimgyEYKTW6fkPOOGmrxSTcmxrE9IHn3mn1bFfhwfNKpPOY\nj4myKrlK8vbXb/m0zmUq79hss5Q37+oYJgtZxm2tIVAklUf63s6V8/M1cfrS\nJxdROsaHf36g09thetUK5L4/gJUx0bpye8S0j6wYWSRDVbIJ/6DOGzCEJ+GZ\nx+zoohZwD1LXY5SVZrptsiIOocp0hqOaThM+jbHamrl4RLFhQ7T+BtT32GKF\nYifchGe4FyThhlokvWZ+W6orDRVQagXpO/A8JUUFp5rfe5LNQ1w3ELzlw5+2\nMDCSKGe3Cv8KF7npIFQYFg8HxWv4E2tw8XMUNnwRMY62IUyEElMw9omu4SgA\nV4thITmP0ZwBnhkYYrDCC68nBZQvZAyN9e53PHiyluC03U3M/AjeL2Ab9bcL\n9MjiIB8YEK6IjGhl3oCZh6G2N4e1/7RrdyolkLtJB5EW2e+6DFpTxr1rREfu\nKNhcKP9OCHhGefgJdyxtpigqba5WigSz4V5UJCBa4zZzB+KMjMa3TX3ZaES5\nLDBe3Tr8ABQzKSrgBNZ8K8AjKNbtOlYpuaJdIYkyVq5ZTxzPny+K3WCc0fiy\nkvp1\r\n=JCkh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCX4Lvl7LF+5HGNAB11EU6UJBqN0lk20PcxBG3PV0XSwwIhAPVgkQASstsTlbhdgi88IiTOEsydsFQg7/jQgjx422AO"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.127.1163.0_1623766362280_0.0029524951137049893"},"_hasShrinkwrap":false},"7.3.11-canary.136.1160.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.136.1160.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"695e4e56cb17667ca832070fdc769013cd198762","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.136.1160.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-g61JedLsG1bLuas3ot8VNDkziWF0/AWV7h+jaoKVmJv7Nd0oBZ7kxijG0f3S696X4xHsCaXz0won98iEhYH/0A==","shasum":"0ea7f9454b5869f778212458d05cefd096e96658","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.136.1160.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyLVjCRA9TVsSAnZWagAA2usP/3miyBKiIAtpbF6zvWZi\nG8z2YevRTzgzAIusgAiFS2ORBnb44IdBpvkFKvTchLbbnrJshROLVA/U1uUf\noDgL/FNKN291Ua/8kw1C9vRvrYVpxS/DZkMaxdr6WStP3vNw+H4jbO+oAZa6\nu67nO5fMLXgU1/u7oxawKIhJAhJNHi3bZFeIjJc7fgukO3bfSaVefS74Bspx\ns0PuN9KY44Z/lSKDWXy4mJyrDfBzf0qbvsswiZdWr97TexNr7j0OTcPMZCZj\nwN9AsFO9ZYKpKkiIxQGLewyrskxKJhzvktN3mes7I1Mfhw7hSGX0Y2/rLh7h\nSDJPc8syTVPaMq7yJiUtraVjpi4JEezu460skzriBbAn6cMgKYNMiXpEn8AC\n2RPBFKMCh0c8ZhzWXp1gMynuatvKErvbZBHc3w3LtflnLl9vPv0f45fdKYSl\nmyao0XmAMdJ4Yg850iy8tRDxHiWxxZ59vAQkyLo5ROMXAscWJLGMrbrM+W8c\n68TE1RgAUEcAc+Z98aCUQ0A/Fw8QiiDBYwJX1SpF6XDoHVp4ScrET+VFV0CD\nVcRRgiLiZ3hAC6p76b9xLz3lASiUV/yKiFbszYV7V5whWDd0cu8tQvA9ZKrg\nP4Pn1kyMFybmxhLTlbzY2/2IA0ekwI8JH7fn3Wc7J8ASe7Al+jlhMkPVVUWF\n+vbH\r\n=GMVS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID9TnLhtlJ7fYC1RoTo8jNkN9RaOsjS62XteFVN3Y9vvAiEAu5YtpFhEE+XDtjHFRaXYMrpOFeYdjSdc5+ng1pdxOP4="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.136.1160.0_1623766371259_0.012583541884842564"},"_hasShrinkwrap":false},"7.3.11-canary.147.1164.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.147.1164.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"f1c2a5f94b70278dcc8c2d4f18d3c0a32a12136d","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.147.1164.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-pXsiQ/QqfgFLHm+axBAm/SvkmwjhzIt6+rc0LhxHaXidO37jM4wQ+o6CFRNTeB4laFrdZwulVx2xD1rv2GTL8g==","shasum":"519d95228b3c8b30b86c2a654c9065344567b6ff","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.147.1164.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyLVtCRA9TVsSAnZWagAAJoMQAI4t6jLEpLcrfbRikoXO\nPHeN1Cd+CkX/zljYpBli4CrhlPvQ1zVL7HhQsd0vreH3eBs79YtEGvYc3U8n\nd73wJIV1oI1slp2UH25p+/kM6udh61Za8Ra5zOD/UrqQ/fp5qTMUo+OP9crT\n+U3cjtNTCJXYMrhSecN1ngIIQlU/rjdgV5h3fWdCGl3zsyJLGGZbf6KfVXZ/\nG2VcYX2CTlxCzkSok1c+J4gI/CsS8M2E4nCan0Mx6ngrai0lLv1E+T/I2JJJ\nx0CqaAQKEqzALWm561JkmsIkf+0SnC7RH73n15gfwz3g8U/Naso9zWMXq0RI\nNs7SGrwVyNdUz70hpQaUXEF9/RkTRnZWYwrbEZV9fcVCOWCt4L5kPmSGDRlX\nyCoLmeTtf1ArPUj5VD7kEjEb7EjHlTyKahDifSc4r7G1A+bDg9m9+Z1oFOHr\nZkH/Cw7ypkxMfWGBLIsmqdwvfX74cm746QKdUnjUvVCJzEQxoAW6tX1Xhd4d\nIKhvcNq2tk8HeB6hbFmajin4aZrRZWsTqAZlTdItlOmBD8ocJBTBpWDrr9gJ\nLpmML43DIPkO5OR95+orQMkg9Gxfi2GweprYm2UOFQ1i/ncX6js2yLVFQUwc\n0s/cWexccrghPbL7C8AIC+v3/5sYYUL/lT4PM3kLS5pXErElxrAKWiPKnu2+\n9rHL\r\n=JuVb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9e2eZKhzTZJ0QVh00ZsRFuvh9rMByDKUwSK9XdXhVdgIhAPMPHNiFU2MVYlhLDjXLCvwpXlgHMVjchCpdQMlLo1Lx"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.147.1164.0_1623766381756_0.5858572721257973"},"_hasShrinkwrap":false},"7.3.11-canary.143.1165.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.143.1165.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"c5f5d1a29875ec88a56fa5c81bb0caef35a44ed6","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.143.1165.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-4KVgzop6lL6UcLoBoMzpdx4yB6xjzEwO4Sa5jYPxrhDC96X4/EI6vqPdnyaQFoat9rNuknrjkkfEyPvt50oF+g==","shasum":"464f9f0f00aca60842878f1dde812508382496bf","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.143.1165.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyLXKCRA9TVsSAnZWagAAj1oP/iD7oTSOcJxweSufgK9r\nfS+lTEJDsl9OWY4RwElJ7K0rjDSm9c9rqWO9QdxY44eP4wRl4YRXcnL4w3T2\nEsfeaj/lbGLpX2bc/9SAAzo9zKh44dqC74GloJ1/r5keeaUqVtc1XO347reS\n8ppcQyR2hK3zCi3IXHuc5sBPrWus8eQQXZR8HQ7lEsnCj2FoqtjjK0lFs5bV\n3OCwckG5NcNFIWQ5z3XxHDHiqNlgxv0OdQSDHLM1lm7xOGWwoALgnY5Zh/Pb\nwVv+JNZqMNRLCgvN91Hf5lm1aXR49ghrRcKyk9teQzuFbbeCIaqDigCfL60U\nduHNGtwz5ArlLAaLqUOE6tKJVDm3BI9NXS2GFiwYNeRG23UJfSh8XbxdmICL\nOc8jSUIr7BJQ7NPydao3glH1shNYDV5NYI/x+lDyNg2ilpwmimhpgQZgKcZq\nv9P6qYwKYth6gU9O9weM8aDwHyo8GikwofzFBANsZju7kf9d9PQYCWnY6BgX\n7P5hgKlJqPFw0zvMkLyNAihDPi40sH+hv6nZougd5Prco6FOPRzpLftaB2Cq\nB6WVwZWKrC9aUQ1HC50c1g5WNvEU3CW1jk8nc8uDEM4ABOg10peyqz/gEQq0\nOi3R2kSH5KVlo9d52m7l+zCv23FavMwKR47VSBrlHinQ1bMifyvItKfgHvGU\noD7m\r\n=IxSH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGxMP7Kyr5LI6hYVymeHqF691I5iZFd72y9dn+ORgE76AiAhZWx2OMQ1c9wxW2ipfJDFPhVR4WEYmpnomUlf1RV6iA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.143.1165.0_1623766474675_0.5906570397751516"},"_hasShrinkwrap":false},"7.3.11-canary.155.1170.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.155.1170.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"50809bba4dcdfec16211a9fdeedea68930362a80","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.155.1170.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-yt96OUw2wTxEfa1sE34udJCs4oJYdL3hTxAzImInzYsdYPFUiIGG6V30vN+1DnfxyO4aOjMPqTj53inTdIKoHA==","shasum":"305bd9995adfc080b0f3ead6602cdd0c89e1177d","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.155.1170.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyQilCRA9TVsSAnZWagAAJIIP/ig3rQGihC31GGpEJcB5\nLpDl6/bILDT4xLlyvTAZX1BXwZFEZ39pJusJwk6gAhjZDgXKBlHzj18XA1VM\n9ByrK/Wy27dSrL+JBK8S0QdjhOlOOR1e5yAXEKCn5CvUJsF8YD3rvh1XAZvW\n7obatLV5gdt/lFa54symSuoxi1lrVp01At/l6IlbwsXPJMqbtXRnsTTIuEKL\n+EJVtWVr82vxbzIexh6yo26BI9LDXvXAM52HQ7TMxjNI4Rr1aqYbV54OWRm+\nHbvM2noffZbEZQkTN2wZMyqxmYLXEUSzpQqe/sUvlJiT3InqPJbD4zAnnxHp\nHJ3oxAg9VuqowQd/8wpMGsl0tK+ORDVrMOwMOi02KtHdPAV1abYhgHXO2Kpi\nPUerpjbSUNZEuBLf7TSVq116uaB7NyXaCbWocDRSiJ+DRVeHBtcKcH3Sa0QU\n9RN5APAs+Ws6nQIIQSHDQOPzYKUzooBBN6yWcpi4pnOCaNthrmPnQIH7RQwB\nIQCke2WlA5HS7/k18JAWwo0shqBeJxMN/wthBchZ5VQ+Tq60pEYyWX+ES7+5\nKvsIiGR2bsmaDjz4uo2UwEvh7j+PaYex3tsGiTELV1J+PPE0ONHWhe2qGu+2\nkSZi8K6mvMMkeVTu4uX+IXDki1nHOozS+A0bqLDEIl5nBzhSIHHzwZ2+i7ZU\nRruf\r\n=Y0lA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIArE3yXJ7Hgz2X2hy9lFW9u/JsURwncKH3YiL1TptB9QAiBm56k47lWZae9wFvgCHaAF7t8ezcecdC0E6J5CVHUYGA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.155.1170.0_1623787685010_0.8681492136325617"},"_hasShrinkwrap":false},"7.3.11-canary.125.1214.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.125.1214.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"e062c866b09b16ad7a85ede633a35a03e8da78b0","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.125.1214.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-+Vt8B8Erb20Qr88vCS5NaofZF1cmxoNYi5YhtDEKesEXyWKamr/v6CfA/TZFbMLORPQ6tZV2nFi/F4+oyJgHMw==","shasum":"9ac6db535464b0a2e347194d673a15621f7a5b9b","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.125.1214.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0jGkCRA9TVsSAnZWagAAqpIP+gJd36v7MK0n573JHpZu\np82tUC4VoUU9BWAX2BdJSfu/cooBgFOwYnC6X2ARsuJwT4ObczMox+j2IWx+\nK7sCAqZjhGxLPD04z0mCgVd4+K/XQBJptFliryFNcY7fFOBpt8dj+JcXBX5o\nANW1SrQI1P8Rli4eVrj+PZKU2yF7YNZ9GJqKTC/qwCVYSKApqFGsEZRGOqqU\nC9dpjts/KHE9L+F6CmzyBVCANrIh7MkOv1igk95XzfsP1dK23wdnmyqrsJMv\n8F3YIUCRZ2fas7Kg2eMICyDEYCoFYK5pvoGZmVKJoUHc545n2tPVTkY7l44x\nOb9nzip+lmvEXLQUHkNBVBYhwd/UIILc7bzc/Ad9XzO6/MS2ETWDyavyWtdU\npK+Tuq3dbF32draSyS8jVHbTMgJE9HLkQ1OzmvKZK00YshkxIAWKZtg44hgl\nt4mSudf5mXl90kl1LZmgFzY3wQRZlNn2o2mbxTC2ttJDZu11GjUfZxDOlK4j\nk/BzQr86U001IIzUuOujkl+9LDVpCuGN9aGygvSyca2Y/6uAKnOQEvJf3nBT\n6Ri5EAy2Zgw2mlejYjla0k1ZCecIO+syVI5BNQ+xErZ+py3EqYVUyiB5HKpx\n7uZ6VGxqyQ8Tc0740xctkDERMo+XqXbmZfJPCDEl373I720UUwe0hXdqHx+j\nztYX\r\n=FWmD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSJNqz7l76nsTFusxtmQQDOxE4Oa34ojTjw8MVYEOqggIgJkVTrEPFwtNqYaWgm1BiiaDMGlHbIqBvj3bF5ckuhfY="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.125.1214.0_1624388003766_0.027230154768088433"},"_hasShrinkwrap":false},"7.3.11-canary.137.1232.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.137.1232.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"23a48b268c8ccbf20a7f368ebc927d5a2ea95392","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.137.1232.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-2mA62Dbipba/y2n+k1JK1ly/zyDA5/EGnMnlhYOsc90aDvia78Ya6Rkk4TbMfV9aQxyZbIcp+NrKVhwA83hqsA==","shasum":"e98da99fb6abbd04446341e14277f67b4502a5ae","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.137.1232.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0jG8CRA9TVsSAnZWagAAkCUP/ja1BF3kUphgUoe8ebju\nC2t4AitLNaNWtYHmsrw90bOVOE80v4zH0+6aMYGglO36T5Z6JgKN4iF+NaL0\nmuI9cDKfXw1xQICIez65acBvJZ5qs1Y8mt0VzUUhVyrvk+LSF6d5n3rY/ZhQ\nM7Eo3GKm+WI0j/ePmQlcRTboqaBSj/ElxCTX3D6BYcGgpIFFsPbvPSs6/N7T\ndr+9RxDhiB8TFA3YEQ99ybO639OC6Px2g5IucR/ba2ZpCxlz7QIoVySQmk9s\n7BAr2kcdlZsO1cFZsjftiAHQ4BDAiiBnQuzRMN2RaGfntsV2G8y1kyL3PVxi\ngK4l5tXws5dJuPU16uc6rNRTq/ThIIDxTel2TWbYQgGfEw3IJNn1I3CjhL+H\nx26O5OAWsJYN7En/Sgif0Fp16XRDhDBf6/vZDt4KfaBumF96o8j7UyA0E23P\nZz5VFzxV6dP1rTp619pjt1TVIcwTrk+9tQFz3RubYdNwkkcERfLvoaTNAFJM\nZK+0VBRKvNBKHL3TM9MpkfMMe/1Qg6ygQMUdTCkIBzmO/5WWkDYSj1GAiWbY\nEqZhOAYL/ozhEmk3tXiUY1LB2pPSnjCGXv2se0LtLX5v8NHFvlPu0vY4ga6t\nsQ7l7NNRlV4NnAQQLcgnkj22tk1hLPXN/X3/Hdu+mjgAEqMX21dubwHXL7w3\nE9IM\r\n=tv5I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDqIIeO9z9d88IbMqCeUQtW++yhhS+KShUdhbk57glQ4AiEA1pkxATsStK3wAHGErP95sixWhs31U/WYK5B8bcBy+P4="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.137.1232.0_1624388027833_0.27550362624747216"},"_hasShrinkwrap":false},"7.3.11-canary.137.1233.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.137.1233.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"6c918328ab805b6316a1e31d1cc32e6415e8dc7b","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.137.1233.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-Ftng2uIwQbcKaJ013KArhNMnxuUx+5i8gRYjAzsiA5tyvZxPGIUtthYy0SKl65k25D6vDtOvpCUfqJwVLFeBEA==","shasum":"6edd7b7ef87f4788a51fe588818bfc51fe65a40d","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.137.1233.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0jHGCRA9TVsSAnZWagAAd0sP/14aU7pr/ND7QjeJ1GFw\nKhMqoaeKrYyx3H4WKENPcIu4AHmjP8o2hy73CGiIX+QqaWO+fWnqSJyA5SQI\nOrpvVFe/+8hGZqBX0c1d4G3JB4h1yLdUqtwk+cDTxCqkAurVOVVOu7mbTZRq\nEKgImvss0/I/8HGcVH37c0HSV5V9URs9PcS+m5FjvxzH8PtCO1znVth7MwJd\nSqfEhqVWrd1JFF3DWJhw8mIk4bUd6NiXv0E4IsBYXjLpa3CBRrtF5oh/BtM7\nykspfGF9MJcFl9/uMAnZjnbxg6++UGjIkthv4U5Z1cfwV/iMynki5BywO+Wh\nr92EgpVFEBpA/4FOJ7x7AysDJY5KwLuwPu3Y7FHxExaFxBUR4dde0r8BYaNb\nLQJHp10cfUdzIC3VISw9DV7mFg5wXX43p0TAbK3w4dClWrRJF6XIoI6wKzHY\nz43ZHDfYNRVZ/v2krMIF/PQgCmfYlj9ivhyR6zBV0V5ApQ0oLfkN1g3P4Orn\nxf2E2DOZl7QTSy86xx2ka9Fi4xAzTFttLfqiJm+lROlwdJ4LfMUvG19TS1P8\njirtYsajErK/Jw4pDEQsZ9G2nmLaskwEiK1i/nzU8KAS/+MPDilh7zUVzdcG\njxE0Jrxj4V1x4SmA2XcpctwPos7aAGLRPabOGkBu4H1FnKsH28Nuh1l/SJ0s\nHE/6\r\n=r7ms\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC2qWtbedzYD8A3UzCDI92B0MGtPKqcSTWRdQuD7iQ8JAiEAgRYHSGq4yg3sw6E0eR+oYp8O54jHvTMd37SHmagi5HI="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.137.1233.0_1624388037829_0.21402583956530852"},"_hasShrinkwrap":false},"7.3.11-canary.125.1235.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.125.1235.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"d22b700c8487be937dbe8d60973d344f19b12d6f","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.125.1235.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-flZ7TU9kdyt+/1Lgqbo4T2xX6gUmTK15OBYIAYosfOYS2VBnI5gaADc/cRjf0pinEIQRuCsvv9SzjOqR0uEsKQ==","shasum":"ee44dc4fabc50ec36d26b0f1defd9de7e6f12255","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.125.1235.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0jHXCRA9TVsSAnZWagAAJDEP/il0JxjI9bZCCnvP3Rhp\nK+BSAzbTFC5RNfnwRJSEgdxR8vyjyERxKdufF1rz1Q2zlU+ZDOHGz4NRFgs4\n0WrwUyVFOiTaVEHt7HVyUW4eW8yiHIQQ7n7EGl9/77nuWP9UtHSZMQ9Qq5nj\n7OMSVJZxNlbmvyU0S7l0BpS0FSMtEjqPZTNtHoJX/kfz7eCTaaSqr4OkJlad\nHgXrk/40purqWdz+BBrubpw+59D72KheQNOL7nzvAaymj0w8EsrIVXfGL/Px\nwis9nXbTSDq5XZT+CbX4MGGCu+7EojG5PxOXU7kHCpPSA/7ONWIJrYEVGEIw\njwxE4C6NuNlFvQmrMSaVZPQBwkjjZZpvUM0/iG+5Ma5kjc202N2HUqY/28DX\nIW/IrjVCVTYFVJKX37yjZvbo9vWN1gf1zzRfNtmnG2m0SEZpLrkUh0vVZgMI\nM3LXkiBYqUuVqt/qJgVR+PDhAzu/eXbEjfvqkl/OFYcBScsCxXjw9DytWeyu\n35PPk4JKe4Xk98bNW3vlpqBMJo1sxYcmbWAvYonDTMWvN4jgVQ836o9u16Xs\n7pryXZ4PtIW6/oylSY7M/LM21+Ms9rf5Em1IjBHk5SgaXEs4WInayNrL17TZ\nIXdT1srWsWy+GotW0TxswdGw+DHRwEZXN1sxbGk8S+M0J5vIGnp1LuBsZrbu\nsiWP\r\n=Fgrk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGd0utu8bYAoAaMqFk/YgjGU8NvTYD+hsw06+KN46acwIgK3xmg8eWSqb2enkT4gmVS0mhaAqyhrAgTlWuTe9X5dw="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.125.1235.0_1624388055268_0.04995271875237872"},"_hasShrinkwrap":false},"7.3.11-canary.125.1236.0":{"name":"storybook-addon-jsx","version":"7.3.11-canary.125.1236.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"8c763ab93adc60280d6a0e20652613afe78327cd","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11-canary.125.1236.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-6DjHnCaWB6J65Dh99vO3wvDI3/rnetqqc03s51iI3Ip5htRcx85E1OZVi+8B+mB0ya2UBhHf4yb7QQoTij/uIA==","shasum":"d8260113c24a1b24de205bbb1ba9577acdda8d4c","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11-canary.125.1236.0.tgz","fileCount":28,"unpackedSize":172660,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0jHnCRA9TVsSAnZWagAAv1gP/ij/6wICDk0TLwowP6/r\nd1nhB/bQIgdWwin1FbMhPGKM9P2biO6zivuis1hOtEQ7UQ5oFP7kmbQOHJjA\nJnZ4kWBuaSJxefMZM+NQWv8IKmrjLhh8K22ytgr4LgiSNxl0xCtuSjV/b2ml\nuBntggHij2u2GtUR25zmDi8vsX6NJ80ZUzNOw+FdJypsZ/ozLABAoqig9cMG\nWueIA5/bvvQu9e8st+YXPK+csSy5T8j2qNTKNm/rn1Wjgyj9NbhC6Z0Zv42J\n2HEkwjzYUAX76X0Zpqr8F9An3Y1X/JveKmXYtjsXpEtZfN6Wdw6uKwIHUk26\na5NwUVqleV/TrzPu0rNyvMTrvxKySDgLAP8Qa0kHp3w0ye+JnGG5QWzzkLe5\n5Yc3XoG5QsfLH9N/+o4uLEsOdobfmxa7gR5Lwt/TZgIQC36Xtq0RLDGKtb9J\nK3yhP80Gcqwvll1062r9Ik6cKq3a1uR+2mliQ4uHu15VWJ//RtqZgQ2dkUxc\n9qtPbX+Gma601kqpcxvzkA0VRS92pJH+TlD4xcg8fuVG7x9KeCp/gIgz7yMr\nWEb5Fs+Beuy0xwNTWU0i8/Ou3Q8GHd/TB3UIwwjHb2Y1HZGuJipB/9PtsE69\nFiBrqvFCahu8qe615WNzmM2esZNPqjULsupwyPK/VPSktKpe99l84oxEbgSY\nBcjm\r\n=pIqh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDnnFUU8KyTux9m5bj0ae93FlSquw6A/vv9tBOI1oyLrAiAgK7Dk8wPbVI38M6oUGsKozOYTf+f8In3l5oW+JErMlA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11-canary.125.1236.0_1624388070575_0.5906106611707846"},"_hasShrinkwrap":false},"7.3.11":{"name":"storybook-addon-jsx","version":"7.3.11","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"gitHead":"b5e3c73cdb157b0c5224cb36907ec5c6bbda91c5","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.11","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-hD/vCpy3nBtXh3EEbuCRUKD1B6k6gb6RxKi119qEqPgndAe9jkb6HAw3ulQekQLYBNXocnPmrSkSpnG8PAHJpA==","shasum":"28c37954fed2be3478821055b54f6a4e66fffc34","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.11.tgz","fileCount":28,"unpackedSize":174467,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0jIBCRA9TVsSAnZWagAAwXcQAJV/O4elFO31edfQ6a4W\nR+rNPyM4l+Z0FEJYFiKOT7bJByKFqsLw5Q80oOnj8lIgTm6vuVXM2UQFCNUa\n8x9D3lXiNpy6YmLcA4OwmNmajyrRU2KgkjH3etWQeSlBq8zWC73+eYmbskqX\npHoEmfUzOIKJTkIEzNgSv7oWl0c+Ndc42eQiQnu2/s6m1Tu/mazulJ+9zY+2\n8Mb2zWI4nOR2UVB6jAy+XAx9gEbOj5toERmF7u0cGyxXLxIGDk3AURqKBtp/\no/n1HLnpGziurl6YMUeGxiybLB79UT3GR8jkbLerZKh/6J3PKEWBwKIQmGHr\nHqzLMMc1qQfsf9GK29D25h1sdfnd2khPoM+IsJEQT0WVrcWUXKEeuWEbuGkv\n4f+t2BxnQgWHAoAwZQCIG75KnaSciahfQvjyZ+lxjA+hIhMrdwqobt7VpBsE\nW9B5V+/rtdGDQeHVGe/45HNEBka4GM/Yohcb7RR7zRmxQ81PvzhQOMS0NWtF\nY+vnchubSlCrn8Al3RY0m4WYJTIoOKbHsV7BgHFHeCoJXBj9I48QDWstFX9z\nccGtevHbrT/Ier7I8b/MJ5S32BI7ekexJcExcNpu+FaWacA21jz0jDAYNXBE\nRrw+U6FyKExvJNOTm9bJnwP49Bw5IO2j48XyiobfEzSVAZsyw3FoHkdFbaQ2\n0cD8\r\n=b9CW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPqMmJEA6Dpi7KlPv3GX3BZRwDnGJDoZ0kn2oe8ZXi7gIgN6TtVVrUnu80pQbFfSc7PkYQ63/A/2zVpOxSMMiIYQo="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.11_1624388096658_0.14422014219285062"},"_hasShrinkwrap":false},"7.3.12-canary.156.1241.0":{"name":"storybook-addon-jsx","version":"7.3.12-canary.156.1241.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"194aba9f805ef4017f84de6f6e5e430c84687025","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.12-canary.156.1241.0","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-c/F7XPPefdKFHoQLxrYaasXM4x0ZrFZe5i4aMdNt/eJebrsrjjdEI3V/p/SdMoNvTW9GGrZcCUjyy4rBgJ6Ijg==","shasum":"a22a72355db609aadbeb1c2dc8a5ef1915f279ff","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.12-canary.156.1241.0.tgz","fileCount":29,"unpackedSize":174657,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0jIsCRA9TVsSAnZWagAAiVQP+QGpRKXnA8lX/eKhigUf\npj2Se8KbBL1RWg5Bkjeu5Z/E3iApy93AxOUFVeILb6XoGmbyvvovyrOSBZ7D\neBNcd3TglH6w/9hiMZ15Myz8EM4rjPwqdmsyDpzf487L8Jh7dLUgHhdrzff5\nmVpmrkW0jz4JwWt3LsJpLMTyc7iTEJw5+sR4foE1knWx0yLkGHQCeXFEhvXd\neQPJ8ZU/8Kcz0jUoQ8jHcMiFO+NZ+rSz0TtDWDLJeK6nwtTvl6iqwyolhyup\nAzSjMRSu5tTcJX32Ze0cj5XkTNRQ0w/l3dlmh0fm2o6ka2zUQQS0zz9Vr7hs\nDj4CJFOovwHqL3VqxJVh2OPx6ZLP45gete8FZVPeVSusV81I6OhlGvfSfF1r\nKoWitPQSLp3v6MyfG3JY3KfnzDNr98Dfyeeysg+mZonCFjl2PtDpCzp1Uyun\nDhXz8bVqguO8NV7VOLJ3j4H5dOHAjkkC4S4TjxB6TSgCwSGIZXr3i5duhGwP\nBd8ySUkKBhAQiIGtBl9j9Kw+eiw+AT32LG+GutYbQTdX8Jz+xCGL6toPQtHH\nZMMQAH2saSCtX6uT3YOwFNXTNQlkTD3EL4C4Bxk5AyfZSEeLSaLXiirwa81n\ns4GH7ntr8NOlc8+zJMCD2++IZifM1vE5NTUjOHosTfKsdlnxZKUHJ5vv1Uma\nawjG\r\n=5ZkL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3Na8mfY+b9oY45m+dJhdSHi3/Cg3fvX9/yrZe0IDBngIhAPhoPnxUa8tbpvn53vOCaBOPN6/fY7yoRhnOA7CL06kb"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.12-canary.156.1241.0_1624388140236_0.23187733569796887"},"_hasShrinkwrap":false},"7.3.12":{"name":"storybook-addon-jsx","version":"7.3.12","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"gitHead":"7ae3a60ba924c061c33bb75a23d5476066ed5bd7","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.12","_nodeVersion":"16.3.0","_npmVersion":"7.15.1","dist":{"integrity":"sha512-J3bwvJ1Sf4aPuO+v2QIjB0KoSkIDNWXB3gdXskGzYlVsjlNnHcSyavr5YCoA1XGmtng1zB3BuYIxHanaxPd4PA==","shasum":"70db14619c8c89eb03ffe9af6a2ccc92db8e5685","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.12.tgz","fileCount":29,"unpackedSize":177797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0jPwCRA9TVsSAnZWagAAbMwQAI1kW7ToLtT0vZqquNq6\n0kvUCGVx5Aq6vk6vh6/so125IJaisMzcj+t/iVIOAj0i+0zbtGKT74xV0R7Z\nhaQ8Vbj0z1uiCQnRO3N6bYUSEMJJc55zMzE6bB4stsh9miOPRXFZFIvZx+9D\n/KOobpHB7kKEi9E7dbFXGjuPRkaHWiZWudRlFmwQ68wIT3vz83GnzuDIgwzw\n2yaAJtH7U/twdCcTW+hZE3Y9eXGzb005Uqmc4xkaxDFXjtU/L+89OtB4vDF0\nvIUuu9LmUYtaGIkSGIHE3WHvRdN/Ssgn58Yyw/Euc8J1FwxlaXex/zngZadU\nBbBN6gJ3t9YHDjjHyI8PX0wsjafL33R4AMEbL3lZxLkQ+x5PRW7nMRUqh4j3\nHztBUooXAFIX3iCAfBjT5Wsv0mby4fBxEhpo+8p4bimJxWz3faYvOTdwHQYX\nDo6pDb5sipFTWgGMTKiveeHDdIOnWFJsHdriONiLwzLUN557Cr9lJh6UL6+B\nh6zVRkFM749HaqpcnvRBCEYe6qerXLA3CNzO7C4MQiJCeBTxztwGaR1a/t/R\nL0uPzIuzMrkd5aL9Yg6AE13h0D+L9KVuF7WLxGfDZYzsCgQq3nnWEG2fvJqu\nGvrvEc/Z1LA0KDKM4cEgvmSMZ6mny5uxH5FGLqNvpwyABYTCum/FqcMYTKz5\n62Pf\r\n=w3pv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEnChVTXmhUqiZ82GjvUdYIb1s0Cr4iOrwFfJi8dgtU9AiBrjiM1Yn1keBckufSbnGiGPvT8PLN4blfzeq6BjOw6tA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.12_1624388591779_0.3839107481306121"},"_hasShrinkwrap":false},"7.3.13-canary.157.1263.0":{"name":"storybook-addon-jsx","version":"7.3.13-canary.157.1263.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://jimmyandrade.com\"><img src=\"https://avatars.githubusercontent.com/u/2307245?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Jimmy Andrade</b></sub></a><br /><a href=\"#infra-jimmyandrade\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"6b1395494435139eedf12cfe4d6d22ceab1b3d44","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.13-canary.157.1263.0","_nodeVersion":"16.6.0","_npmVersion":"7.19.1","dist":{"integrity":"sha512-W12rujrOsmeJhE1sVOpSYTEST6h05nXd4jIHVDi5fgZSnCVyI9BATTd+BiwqpPLdbLTWijwDMB4IMJd9JzZfhA==","shasum":"7d1822e22e2c3927c7c8da86bd20b88d5419ef4f","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.13-canary.157.1263.0.tgz","fileCount":29,"unpackedSize":177815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCblCCRA9TVsSAnZWagAARAMP/RkY3h3D/Qnyqu2Q9xek\nj46KnQIPgzjgQAIqVfpn7thpKDuSbyyjfGvLWTybFPi4MVRL7E973Zfo8y4c\nq76OSj7sdexdFRAHzbZIo6S63q6o7wyexy9Tnrax5f8h1KBwjShQghiG6bAo\nq0y2eC9VFesOn/FkJ/AdtGzunodLyFLOGPA07a4N4O4SaT+Sk/HfPa97p+On\nDp4pRV/PogRuqZT7pZKZBaw6G93iVacCq5O5IQ1DozDvGx1NhIhL0eD3jRiT\nrkJxWaRo/ZB1FHzRi4M1FHzCb1UXuZV1+VcJAPGU84P4eG9dnGT01sqX9fmA\nRWSEZ/3+nAi7sHaxtNbWUQ20yr6MQiFy1kqvm0GlT+vVp8H3gCteArLcWzZG\nlSi3AOpLqtqvc8v0ZGalgPuqj45AVO5S3rd1CZ16D13sD16NumUjP8+LBWGc\nqifPy+f7wBPNoF1Qe1vuwZTSO659tCNjso7B1IrTrkq8qwvIe98nKIv3gHf7\nP0u2EM4+XACafAps3uSutg6yPyBXqwLZjbSruO+OkgxeSnbn4GayZVur9QHa\ntWY+Z60ZG2cR6Q6W3Vgz76WnTOuP5DP2YlBl10iE/P1JG/bmzVnT//8ZTDHd\nb+5RnLcBcjKZ/NqPu/HjojGIy6g+9EwQDp0M7H5jeFNrh5C5grt0/p0WkJCJ\n+6+s\r\n=Psgk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDH1hJBM1XrhLFMk0zy4uuzrED1mUsrsVl4ZaGl3MXz/AiEA9s+KOfBU1IJSZ8eVb6nXuVyAIYrjJ1jcRYP8evZMUL4="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.13-canary.157.1263.0_1628027202668_0.003019117874732302"},"_hasShrinkwrap":false},"7.3.13-canary.158.1268.0":{"name":"storybook-addon-jsx","version":"7.3.13-canary.158.1268.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://jimmyandrade.com\"><img src=\"https://avatars.githubusercontent.com/u/2307245?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Jimmy Andrade</b></sub></a><br /><a href=\"#infra-jimmyandrade\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"7e1e1cd3fb02df29af4abcfc2e945dd4ced27f62","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.13-canary.158.1268.0","_nodeVersion":"16.6.1","_npmVersion":"7.20.3","dist":{"integrity":"sha512-DVqYS5eBPZ+mGGxlxfQ0oosgDAJ56oB/NWRjGrvVSC9MpPjLGqS5GHiyp/HzS9YrV0+K0wOVWvhfWrDTgyb52g==","shasum":"677efb29496c71a39645323d7a8ed5efa11c703d","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.13-canary.158.1268.0.tgz","fileCount":29,"unpackedSize":177815,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEv+BCRA9TVsSAnZWagAAs5oQAI33hbI9U7QUvBFluaLv\nidDtaS0yXUbBU5z6p3L6ug/NibE3z7qKPdgL46BjsKIjy/oxiW4VsZeuEZ3o\nkon3uGS3ST2lDsrw84jg9BXDVyDUI7thfueMtPqACO265Ux6VEg/f5sJ7ZSu\nLfNiPhnFGA6zSddbyBB87qc4IluH4Gar3xIBNPnjN7BroIHBr0FfCo/XMWOK\nDg74Sk6jJqU+57KLuZqOzuQ4ezbtdqPJzk/MUJmop0F1ALNBW+UazT9hkZp4\nvI/FPgl7bDiHy7hLSbiq9s6WKU0jao+eCFqtbJ9ML27rO/E61NSxOTLRYcr0\nZW7sFImsrYOKKW0sQCr8duCA/cvKqC2Vdut0tamS1GZ1uGlhbXT6kAgoE2II\nNi5n04EtbMI0Y4A6DJLisFWR6ZBRI5gFLzNW+XAL6INHO+pjGk3fCsars+Cx\nVtcyw5V7AyiaYSOLZMmBHNeeF4m9Fp15CmGOUzcvFBNr+VKBJFUHfcXc6NUh\nF0NgBkMnDzdlKjnCw2wZwHLKRG2CLaZvyltP3GTnAF0j8tHF2IAAg/omsHVm\n2JDS5QJ2yfnt8cCt3hseKdevcqBvZAVmrraH7ssYuExAs6mkE0OY7uAI3rhp\ndZdcC5CVoySQTkOTMVGEavcsj4eoJ/57MjcCrllUT4SpDNg7YBK0O3iKFEC1\n5or4\r\n=C62h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICb2oisn+Wh87E2lzYvXl0xa/HYODrZieITp3ds6iQzcAiAnfLLQcfVBvpxIJZEXUKxQDAWuI0BtLP4wbamfKmUZOA=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.13-canary.158.1268.0_1628635009682_0.41330883294874665"},"_hasShrinkwrap":false},"7.3.13":{"name":"storybook-addon-jsx","version":"7.3.13","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"gitHead":"f6a696c94e6b5d75ae39c2a9cc2bf3e91d6a464f","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.13","_nodeVersion":"16.7.0","_npmVersion":"7.20.3","dist":{"integrity":"sha512-u37d/p3+p5ARPzQZPOC5mlpNS4r06H0F/wlvTov+EuVI5r0eoXTyXxUeb/dATGPww3tUraHaITR0r8eOO+JHbw==","shasum":"401c729bb4f49473ad648629acf47fdfdbb398af","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.13.tgz","fileCount":29,"unpackedSize":178227,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJOtHCRA9TVsSAnZWagAA7EMP/AuNpeh9RPLBifg4B3ci\nBXPDjxsm4N3j0NO0hTPlMfGTzb7VRpO3SyUqg1L6A5NZDxBSM/50tU7sr+rj\nB0zsSQc8W+QY7At386MkvNUMO526VgLIdxooVjgoneJigtK794nTVOydklbn\ns+63jB6JYHVcCMQBPPNt882FDJc6jUDHmN8hyrlaT7NTo+tU2p3YcLl7LQtm\nlkt/F2B8CNK1t0mblihwG9heA+EuECIBhYBXROEOS2OBqSHHJprTPX/H7XN3\nFU4QVYK8A+/A6Rq8DiB+7qxG066OnnbGj/9JxDONV4mP2JFdrNt90I72/IGz\ndgO8JSh4FewNZHm0+7RkbJ3vVukxv043FpZCKAgqlEfLhUbYJjzxNcDQIUqB\nbXKKTsHIeqRZEkNoTF7QrsYY9sSDHN60/5U8TMNwXNyWoWVazuGRtl4axFry\n2kUn+TnKuw5kJWyEzYdJMAdfzrRPaZEf+30MHB295grMhNQeRtYaazsvCLBi\nPti5qNinBTcPXioIH3UA9+80nXewFOzpvM/WY4nUhZPBCqfDLV+ENr9PGXO1\noZwUKBhoAt2LXLeIoFbOzIHIQX6vwFS8pdSz57mzajsdiZ69o+QFDiKMhY67\nuYAqxrsl7saLLD0lpxddL7DRAcOaG8CnZo2CNEqUkGt/I01czPQYWZXVYL01\nwEMJ\r\n=FyCM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCL2YdKugvViE6Mx4wEN+2FhLYDJ2CePEn2L6XpcKR3bwIhAIc4WpNWod2VstNhZobiak40JeLKcH4RddptnKkhmbDR"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.13_1629809478851_0.162187755288969"},"_hasShrinkwrap":false},"7.3.14-canary.160.1290.0":{"name":"storybook-addon-jsx","version":"7.3.14-canary.160.1290.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://jimmyandrade.com\"><img src=\"https://avatars.githubusercontent.com/u/2307245?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Jimmy Andrade</b></sub></a><br /><a href=\"#infra-jimmyandrade\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"ecf5690c9fdd984298854657d3c7d4510865b5e7","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.14-canary.160.1290.0","_nodeVersion":"16.8.0","_npmVersion":"7.21.0","dist":{"integrity":"sha512-kWhwUGLhXELoRxpDrMDTJGvV8PlJ5Fl7tCrt/c+k74qX0aKnuZEBisuGtQOaGj6Yzg5OEQxBA5uFe4mE7HpSZg==","shasum":"297d2889ca975b0c6b63b99a553f32139a2a6039","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.14-canary.160.1290.0.tgz","fileCount":29,"unpackedSize":178245,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLt2mCRA9TVsSAnZWagAAk+QP/2KXlIPBPw/lHb/ENokN\nQorVVmf/8OQ2RlktojC+/wap4MIoe3pFxhjYMAGKuoBQMJS4NkJNffzNpHCT\nSThjaN8WEb8SJ2vCSfWEu9QtF2owolsVWijL430dgmTSjYPCSc2e/EMxM4ky\nrh/hfZU4xFRO3FswbT00fNgj1QK6FZaIfUSsGl4owuqedHgv5z5lP0f/sTff\nvucJfNqK4JPQwGPlYccsUg9is5hz9MYO1kOIZClZJ10v3XvW0mqdtEzKtOVh\nDBgnA5j1ax47TymGf+n5sWRr2VNxXaUcK6Xy3qdwR075PwMc3EMQijul8ci2\nLOL/LSLBsmkFZGEWU2XKF4ty+cvODBPWTA/EIydFLxc8J9UNOvR7S16GcUqd\ny5ewDGr9ODgW9+w6D7kgCO6cLVQX7KUpPe7cSAjb+f2CDvl3lf6oMynMmbAN\nOKsStIXWHjerqvaKvGYO6HF+bL9AzRXcR5Qpy87iECR3Ef12j78c9+zmihsP\nOF4Y89fkUhTsefMlbkJmDfQI/XvPjrK/ZYpGaSJZ38H4Vz9vT8r2DVYVZddI\nwcSAUyQtExyGJs/BBPxKa22kQSAVSugPPXIRSzAmG7HRi8eBG4gGCkXB7H9e\nct+6nJ9j9lhkTVpBYg4Iar0cn2mt5FraP9s9XuMifpM27FB4O8vZJ3IXirwB\nQdB3\r\n=IDpi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHuA1BrBQh/3GNzXvdoHVD54LvdxwgcYbAiGGiCiWDZ3AiApg1+FG/hlLpmSYu8xkgUNZ21QNW8kUSjBtziUBvh87w=="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.14-canary.160.1290.0_1630461350464_0.037947726063474185"},"_hasShrinkwrap":false},"7.3.14":{"name":"storybook-addon-jsx","version":"7.3.14","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"gitHead":"8bd97e94af5a59236373e752ffd4369b8e6cd883","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.14","_nodeVersion":"16.9.0","_npmVersion":"7.21.1","dist":{"integrity":"sha512-ierjcn0nxjjOuNcnLkorXQnfXlYmyQxFXvmWV88T9V8VAnsWd4yclTtSOV/gPtB83FefmyO/8dm1qQBG0f+2pA==","shasum":"7b3e98d1f970efaf2d94d0203947aa2bcfc1e441","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.14.tgz","fileCount":29,"unpackedSize":178504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh28JVCRA9TVsSAnZWagAAl5YP/jYbHK2pNgXFfvU9fyag\n7C5l8cGiJcwbaUrhl2IjGADrynS2PO0PY3tH2Wf6iD/n6BIsEIU4MtDgtod8\nMXlceujX0l7ubOUj7zTzMEbqemlpqgKkl87fbYdcSF1Ikin4dM5cPiBkUlSS\n9fYTcPSMBl2N2YGc9cZJRnyl06U4CpuedxRfD5qFWowb11fJ+lOFAvorTbUO\n8befvZbEjnUIC9fu9mS8taTfF41G8uuzhRCGXiCQsfKsEe5zIZjNSTsn1+Us\nKcKZRxZ2tDqXWrlk4dXMwOrovzh0eUE/OdBkGdQ7lD1GPL08D8/Ud6b7RSFS\naqsIoavkbTxri5PPtbkzugeV6Q2A4LmMlJ2Jl01oCaeVs+qalba0DyfN1sd5\nEl49gAG1W1BaQnDv8lMQgXSFsRIlYSydC/vd+CP+XOBKYVZvj3Z8IeI8SBJL\nB9Dqq+w0fi0N3c3o/1wOIBGJjZaGBrxMTeKNPjKWqxGNjhytrIrqcB8opaGX\n0OAFdn2T3jlpGat3LSX1hV+wAoJ10ek+Q5EUVOXBOntHEJqjGVFGt3cAouqi\npqn39MTqdAAP7ykMUZ35l+e4RQYSVXaKnY1i2bYGOC8+IOhpxSuZY3TvKbUx\nEFMI8YlozOrzhKPqtmmCGbhzRpEnQNYyA3CuadYVMmZoeyutCGuYzUWSvWyV\neerj\r\n=JKjV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDyX5PYhg7Dq4IDHJOLdi2xBojZePJ5Tm3jhS1DTX5q7AiEAwbPlHOncwV7sKoe1lEb84vXIyCfBF9VuWfPhAxYqInQ="}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.14_1631657794536_0.7725487806280473"},"_hasShrinkwrap":false},"7.3.15-canary.162.1301.0":{"name":"storybook-addon-jsx","version":"7.3.15-canary.162.1301.0","description":"Display the JSX of the story","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"license":"MIT","author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"main":"lib/index.js","scripts":{"prebuild":"rimraf lib","build":"babel src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx && npm run build:types","build-storybook":"build-storybook -c ./example/.storybook","build:dev":"babel -w src --out-dir lib --ignore spec.js,test.js --extensions .ts --extensions .js --extensions .tsx","build:types":"tsc -p tsconfig.json","lint":"eslint --cache src --ext ts --ext tsx","netlify":"build-storybook -c ./example/.storybook","prepare":"yarn build","release":"auto shipit","storybook":"start-storybook -p 9009 -c ./example/.storybook","test":"yarn test:all","test:all":"jest src","test:dev":"jest src --watch"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{js,json,css,md}":["prettier --write","git add"]},"prettier":{"singleQuote":true},"jest":{"testURL":"http://localhost"},"dependencies":{"copy-to-clipboard":"^3.0.8","js-beautify":"^1.8.8","react-element-to-jsx-string":"^14.3.1","storybook-pretty-props":"^1.0.3"},"devDependencies":{"@auto-it/all-contributors":"^9.34.1","@auto-it/first-time-contributor":"^9.34.1","@babel/cli":"^7.1.2","@babel/core":"^7.1.6","@babel/preset-env":"^7.1.0","@babel/preset-react":"^7.0.0","@babel/preset-typescript":"^7.3.3","@design-systems/eslint-config":"^1.4.15","@storybook/addon-options":"^5.0.3","@storybook/addon-storyshots":"^5.0.3","@storybook/addons":"^5.2.5","@storybook/channels":"^5.2.5","@storybook/components":"^5.2.5","@storybook/core-events":"^5.2.5","@storybook/react":"^5.0.3","@storybook/theming":"^5.2.5","@types/js-beautify":"^1.8.0","@types/react":"^16.8.8","@types/storybook__react":"^4.0.1","all-contributors-cli":"^6.14.2","auto":"^9.34.1","babel-core":"^7.0.0-bridge.0","babel-jest":"^24.5.0","babel-loader":"^8.0.6","eslint":"^6.8.0","husky":"^3.0.9","jest":"^24.5.0","lint-staged":"^9.4.2","prettier":"^1.15.2","prop-types":"^15.6.2","react":"^16.11.0","react-docgen-typescript-loader":"^3.7.2","react-dom":"^16.11.0","react-test-renderer":"^16.11.0","regenerator-runtime":"^0.13.3","rimraf":"^3.0.0","storybook-addon-react-docgen":"^1.2.32","typescript":"^3.3.3333"},"peerDependencies":{"@storybook/addons":">= 5.x","@storybook/channels":">= 5.x","@storybook/components":">= 5.x","@storybook/core-events":">= 5.x","@storybook/theming":">= 5.x","react":"^16.2.0 || ^17.0.0","react-dom":"^16.2.0 || ^17.0.0"},"auto":{"plugins":["npm","released","first-time-contributor","all-contributors"]},"readme":"<p align=\"center\">\n  <img width=100 src=\"storybook-jsx.png\">\n  <br>\n  <h1 style=\"text-align:center;\">Storybook-addon-jsx</h1>\n</p>\n\n[![Build Status](https://travis-ci.org/Kilix/storybook-addon-jsx.svg?branch=master)](https://travis-ci.org/Kilix/storybook-addon-jsx)\n[![Total Download](https://img.shields.io/npm/dt/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n[![Current Version](https://img.shields.io/npm/v/storybook-addon-jsx.svg)](https://www.npmjs.com/package/storybook-addon-jsx)\n\nThis Storybook addon shows you the JSX of the story.\nThis preview works for Vue components as well.\nThe outputted JSX will reflect any changes made to the storybok by knobs or controls.\n\n![Storybook Addon JSX Demo](screenshot.png)\n\n## Getting started\n\n### Installation\n\nFirst install the addon from `npm`:\n\n```sh\nnpm i --save-dev storybook-addon-jsx\n# or\nyarn add --dev storybook-addon-jsx\n```\n\n### Configuration\n\nFor the latest storybook all you need to do is add the addon to your `.storybook/main.js`:\n\n```js\nmodule.exports = {\n  addons: ['storybook-addon-jsx']\n};\n```\n\nIf you are using storybook@5.x or lower you will need to add the following to `.storybook/addons.js`:\n\n```js\nimport 'storybook-addon-jsx/register';\n```\n\n### Usage\n\nImport it into your stories file and then use it when you write stories:\n\n```js\nimport React from \"react\";\nimport { storiesOf } from \"@storybook/react\";\nimport { jsxDecorator } from \"storybook-addon-jsx\";\n\nimport { TestComponent } from './TestComponent':\n\nexport default {\n  title: \"Components/TestComponent\",\n  decorators: [jsxDecorator],\n};\n\nexport const Paris = () => (\n  <TestComponent fontSize={45} fontFamily=\"Roboto\" align=\"center\" color=\"#CAF200\">\n    Hello\n  </TestComponent>\n);\n\nexport const Orleans = () => <Test color=\"#236544\">Hello</Test>;\n```\n\nOr to configure it globally add the `jsxDecorator` to your `.storybook/preview.js`:\n\n```js\nconst { addDecorator } = require('@storybook/react');\nconst { jsxDecorator } = require('storybook-addon-jsx');\n\naddDecorator(jsxDecorator);\n```\n\n#### Vue\n\nYou can also use this addon with `@storybook/vue`.\n\n**`.storybook/preview.js`**\n\n```js\nimport { configure, addDecorator } from '@storybook/vue';\nimport { jsxDecorator } from 'storybook-addon-jsx';\n\naddDecorator(jsxDecorator);\n```\n\nIf a Vue story defines its view with a template string then it will be displayed.\n\n```js\nimport { storiesOf } from '@storybook/vue';\n\nstoriesOf('Vue', module).add('template property', () => ({\n  template: `<div></div>`\n}));\n```\n\n## Options\n\n### JSX\n\nThis addon support all options from [react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) as well as the following options.\n\n- `skip` (default: 0) : Skip element in your component to display\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: { skip: 1 }\n  }\n};\n```\n\n- `onBeforeRender(domString: string) => string` (default: undefined) : function that receives the dom as a string before render.\n\n```js\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      onBeforeRender: domString => {\n        if (domString.search('dangerouslySetInnerHTML') < 0) {\n          return '';\n        }\n\n        try {\n          domString = /(dangerouslySetInnerHTML={{)([^}}]*)/.exec(domString)[2];\n          domString = /(')([^']*)/.exec(domString)[2];\n        } catch (err) {}\n\n        return domString;\n      }\n    }\n  }\n};\n```\n\n- `displayName` (default: 0) : You can manually name the components that use useMemo or useRef.\n\n```javascript\nexport default {\n  title: 'Components/TestComponent',\n  parameters: {\n    jsx: {\n      displayName: () => 'CustomName'\n    }\n  }\n};\n```\n\n### Disable JSX Addon\n\nIf enabled globally, the JSX addon can be disabled on individual stories:\n\n```jsx\nexport const Simple = () => <div>Hello</div>;\n\nSimple.story = {\n  parameters: {\n    jsx: {\n      disable: true\n    }\n  }\n};\n```\n\n### Vue Options\n\n- `enableBeautify` (default: true) : Beautify the template string\n- All HTML options from [js-beautify](https://github.com/beautify-web/js-beautify#css--html)\n\n## Global Options\n\nTo configure global options for this plugin, add the following to your `config.js`.\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n## Function Props\n\nIf you provide a funtion to one of your props `storybook-addon-jsx` will display that functions `toString` result.\nThis is usaully very ugly.\nTo override this include the following util function that will print an easiy to read string.\n\n```tsx\n/**\n * Overrides the toString on a function so that it addon-jsx prints\n * the callbacks in a copy-paste-able way.\n */\nexport const callback = <T extends Function>(fn: T): T => {\n  /** A toString to render the function in storybook */\n  // eslint-disable-next-line no-param-reassign\n  fn.toString = () => '() => {}';\n  return fn;\n};\n```\n\nThis works well with the `@storybook/addon-actions` too.\n\n```tsx\nexport ExampleStory = () => (\n  <TestComponent onClick={callback(action('onClick'))} />\n)\n```\n\n## Including DocGen Information\n\nThis addon will display prop type information while hovering over a component or prop.\nThis is accomplished through [a babel plugin](https://github.com/storybookjs/babel-plugin-react-docgen) in the default storybook configuration.\nTo use the docgen information for TypeScript components you must include be using [a typescript docgen loader](https://github.com/strothj/react-docgen-typescript-loader)\n\n```js\nimport { addParameters } from '@storybook/react';\n\naddParameters({\n  jsx: {\n    // your options\n  }\n});\n```\n\n### TypeScript Monorepo DocGen\n\nIn a TypeScript monorepo you will probably be importing components through package names.\nIn this situation storybook will load your compiled typescript and lose information about the props.\n\nOne solution to get around this is to add a unique property to your component's `package.json` that points directly at the TypeScript source.\nWe can then set storybook's webpack configuration to look for this property first, which will allow the TypeScript loader to insert docgen information.\n\nIn your component's `package.json`:\n\n```jsonc\n{\n  // Can be any string you want, here we choose \"source\"\n  \"source\": \"src/index.tsx\"\n}\n```\n\nThen in your webpack config for storybook:\n\n```js\nconfig.resolve.mainFields = ['source', 'module', 'main'];\n```\n\n## Testing with storyshots\n\nIf you are using the `addWithJSX` method you will need to include `storybook-addon-jsx` in your test file.\n\n```js\nimport initStoryshots from '@storybook/addon-storyshots';\nimport { setAddon } from '@storybook/react';\nimport JSXAddon from 'storybook-addon-jsx';\n\nsetAddon(JSXAddon);\n\ninitStoryshots({\n  /* configuration options */\n});\n```\n\n## Usage with IE11\n\nSome of the dependencies that this package has use APIs not available in IE11.\nTo get around this you can add the following to your `webpack.config.js` file\n(your paths might be slightly different):\n\n```js\nconfig.module.rules.push({\n  test: /\\.js/,\n  include: path.resolve(__dirname, '../node_modules/stringify-object'),\n  use: [\n    {\n      loader: 'babel-loader',\n      options: {\n        presets: ['env']\n      }\n    }\n  ]\n});\n```\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->\n<!-- prettier-ignore-start -->\n<!-- markdownlint-disable -->\n<table>\n  <tr>\n    <td align=\"center\"><a href=\"https://wcastand.tech/\"><img src=\"https://avatars3.githubusercontent.com/u/2178244?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>William</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Code\">💻</a> <a href=\"#design-wcastand\" title=\"Design\">🎨</a> <a href=\"#ideas-wcastand\" title=\"Ideas, Planning, & Feedback\">🤔</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=wcastand\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://hipstersmoothie.com\"><img src=\"https://avatars3.githubusercontent.com/u/1192452?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Lisowski</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=hipstersmoothie\" title=\"Documentation\">📖</a> <a href=\"#infra-hipstersmoothie\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"#maintenance-hipstersmoothie\" title=\"Maintenance\">🚧</a></td>\n    <td align=\"center\"><a href=\"https://github.com/ndelangen\"><img src=\"https://avatars2.githubusercontent.com/u/3070389?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Norbert de Langen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=ndelangen\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://github.com/samouss\"><img src=\"https://avatars2.githubusercontent.com/u/6513513?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Samuel Vaillant</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Code\">💻</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=samouss\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://twitter.com/_alexandrebodin\"><img src=\"https://avatars2.githubusercontent.com/u/6065744?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Alexandre BODIN</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=alexandrebodin\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/stof\"><img src=\"https://avatars0.githubusercontent.com/u/439401?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Christophe Coevoet</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=stof\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://www.leonelgalan.com\"><img src=\"https://avatars3.githubusercontent.com/u/727774?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Leonel Galán</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leonelgalan\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"http://threefivetwo.com\"><img src=\"https://avatars3.githubusercontent.com/u/5214462?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lincoln Anderson</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=Landerson352\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/smollweide\"><img src=\"https://avatars2.githubusercontent.com/u/2912007?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Simon Mollweide</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=smollweide\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/lflpowell\"><img src=\"https://avatars0.githubusercontent.com/u/37211236?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lflpowell</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lflpowell\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/expe-lbenychou\"><img src=\"https://avatars1.githubusercontent.com/u/31204794?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lionelbenychou</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=expe-lbenychou\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://breadadams.com\"><img src=\"https://avatars1.githubusercontent.com/u/5795227?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Brad Adams</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=breadadams\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"http://twitter.com/arahansen\"><img src=\"https://avatars0.githubusercontent.com/u/8746094?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Andrew Hansen</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=arahansen\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://peter.mikit.sh\"><img src=\"https://avatars3.githubusercontent.com/u/1571918?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Peter Mikitsh</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Documentation\">📖</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=petermikitsh\" title=\"Code\">💻</a></td>\n  </tr>\n  <tr>\n    <td align=\"center\"><a href=\"https://github.com/lisamartin00\"><img src=\"https://avatars0.githubusercontent.com/u/6465955?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>lisamartin00</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=lisamartin00\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"https://github.com/semihraifgurel\"><img src=\"https://avatars.githubusercontent.com/u/29544960?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Semih Raif Gürel</b></sub></a><br /><a href=\"https://github.com/storybookjs/addon-jsx/commits?author=semihraifgurel\" title=\"Documentation\">📖</a></td>\n    <td align=\"center\"><a href=\"https://leepowell.dev\"><img src=\"https://avatars.githubusercontent.com/u/602052?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Lee Powell</b></sub></a><br /><a href=\"#infra-leepowelldev\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a> <a href=\"https://github.com/storybookjs/addon-jsx/commits?author=leepowelldev\" title=\"Code\">💻</a></td>\n    <td align=\"center\"><a href=\"http://jimmyandrade.com\"><img src=\"https://avatars.githubusercontent.com/u/2307245?v=4\" width=\"100px;\" alt=\"\"/><br /><sub><b>Jimmy Andrade</b></sub></a><br /><a href=\"#infra-jimmyandrade\" title=\"Infrastructure (Hosting, Build-Tools, etc)\">🚇</a></td>\n  </tr>\n</table>\n\n<!-- markdownlint-enable -->\n<!-- prettier-ignore-end -->\n<!-- ALL-CONTRIBUTORS-LIST:END -->\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","readmeFilename":"README.md","gitHead":"d58e1898c6565d47599790b5e80b3fee98a9a7a0","bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"},"homepage":"https://github.com/storybookjs/addon-jsx#readme","_id":"storybook-addon-jsx@7.3.15-canary.162.1301.0","_nodeVersion":"16.9.1","_npmVersion":"7.21.1","dist":{"integrity":"sha512-nlnB1AOmuWW9HYy7ht9T8QKmUQiJ7/eSW2OzraVz54xr116xQVYNwkB3PLZdzSK373oVIyJUYU1lTQ0Vm3m8NQ==","shasum":"f9a786c1cfd5d40bba31b171309fed8c24125d56","tarball":"https://registry.npmjs.org/storybook-addon-jsx/-/storybook-addon-jsx-7.3.15-canary.162.1301.0.tgz","fileCount":29,"unpackedSize":178522,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgboRyiBt9BgQKaQmlpMHuBUv4x034LZNebjMJlEGDOgIhAMDMct4ldcjyvJK9RhhE02pb9o6kBGwoGGJG6gfz/4Uh"}]},"_npmUser":{"name":"alisowski","email":"lisowski54@gmail.com"},"directories":{},"maintainers":[{"name":"kilix_user","email":"vamos-ops@extia.fr"},{"name":"alefevre19","email":"alefevre@extia.fr"},{"name":"shegunmb","email":"shegunmb@gmail.com"},{"name":"alfredo-delgado","email":"alfred@adelgado.org"},{"name":"ndelangen","email":"ndelangen@me.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"wcastand","email":"wcastand@gmail.com"},{"name":"alisowski","email":"lisowski54@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-jsx_7.3.15-canary.162.1301.0_1632188985152_0.2575491278549886"},"_hasShrinkwrap":false}},"readme":"","maintainers":[{"email":"vamos-ops@extia.fr","name":"kilix_user"},{"email":"alefevre@extia.fr","name":"alefevre19"},{"email":"shegunmb@gmail.com","name":"shegunmb"},{"email":"alfred@adelgado.org","name":"alfredo-delgado"},{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"michael@lab80.co","name":"shilman"},{"email":"talpa@yandex.ru","name":"hypnosphi"},{"email":"wcastand@gmail.com","name":"wcastand"},{"email":"lisowski54@gmail.com","name":"alisowski"}],"time":{"modified":"2022-09-08T15:03:59.950Z","created":"2017-04-21T09:29:49.838Z","0.0.2":"2017-04-21T09:29:49.838Z","0.0.3":"2017-04-21T09:44:35.079Z","1.0.0":"2017-04-21T18:15:12.905Z","1.0.1":"2017-04-21T18:18:26.551Z","1.0.2":"2017-04-21T19:40:58.408Z","1.0.3":"2017-04-21T19:45:52.614Z","2.0.0":"2017-04-22T18:28:45.208Z","2.0.1":"2017-04-25T14:54:06.592Z","2.0.2":"2017-04-25T21:18:43.890Z","2.0.3":"2017-04-27T09:14:17.489Z","2.0.4":"2017-04-27T09:16:19.660Z","2.0.5":"2017-04-27T13:45:10.057Z","2.0.6":"2017-04-27T13:55:31.570Z","2.0.7":"2017-04-27T14:00:19.212Z","2.0.8":"2017-04-27T15:22:02.533Z","2.0.9":"2017-04-27T16:38:59.020Z","2.0.10":"2017-04-28T13:14:56.445Z","2.1.0":"2017-05-09T13:01:50.837Z","2.1.1":"2017-05-09T13:52:09.453Z","2.1.2":"2017-05-10T09:00:24.222Z","3.0.1":"2017-05-10T09:03:59.430Z","3.1.0":"2017-05-24T11:56:59.340Z","4.0.0":"2017-05-29T09:19:03.546Z","4.1.0":"2017-05-31T08:26:57.724Z","4.1.1":"2017-06-13T16:30:32.336Z","4.2.0":"2017-10-02T08:19:14.855Z","5.0.0":"2017-10-14T13:34:57.114Z","5.1.0":"2017-12-12T19:24:47.011Z","5.2.0":"2018-01-03T22:51:16.383Z","5.3.0":"2018-01-04T21:49:45.647Z","5.4.0":"2018-07-26T16:58:34.074Z","6.0.0":"2018-11-26T12:57:09.156Z","6.0.1":"2019-03-15T23:15:04.941Z","7.0.0":"2019-03-16T01:17:45.996Z","7.0.1":"2019-03-18T18:25:10.002Z","7.0.2":"2019-03-20T17:50:25.032Z","7.1.0":"2019-03-22T19:02:33.117Z","7.1.1":"2019-04-27T19:20:28.795Z","7.1.2":"2019-04-27T20:17:18.619Z","7.1.3":"2019-07-19T18:07:06.805Z","7.1.4-canary.171":"2019-07-19T18:11:58.485Z","7.1.4":"2019-07-19T18:15:55.386Z","7.1.5":"2019-07-19T18:20:06.467Z","7.1.6-canary.185":"2019-08-29T02:29:32.049Z","7.1.6":"2019-09-01T18:25:25.977Z","7.1.7-canary.90.195":"2019-10-22T10:34:05.159Z","7.1.7":"2019-10-23T13:10:19.301Z","7.1.8":"2019-10-23T13:11:53.860Z","7.1.9":"2019-10-23T13:19:59.146Z","7.1.10-canary.90.213":"2019-10-23T13:22:17.929Z","7.1.10-canary.90.217":"2019-10-23T13:24:47.383Z","7.1.10":"2019-10-23T13:29:16.473Z","7.1.11-canary.91.226":"2019-10-23T13:30:52.172Z","7.1.11-canary.91.230":"2019-10-23T13:33:19.139Z","7.1.11":"2019-10-23T14:30:01.663Z","7.1.12-canary.92.246":"2019-10-23T15:02:52.918Z","7.1.12-canary.92.249":"2019-10-23T15:03:25.564Z","7.1.12-canary.92.253":"2019-10-23T18:57:02.788Z","7.1.12":"2019-10-23T19:01:04.151Z","7.1.13":"2019-10-25T10:13:57.491Z","7.1.14":"2020-01-23T15:53:16.457Z","7.1.15-canary.99.289":"2020-03-14T05:14:30.547Z","7.1.15":"2020-03-16T09:30:42.761Z","7.1.16-canary.101.304.0":"2020-04-10T23:46:23.280Z","7.2.0":"2020-04-10T23:54:39.195Z","7.2.1-canary.102.313.0":"2020-04-11T18:20:27.557Z","7.2.1-canary.102.320.0":"2020-04-11T19:22:31.111Z","7.2.1":"2020-04-11T19:28:23.363Z","7.2.2-canary.103.332.0":"2020-04-13T21:53:19.587Z","7.2.2-canary.103.336.0":"2020-04-13T21:54:58.391Z","7.2.2":"2020-04-13T22:01:12.897Z","7.2.3-canary.104.352.0":"2020-04-14T00:12:50.025Z","7.2.3-canary.104.351.0":"2020-04-14T00:13:49.470Z","7.2.3":"2020-04-14T00:19:11.678Z","7.2.4-canary.108.363.0":"2020-05-20T17:19:57.810Z","7.3.0":"2020-06-05T04:54:25.094Z","7.3.1-canary.111.393.0":"2020-06-06T14:11:49.637Z","7.3.1-canary.115.399.0":"2020-07-10T17:37:43.054Z","7.3.1-canary.115.404.0":"2020-07-10T17:39:38.046Z","7.3.1":"2020-07-10T17:46:08.475Z","7.3.2-canary.111.415.0":"2020-07-10T17:51:03.834Z","7.3.2":"2020-07-15T16:45:09.991Z","7.3.3-canary.111.432.0":"2020-07-15T18:01:15.742Z","7.3.3-canary.118.437.0":"2020-07-16T19:58:36.225Z","7.3.3-canary.119.442.0":"2020-07-17T19:02:07.446Z","7.3.3":"2020-07-17T19:06:03.096Z","7.3.4-canary.111.458.0":"2020-07-17T19:10:18.282Z","7.3.4-canary.118.457.0":"2020-07-17T19:10:26.720Z","7.3.4-canary.120.463.0":"2020-07-30T13:16:27.348Z","7.3.4-canary.122.468.0":"2020-08-13T21:33:42.821Z","7.3.4":"2020-08-13T21:39:00.131Z","7.3.5-canary.123.487.0":"2020-08-13T21:42:48.245Z","7.3.5-canary.111.488.0":"2020-08-13T21:43:35.245Z","7.3.5-canary.120.489.0":"2020-08-13T21:44:52.346Z","7.3.5-canary.125.494.0":"2020-09-04T03:24:38.704Z","7.3.5-canary.126.499.0":"2020-09-06T14:34:28.059Z","7.3.5-canary.127.504.0":"2020-09-09T06:03:29.328Z","7.3.5-canary.130.509.0":"2020-12-11T03:07:32.248Z","7.3.5-canary.133.519.0":"2021-02-01T15:24:53.100Z","7.3.5-canary.524.f61d606.0":"2021-02-09T19:45:45.202Z","7.3.5":"2021-02-09T19:48:33.104Z","7.3.6-canary.136.566.0":"2021-02-09T19:51:57.269Z","7.3.6-canary.133.563.0":"2021-02-09T19:52:02.498Z","7.3.6-canary.127.568.0":"2021-02-09T19:52:07.333Z","7.3.6-canary.126.567.0":"2021-02-09T19:52:13.660Z","7.3.6-canary.137.565.0":"2021-02-09T19:52:20.935Z","7.3.6-canary.123.569.0":"2021-02-09T19:52:41.232Z","7.3.6-canary.125.570.0":"2021-02-09T19:52:55.156Z","7.3.6":"2021-02-09T19:57:16.832Z","7.3.7-canary.123.606.0":"2021-02-09T20:01:35.671Z","7.3.7-canary.111.607.0":"2021-02-09T20:01:39.541Z","7.3.7-canary.127.608.0":"2021-02-09T20:01:47.402Z","7.3.7-canary.125.609.0":"2021-02-09T20:02:09.443Z","7.3.7-canary.126.611.0":"2021-02-09T20:02:14.391Z","7.3.7-canary.137.616.0":"2021-02-09T20:03:24.180Z","7.3.7-canary.141.626.0":"2021-03-30T14:43:20.307Z","7.3.7":"2021-03-31T20:55:03.798Z","7.3.8-canary.136.666.0":"2021-03-31T20:55:26.882Z","7.3.8-canary.143.674.0":"2021-03-31T20:55:45.036Z","7.3.8-canary.125.673.0":"2021-03-31T20:55:54.558Z","7.3.8-canary.144.667.0":"2021-03-31T20:56:24.666Z","7.3.8-canary.141.681.0":"2021-03-31T20:56:28.482Z","7.3.8-canary.127.688.0":"2021-03-31T20:56:46.949Z","7.3.8-canary.133.692.0":"2021-03-31T20:57:33.575Z","7.3.8-canary.137.700.0":"2021-03-31T20:58:00.400Z","7.3.8-canary.125.708.0":"2021-03-31T20:58:11.386Z","7.3.8-canary.127.706.0":"2021-03-31T20:58:26.060Z","7.3.8-canary.136.727.0":"2021-03-31T20:59:28.287Z","7.3.8-canary.111.730.0":"2021-03-31T20:59:32.887Z","7.3.8-canary.133.729.0":"2021-03-31T20:59:37.572Z","7.3.8-canary.143.731.0":"2021-03-31T20:59:51.243Z","7.3.8-canary.137.732.0":"2021-03-31T21:00:18.541Z","7.3.8-canary.146.737.0":"2021-04-13T15:20:41.333Z","7.3.8-canary.143.780.0":"2021-04-18T22:29:54.060Z","7.3.8":"2021-04-18T22:30:12.530Z","7.3.8-canary.125.782.0":"2021-04-18T22:30:17.200Z","7.3.8-canary.111.783.0":"2021-04-18T22:30:20.760Z","7.3.9-canary.137.786.0":"2021-04-18T22:30:25.558Z","7.3.9-canary.144.785.0":"2021-04-18T22:30:35.231Z","7.3.9-canary.127.787.0":"2021-04-18T22:30:41.936Z","7.3.9-canary.144.825.0":"2021-04-18T22:32:34.331Z","7.3.9-canary.147.827.0":"2021-04-18T22:32:39.410Z","7.3.9-canary.133.829.0":"2021-04-18T22:32:47.588Z","7.3.9-canary.137.828.0":"2021-04-18T22:32:58.740Z","7.3.9-canary.111.832.0":"2021-04-18T22:33:02.128Z","7.3.9-canary.136.831.0":"2021-04-18T22:33:13.976Z","7.3.9-canary.143.833.0":"2021-04-18T22:34:26.110Z","7.3.9-canary.148.838.0":"2021-04-19T22:05:19.477Z","7.3.9":"2021-04-21T13:33:55.435Z","7.3.10-canary.127.863.0":"2021-04-21T13:34:35.582Z","7.3.10-canary.125.864.0":"2021-04-21T13:34:49.710Z","7.3.10-canary.144.882.0":"2021-04-21T13:35:48.036Z","7.3.10-canary.143.886.0":"2021-04-21T13:36:09.982Z","7.3.10-canary.111.887.0":"2021-04-21T13:36:34.777Z","7.3.10-canary.136.893.0":"2021-04-21T13:36:44.786Z","7.3.10-canary.147.897.0":"2021-04-21T13:36:49.542Z","7.3.10-canary.147.898.0":"2021-04-21T13:36:54.982Z","7.3.10-canary.137.901.0":"2021-04-21T13:37:00.040Z","7.3.10-canary.144.921.0":"2021-04-21T13:38:03.738Z","7.3.10-canary.127.931.0":"2021-04-21T13:38:21.304Z","7.3.10-canary.137.932.0":"2021-04-21T13:38:25.650Z","7.3.10-canary.143.933.0":"2021-04-21T13:38:29.158Z","7.3.10-canary.133.930.0":"2021-04-21T13:38:34.225Z","7.3.10-canary.136.934.0":"2021-04-21T13:38:49.753Z","7.3.10-canary.150.939.0":"2021-05-06T22:26:46.845Z","7.3.10-canary.151.944.0":"2021-05-07T11:37:22.503Z","7.3.10-canary.152.949.0":"2021-05-10T02:12:51.015Z","7.3.10":"2021-05-13T13:23:50.684Z","7.3.10-canary.151.969.0":"2021-05-13T13:23:55.011Z","7.3.11-canary.137.998.0":"2021-05-13T13:24:18.988Z","7.3.11-canary.125.1001.0":"2021-05-13T13:24:30.175Z","7.3.11-canary.136.1002.0":"2021-05-13T13:24:40.058Z","7.3.11-canary.111.1004.0":"2021-05-13T13:24:52.535Z","7.3.11-canary.143.1005.0":"2021-05-13T13:25:02.934Z","7.3.11-canary.144.1006.0":"2021-05-13T13:25:08.078Z","7.3.11-canary.133.1022.0":"2021-05-13T13:25:40.300Z","7.3.11-canary.137.1043.0":"2021-05-13T13:26:26.918Z","7.3.11-canary.125.1056.0":"2021-05-13T13:26:44.379Z","7.3.11-canary.144.1054.0":"2021-05-13T13:26:54.235Z","7.3.11-canary.150.1057.0":"2021-05-13T13:26:58.074Z","7.3.11-canary.133.1059.0":"2021-05-13T13:27:02.764Z","7.3.11-canary.136.1060.0":"2021-05-13T13:27:17.105Z","7.3.11-canary.154.1065.0":"2021-06-07T22:31:51.390Z","7.3.11-canary.137.1122.0":"2021-06-15T14:11:24.694Z","7.3.11-canary.147.1126.0":"2021-06-15T14:11:48.888Z","7.3.11-canary.133.1143.0":"2021-06-15T14:11:58.793Z","7.3.11-canary.143.1152.0":"2021-06-15T14:12:13.648Z","7.3.11-canary.127.1150.0":"2021-06-15T14:12:23.668Z","7.3.11-canary.133.1156.0":"2021-06-15T14:12:31.610Z","7.3.11-canary.111.1161.0":"2021-06-15T14:12:35.371Z","7.3.11-canary.127.1163.0":"2021-06-15T14:12:42.480Z","7.3.11-canary.136.1160.0":"2021-06-15T14:12:51.467Z","7.3.11-canary.147.1164.0":"2021-06-15T14:13:01.957Z","7.3.11-canary.143.1165.0":"2021-06-15T14:14:34.907Z","7.3.11-canary.155.1170.0":"2021-06-15T20:08:05.157Z","7.3.11-canary.125.1214.0":"2021-06-22T18:53:23.952Z","7.3.11-canary.137.1232.0":"2021-06-22T18:53:48.042Z","7.3.11-canary.137.1233.0":"2021-06-22T18:53:57.947Z","7.3.11-canary.125.1235.0":"2021-06-22T18:54:15.444Z","7.3.11-canary.125.1236.0":"2021-06-22T18:54:30.681Z","7.3.11":"2021-06-22T18:54:56.825Z","7.3.12-canary.156.1241.0":"2021-06-22T18:55:40.409Z","7.3.12":"2021-06-22T19:03:11.944Z","7.3.13-canary.157.1263.0":"2021-08-03T21:46:42.815Z","7.3.13-canary.158.1268.0":"2021-08-10T22:36:49.864Z","7.3.13":"2021-08-24T12:51:19.037Z","7.3.14-canary.160.1290.0":"2021-09-01T01:55:50.657Z","7.3.14":"2021-09-14T22:16:34.781Z","7.3.15-canary.162.1301.0":"2021-09-21T01:49:45.298Z"},"license":"MIT","readmeFilename":"","users":{"wcastand":true},"homepage":"https://github.com/storybookjs/addon-jsx#readme","repository":{"type":"git","url":"git+https://github.com/storybookjs/addon-jsx.git"},"author":{"name":"Andrew Lisowski","email":"lisowski54@gamil.com"},"bugs":{"url":"https://github.com/storybookjs/addon-jsx/issues"}}