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

    storybook-readme
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/storybook-readme package

    5.0.9 • Public • Published

    Storybook README addon

    NOTE: This README only for version ^5.0.0. For older versions LEGACY_README.md


    Storybook README addon

    This addon is compatible with:

    Live demo

    Features:

    • Automatically generate props table (Only for React)
    • Does not affect on story function. So Storybook Info works correctly now.
    • 100% markdown support
    • Code highlighting
    • Accept multiple README (useful for hoc component - add component's and original component's README)
    • Looks like Github's README
    • Supports <docs/> tags for vue components (example-vue/components/MyButton/MyButton.vue).

    Also it very useful because most projects and components already have README.md files. Now it is easy to add them into your Storybook.

    Stories will be added with .addWithInfo method if Storybook Info Addon is installed.

    Install

    npm install --save-dev storybook-readme

    or

    yarn add --dev storybook-readme

    Webpack Configuration for React Storybook

    Nothing to do :)

    Webpack Configuration for Vue Storybook

    Only if using Single File Components and want to use <docs> tag at storybook documentation.

    module.exports = storybookBaseConfig => {
      storybookBaseConfig.module.rules.push({
        resourceQuery: /blockType=docs/,
        use: ['storybook-readme/vue/docs-loader', 'html-loader', 'markdown-loader'],
      });
    };

    Define <docs> tag inside vue module:

    <docs>
    Docs inside vue module 
    </docs>
     
    <template>
      <button class="button">
        <slot></slot>
      </button>
    </template>

    Use it to defone docs at story:

    import MyButton from '../components/MyButton/MyButton.vue';
     
    storiesOf('Vue <docs>', module).addParameters({
      readme: {
        content: MyButton.__docs,
      },
    });

    Setup

    Register addon at .storybook/addons.js

    import 'storybook-readme/register';

    Add decorator at .storybook/config.js

    import { addReadme } from 'storybook-readme';
    addDecorator(addReadme);

    Usage

    Hope it is very simple.

    import React from 'react';
    import { storiesOf } from '@storybook/react';
     
    import Button from '../components/Button';
    import ButtonReadme from '../components/Button/README.md';
     
    storiesOf('Buttons', module)
      .addDecorator(withKnobs)
      .addParameters({
        readme: {
          // Show readme before story
          content: ButtonReadme,
          // Show readme at the addons panel
          sidebar: ButtonReadme,
        },
      })
      .add('Button', () => <Button />);

    It is possible to override docs for story

    import React from 'react';
    import { storiesOf } from '@storybook/react';
     
    import Button from '../components/Button';
    import ButtonReadme from '../components/Button/README.md';
     
    storiesOf('Buttons', module)
      .addDecorator(withKnobs)
      .addParameters({
        readme: {
          content: ButtonReadme,
          sidebar: ButtonReadme,
        },
      })
      .add('Button', () => <Button />)
      .add('Button', () => <Button />)
      .add('Button', () => <Button />, {
        readme: {
          // override docs
          content: CustomButtonReadme,
          sidebar: CustomButtonReadme,
        },
      });

    Full list of options

    Will be applied for series of stories.

    .addParameters({
        readme: {
          /**
           * Accepts string (markdown) or array of strings
           * string | Array<string>
           */
          content: Readme,
     
          /**
           * Accepts string (markdown) or array of strings
           * string | Array<string>
           */
          sidebar: Readme,
     
          /**
           * Override theme values
           *
           * All theme values https://github.com/tuchk4/storybook-readme/blob/master/packages/storybook-readme/src/styles/githubMarkdownCss.js#L436
           */
          theme: {},
     
          /**
           * Highlightjs code theme
           * Import theme at _.storybook/config.js_.
           * Full list of theme https://highlightjs.org/static/demo/.
           */
          codeTheme: 'github',
     
          /**
           * Wrapper for story. Usually used to set some styles
           * NOTE: will be applied only for content docs (docs around the story)
           *
           * React: React.ReactNode
           * Vue: Vue component
           */
          StoryPreview: ({ children}) => <div>{children}</div>
     
          /**
           * Wrapper for hedaer docs. Usually used to set some styles
           * NOTE: will be applied only for content docs (docs around the story)
           *
           * React: React.ReactNode
           * Vue: Vue component
           */
          HeaderPreview: ({ children}) => <div>{children}</div>
     
          /**
           * Wrapper for footer docs. Usually used to set some styles
           * NOTE: will be applied only for content docs (docs around the story)
           *
           * React: React.ReactNode
           * Vue: Vue component
           */
          FooterPreview: ({ children}) => <div>{children}</div>
     
          /**
           * Wrapper for content and sidebar docs. Usually used to set some styles
           * NOTE: will be applied only for content docs (docs around the story)
           *
           * React: React.ReactNode
           * Vue: Vue component
           */
          DocPreview: ({ children}) => <div>{children}</div>
        },
      })

    Global configuration

    Will be applied for all stories. NOTE: that global configuration is applied only for content docs (docs around the story).

    import { configureReadme } from 'storybook-readme';
     
    configureReadme({
      /**
       * Wrapper for story. Usually used to set some styles
       * React: React.ReactNode
       * Vue: Vue component
       */
      StoryPreview: ({ children }) => <div>{children}</div>,
     
      /**
       * Wrapper for content and sidebar docs. Usually used to set some styles
       * React: React.ReactNode
       * Vue: Vue component
       */
      DocPreview: ({ children }) => (
        <div style={{ background: '#000' }}> {children}</div>
      ),
     
      /**
       * Wrapper for hedaer docs. Usually used to set some styles
       * React: React.ReactNode
       * Vue: Vue component
       */
      HeaderPreview: ({ children }) => (
        <div style={{ background: 'red' }}>{children}</div>
      ),
     
      /**
       * Wrapper for footer docs. Usually used to set some styles
       * React: React.ReactNode
       * Vue: Vue component
       */
      FooterPreview: ({ children }) => <div>{children}</div>,
     
      /**
       * Header docs in markdown format
       */
      header: '',
     
      /**
       * Footer docs in markdown format
       */
      footer: '',
    });

    Readme placeholders

    • <!-- STORY --> placeholder for story
    • <!-- PROPS --> placeholder for props table
    Button variants could be imported separately.
     
    \`\`\`js import { OutlinedButton, ContainedButton, TextButton } from 'Button'; \`\`\`
     
    <!-- PROPS -->
     
    Example:
     
    <!-- STORY -->
     
    Some docs after story

    Emoji

    Use shortcodes between colon to insert emoji into the docs. For example

    Here is rocket 🚀

    Here is rocket 🚀

    List of all shortcodes could be found at Emojipedia or at Gist/rxaviers

    • 🚀
    • 😀
    • 🐒

    Fell free to suggest new features or report bugs :)

    Install

    npm i storybook-readme

    DownloadsWeekly Downloads

    50,296

    Version

    5.0.9

    License

    MIT

    Unpacked Size

    335 kB

    Total Files

    149

    Last publish

    Collaborators

    • avatar
    • avatar