New
Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Star82,193
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
story-description-loader
Webpack loader for automatically generating addon-docs descriptions from component comments.
npm install story-description-loader
Last updated about 4 years ago
569
Downloads per week
Readme View on GitHub

DEPRECATED – use Storybook's official docgen instead

See https://github.com/storybookjs/storybook/pull/19684. Should be available for Storybook v7.0.0 or later

Storybook Description Loader

Add JSDoc comments to your storybook examples that show up on your DocsPage.

See Github issue that inspired this package: https://github.com/storybookjs/storybook/issues/8527#issuecomment-593801278

Usage

Code

// A `primary` button is used for emphasis.
export const Primary = () => <Button primary>Submit</Button>

/**
 * Use the `loading` prop to indicate progress. Typically use
 * this to provide feedback when triggering asynchronous actions.
 */
export const Loading = () => <Button loading>Loading</Button>

Rendered docs

Installation

1. Installing package

You'll need to have Storybook and the Docs Addon installed. Then run:

npm install --save-dev story-description-loader

2. Adding to Webpack

If using JSX

module: {
  rules: [
    {
      test: /\.stories\.jsx/,
      use: [{ loader: "story-description-loader", options: { isJSX: true } }],
    }
  ]
}

If using TSX

module: {
  rules: [
    {
      test: /\.stories\.tsx/,
      use: [{ loader: "story-description-loader", options: { isTSX: true } }],
    }
  ]
}

Or plain old JS

module: {
  rules: [
    {
      test: /\.stories\.js/,
      use: [{ loader: "story-description-loader" }],
    }
  ]
}
Join the community
6,522 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI