New
Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Star75,441
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
@nju33/storybook__addon-docsify
Storybook and Docsify integrator (But it's altmost Docsify)
npm install @nju33/storybook__addon-docsify
Last updated about 3 years ago
13
Downloads per week
Readme View on GitHub

@nju33/storybook__addon-docsify

Prepare

Install like below,

yarn add -D @nju33/storybook__addon-docsify

And you should add the following to your addon.js (if you're using TypeScript then addon.ts).

import '@nju33/storybook__addon-docsify/dist/register';

Finally, place Docsify root as index.html following like. (The details is in Docsify document.)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="description" content="Description" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css" />
  </head>
  <body>
    <div id="app"></div>
    <script>
      window.$docsify = {
        basePath: '/',
        name: 'Document',
      };
    </script>
    <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
  </body>
</html>

After Docsify will do it for you. 👻

Examples

In the below is first example.

storiesOf('html-button', module)
  // html-button/foo-bar.md
  .add('foo-bar', () => <button>foo-bar</button>)
  // html-button/bar-baz.md
  .add('bar-baz', () => <button>bar-baz</button>);

In the above, The document path is html-button/foo-bar. In this case, Storybook has interapted key is html-button--foo-bar that using -- as separator.

That -- is handled / by this addon. Thus index.html#/html-button/foo-bar will be loaded then.

If you want to change its behavior, You maybe change it by pass to parameter into your story.

storiesOf('html-button', module)
  .addParameter({
    docsify: {
      path: 'html-button/README'
    }
  })
  // html-button/README.md
  .add('foo-bar', () => <button>foo-bar</button>)
  // html-button/README.md
  .add('bar-baz', () => <button>bar-baz</button>);

This addon read the parameter using by docsify. By setting path, you can make Docsify is loaded *.md you wish.

Join the community
5,858 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI