@khriztianmoreno/storybook-addon-raw-styled-component

    0.8.1 • Public • Published

    Storybook Addon RAW styled-component 💅🏻

    This addon for Storybook adds a tab that displays the compiled HTML for each story. It uses highlight.js for syntax highlighting.

    🌎 Demo

    Storybook Addon RAW styled-component

    🔥 Getting Started

    npm i --save-dev @khriztianmoreno/storybook-addon-raw-styled-component

    📝 Register addon

    Create a file called addons.js inside the .storybook directory and add the following content:

    // .storybook/main.js
    
    module.exports = {
      stories: ['../stories/**/*.stories.js'],
      addons: [
        ..., // Others addon
        '@khriztianmoreno/storybook-addon-raw-styled-component/register'
      ],
    };

    👨🏼‍💻 Usage

    Add withHTML as a global decorator inside .storybook/config.js:

    // .storybook/preview.js
    
    import { addDecorator } from '@storybook/html';
    import { withHTML } from '@khriztianmoreno/storybook-addon-raw-styled-component';
    
    addDecorator(withHTML);

    The HTML is formatted with Prettier. You can override the Prettier config (except parser and plugins) by providing an object following the Prettier API override format:

    // .storybook/preview.js
    
    import { addDecorator } from '@storybook/html';
    import { withHTML } from '@khriztianmoreno/storybook-addon-raw-styled-component';
    
    addDecorator(
      withHTML({
        prettier: {
          tabWidth: 2,
          useTabs: false,
          htmlWhitespaceSensitivity: 'strict',
        },
      }),
    );

    🎗 Supported frameworks

    Right now, the addon can be used with React.js framework

    Install

    npm i @khriztianmoreno/storybook-addon-raw-styled-component

    DownloadsWeekly Downloads

    79

    Version

    0.8.1

    License

    MIT

    Unpacked Size

    28.3 kB

    Total Files

    21

    Last publish

    Collaborators

    • khriztianmoreno