Wondering what’s next for npm?Check out our public roadmap! »

    @storybook/addon-storysource
    TypeScript icon, indicating that this package has built-in type declarations

    6.2.9 • Public • Published

    Storybook Storysource Addon

    This addon is used to show stories source in the addon panel.

    Framework Support

    Storysource Demo

    Getting Started

    First, install the addon

    yarn add @storybook/addon-storysource --dev

    You can add configuration for this addon by using a preset or by using the addon config with webpack

    Install using preset

    Add the following to your .storybook/main.js exports:

    module.exports = {
      addons: ['@storybook/addon-storysource'],
    };

    You can pass configurations into the addon-storysource loader in your .storybook/main.js file, e.g.:

    module.exports = {
      addons: [
        {
          name: '@storybook/addon-storysource',
          options: {
            rule: {
              // test: [/\.stories\.jsx?$/], This is default
              include: [path.resolve(__dirname, '../src')], // You can specify directories
            },
            loaderOptions: {
              prettierConfig: { printWidth: 80, singleQuote: false },
            },
          },
        },
      ],
    };

    To customize the source-loader, pass loaderOptions. Valid configurations are documented in the source-loader README.

    Theming

    Storysource will automatically use the light or dark syntax theme based on your storybook theme. See Theming Storybook for more information. Storysource Light/Dark Themes

    Displaying full source

    Storybook 6.0 introduced an unintentional change to source-loader, in which only the source of the selected story is shown in the addon. To restore the old behavior, pass theinjectStoryParameters: false option.

    If you're using addon-docs:

    module.exports = {
      addons: [
        {
          name: '@storybook/addon-docs',
          options: {
            sourceLoaderOptions: {
              injectStoryParameters: false,
            },
          },
        },
      ],
    };

    If not:

    module.exports = {
      addons: [
        {
          name: '@storybook/addon-storysource',
          options: {
            loaderOptions: {
              injectStoryParameters: false,
            },
          },
        },
      ],
    };

    This bug will be resolved in a future version of the addon.

    Install

    npm i @storybook/addon-storysource

    DownloadsWeekly Downloads

    312,446

    Version

    6.2.9

    License

    MIT

    Unpacked Size

    28.8 kB

    Total Files

    21

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar