{"_id":"@bee-q/storybook-addon-html","name":"@bee-q/storybook-addon-html","dist-tags":{"latest":"5.1.7"},"versions":{"5.1.7":{"name":"@bee-q/storybook-addon-html","version":"5.1.7","description":"A Storybook addon that extracts and displays compiled syntax-highlighted HTML","keywords":["storybook-addon","html","code","popular","storybook-addons"],"repository":{"type":"git","url":"git+https://github.com/dgonzalezr/storybook-addon-html.git"},"author":{"name":"Whitespace","email":"code@whitespace.se"},"license":"AGPL-3.0-or-later","main":"dist/cjs/index.js","module":"dist/esm/index.js","types":"dist/ts/index.d.ts","scripts":{"clean":"rimraf ./dist","buildBabel":"concurrently \"yarn buildBabel:cjs\" \"yarn buildBabel:esm\"","buildBabel:cjs":"babel ./src -d ./dist/cjs --extensions \".js,.jsx,.ts,.tsx\"","buildBabel:esm":"babel ./src -d ./dist/esm --env-name esm --extensions \".js,.jsx,.ts,.tsx\"","buildTsc":"tsc --declaration --emitDeclarationOnly --outDir ./dist/ts","prebuild":"yarn clean","build":"concurrently \"yarn buildBabel\" \"yarn buildTsc\"","build:watch":"concurrently \"yarn buildBabel:esm -- --watch\" \"yarn buildTsc -- --watch\"","test":"echo \"Error: no test specified\" && exit 1","storybook":"start-storybook -p 6006","start":"concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"","build-storybook":"build-storybook","prerelease":"zx scripts/prepublish-checks.mjs","release":"yarn build && auto shipit","eject-ts":"zx scripts/eject-typescript.mjs","format":"run-s format:*","format:eslint":"eslint --fix '**/*.{js,jsx}' || true","format:prettier":"prettier --write '**/*.{js,jsx,json,md,mdx,yml,html,css}'","lint":"eslint '**/*.{js,jsx}'"},"devDependencies":{"@babel/cli":"^7.21.5","@babel/core":"^7.21.8","@babel/preset-env":"^7.21.5","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.21.5","@storybook/addon-essentials":"^7.0.12","@storybook/react":"^7.0.12","@types/node":"^16.0.0","auto":"^10.37.6","babel-loader":"^9.1.2","boxen":"^5.1.2","concurrently":"^6.5.1","dedent":"^0.7.0","eslint":"^8.29.0","eslint-plugin-import":"^2.26.0","eslint-plugin-react":"^7.31.11","npm-run-all":"^4.1.5","prettier":"^3.0.3","prop-types":"^15.8.1","react":"^17.0.2","react-dom":"^17.0.2","react-syntax-highlighter":"^15.5.0","rimraf":"^3.0.2","typescript":"^4.9.4","webpack":"^5.83.1","zx":"^1.15.2"},"peerDependencies":{"@storybook/addons":"^6.5.8 || ^7.0.12","@storybook/api":"^6.5.8 || ^7.0.12","@storybook/components":"^6.5.8 || ^7.0.12","@storybook/core-events":"^6.5.8 || ^7.0.12","@storybook/theming":"^6.5.8 || ^7.0.12","prettier":"^3.0.3","react":"^16.8.0 || ^17.0.0 || ^18.0.0","react-dom":"^16.8.0 || ^17.0.0 || ^18.0.0","react-syntax-highlighter":"^15.0.0"},"peerDependenciesMeta":{"react":{"optional":true},"react-dom":{"optional":true}},"publishConfig":{"access":"public"},"storybook":{"displayName":"HTML Preview","supportedFrameworks":["react","vue","angular","web-components","ember","html","svelte","preact","react-native"],"icon":"https://avatars1.githubusercontent.com/u/10450088?s=400&u=b2a95469b7d2addf63366a93a17f0bd06f9894cc&v=4"},"packageManager":"yarn@1.22.19","gitHead":"66341c5bee695a49d5c7a75aa518b4df04af18be","bugs":{"url":"https://github.com/dgonzalezr/storybook-addon-html/issues"},"homepage":"https://github.com/dgonzalezr/storybook-addon-html#readme","_id":"@bee-q/storybook-addon-html@5.1.7","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-nG0Vd4zi5aq0SZ4NYZQeAzSR6RogmAVsBe8atw7h6AGApYxx+wzF8RnuJW85IGylo5knUaojogLDqO8/qT4GzA==","shasum":"60551b371f17cf776008bc314aa3841e369d45d9","tarball":"https://registry.npmjs.org/@bee-q/storybook-addon-html/-/storybook-addon-html-5.1.7.tgz","fileCount":26,"unpackedSize":97489,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFevLF37B2V5kNP5Jm1T2Fm7bXsFqY4otlpW55HXrV0wIhANYJ8aUQuz9aVg0k6rN1rzoaCwkA4bp2kUohTwb+lW6F"}]},"_npmUser":{"name":"dgonzalezr","email":"dgonzalez83@gmail.com"},"directories":{},"maintainers":[{"name":"dgonzalezr","email":"dgonzalez83@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/storybook-addon-html_5.1.7_1697035365254_0.6249422615397087"},"_hasShrinkwrap":false}},"time":{"created":"2023-10-11T14:42:45.119Z","5.1.7":"2023-10-11T14:42:45.517Z","modified":"2023-10-11T14:42:45.817Z"},"maintainers":[{"name":"dgonzalezr","email":"dgonzalez83@gmail.com"}],"description":"A Storybook addon that extracts and displays compiled syntax-highlighted HTML","homepage":"https://github.com/dgonzalezr/storybook-addon-html#readme","keywords":["storybook-addon","html","code","popular","storybook-addons"],"repository":{"type":"git","url":"git+https://github.com/dgonzalezr/storybook-addon-html.git"},"author":{"name":"Whitespace","email":"code@whitespace.se"},"bugs":{"url":"https://github.com/dgonzalezr/storybook-addon-html/issues"},"license":"AGPL-3.0-or-later","readme":"# Storybook Addon HTML\n\nThis addon for Storybook adds a tab that displays the compiled HTML for each\nstory. It uses [highlight.js](https://highlightjs.org/) for syntax highlighting.\n\n\n\n## Getting Started\n\nInstall the addon and its dependencies.\n\nWith NPM:\n\n```sh\nnpm i --save-dev @whitespace/storybook-addon-html prettier react-syntax-highlighter\n```\n\nWith Yarn:\n\n```sh\nyarn add -D @whitespace/storybook-addon-html prettier react-syntax-highlighter\n```\n\n### Register addon\n\n```js\n// .storybook/main.js\n\nmodule.exports = {\n // ...\n addons: [\n \"@whitespace/storybook-addon-html\",\n // ...\n ],\n};\n```\n\n## Usage\n\nThe HTML is formatted with Prettier. You can override the Prettier config\n(except `parser` and `plugins`) by providing an object following the\n[Prettier API override format](https://prettier.io/docs/en/options.html) in the\n`html` parameter:\n\n```js\n// .storybook/preview.js\n\nexport const parameters = {\n // ...\n html: {\n prettier: {\n tabWidth: 4,\n useTabs: false,\n htmlWhitespaceSensitivity: \"strict\",\n },\n },\n};\n```\n\nYou can override the wrapper element selector used to grab the component HTML.\n\n```js\nexport const parameters = {\n html: {\n root: \"#my-custom-wrapper\", // default: #root\n },\n};\n```\n\nSome frameworks put comments inside the HTML. If you want to remove these you\ncan use the `removeComments` parameter. Set it to `true` to remove all comments\nor set it to a regular expression that matches the content of the comments you\nwant to remove.\n\n```js\nexport const parameters = {\n html: {\n removeComments: /^\\s*remove me\\s*$/, // default: false\n },\n};\n```\n\nYou can also use the `removeEmptyComments` parameter to remove only empty\ncomments like `` and ``.\n\n```js\nexport const parameters = {\n html: {\n removeEmptyComments: true, // default: false\n },\n};\n```\n\nYou can override the `showLineNumbers` and `wrapLines` settings for the syntax\nhighlighter by using the `highlighter` parameter:\n\n```js\nexport const parameters = {\n html: {\n highlighter: {\n showLineNumbers: true, // default: false\n wrapLines: false, // default: true\n },\n },\n};\n```\n\nAnother way of hiding unwanted code is to define the `transform` option. It\nallows you to perform any change to the output code, e.g. removing attributes\ninjected by frameworks.\n\n```js\nhtml: {\n transform: (code) => {\n // Remove attributes `_nghost` and `ng-reflect` injected by Angular:\n return code.replace(/(?:_nghost|ng-reflect).*?=\"[\\S\\s]*?\"/g, \"\");\n };\n}\n```\n","readmeFilename":"README.md"}