New
Storybook for full-stack developersAutomate with Chromatic
Star75,299
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-addon-compodoc
Adds Compodoc panel to Storybook
npm install storybook-addon-compodoc
Last updated over 3 years ago
96
Downloads per week
Readme View on GitHub

storybook-addon-compodoc

Show Compodoc pages for Angular component from selected story in Storybook

How it works?

Note: this works only for Angular components!

This addon adds panel which will show Compodoc page related to component from selected story.

Installation

npm install storybook-addon-compodoc --save-dev (or --save-optional or whatever suits you)

Configuration

Register addon

Don't forget to register addon in your addons.js file. To do so one should include import 'storybook-addon-compodoc/register; line there.

In config.js

In your config.js Storybook file provide url where your Compodoc generated documentation is deployed using configureCompodoc and add global decorator using addDecorator(withCompodoc()),i.e.:

import {configureCompodoc,withCompodoc} from 'storybook-addon-compodoc';
...
configureCompodoc({
  compodocUrl:'https://example.com/compodoc'
});
addDecorator(withCompodoc());

In each story

In each story file you have to provide parameter with component class name, the best way is to use addParameters method, i.e.:

const stories = storiesOf("Components/MyComponent", module);

stories.addParameters({
  componentClassName: "MyComponent"
});

TO DO

  • Initial working version
  • Handle errors and missing configuration nicely
  • Provide typings for public methods at least (configuration object)
  • Try to get component name without need to provide it manually
  • Update TODO
Join the community
5,867 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI