New
Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Star82,067
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-any-info
npm install storybook-any-info
0
Downloads per week
Readme View on GitHub

storybook-any-info

NPM version NPM downloads

This is an addon to render your Stories as full-featured markdown documentation with a storybook. Allows to render source template near the live example.

Addon was tested with version 4.0.0 of a storybook.

screenshot.png

TOC

Install

npm install storybook-any-info --save-dev

Prerequisites = WARNING

  • That addon modifies your story output.
  • Currently only template-stories supported.
  • Addon is not covered with tests yet, use it wisely :)

There are tasks to fix some issues. Soon TODO list will be moved to GitHub issues.

Usage

  1. Write markdown file near your story.

  2. Import *.md file to your story, check if build will not fail. (Find Angular workaround in the bottom of the docs)

  3. Add decorator and parameters.

    .addDecorator(withAnyInfo)
    .addParameters({
        anyinfo: {
            customStyles: "div {background: #0f0;}",
            markdown: "## Custom markdown header",
        }
    })
    

Parameters

Here are options for anyinfo parameter:

name type required
customStyles string No
markdown string No

Example

This is a final example with Angular:

import { withAnyInfo } from "storybook-any-info";
import * as markdown from "./README.md"; // Related docs file
import { Button } from "@storybook/angular/demo"; // Do not forget to replace with your component

storiesOf("Button", module)
  .addDecorator(withAnyInfo)
  .addParameters({
    anyinfo: {
      customStyles: "div {background: #0f0;}",
      markdown: "## Custom markdown header"
    }
  })
  .add("with text", () => ({
    moduleMetadata: {
      declarations: [Button]
    },
    template: `<storybook-button-component [text]="text"></storybook-button-component>`,
    props: {
      text: "Hello Button"
    }
  }));

CSS styling

You can setup your own styling, or use predefined one from exported variable storyStyles.

Support Markdown docs for Angular

Add types.d.ts with next content to .storybook directory:

declare module "*.md" {
  const value: string;
  export default value;
}

And add it to your .storybook/tsconfig.json:

{
  // ...
  "include": [
    "./types.d.ts"
    // ...
  ]
}
Join the community
6,501 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI