Adding a new component to storybook - onap-sdc/sdc-ui GitHub Wiki

Adding a new component to storybook

To add your new component to storybook, follow the steps in this document. Make sure that you added your component to the library as described in Adding a new component. We will continue from where we took off, pretending to add our new component, MyComponent, to storybook.

1. Create the story

under stories directory at the root of the project, create a new file called MyComponents.js or MyComponent.js, depends on whether your component has multiple or one visual style, respectively.

Inside that file, there are some important imports:

// stories/MyComponents.stories.js

import React from 'react';
import Examples from './utils/Examples.js' // The Examples util component, responsible for rendering

import ReactMyComponent from '../src/react/MyComponent.js' // Explicitly using React in the name diffs it from Angular2

// HTML templates
import HTMLMyComponentDefault from '../components/myComponent/myComponent-default.html'
import HTMLMyComponentDark from '../components/myComponent/myComponent-dark.html' // Say MyComponent has a dark theme

Next, we need to build the configuration object for the Examples component. The configuration object has the following form (the parts that are in italic means they are to be replaced):

{
    *first description*: {
        jsx: ...,
        html: ...,
        angular2: ...
    },
    *first description*: {
        jsx: ...,
        html: ...,
        angular2: ...
    },
    ...
}

In our examples, it will look like this:

// stories/MyComponents.stories.js

let examples = {
    Default: {
        jsx: <ReactMyComponent />
        html: HTMLMyComponentDefault
    },
    Dark: {
        jsx: <ReactMyComponent type='dark'/>
        html: HTMLMyComponentDark
    }
}

After we built the configuration object, we need to define the story and export it:

// stories/MyComponents.stories.js

const MyComponents = () => (
    <Examples examples={examples} />
)

export default MyComponents;

2. Attaching your new story to index.js

The final step is to connect your new story to index.js. It is pretty straightforward:

// stories/index.js
import React from 'react';
import {storiesOf, action} from '@kadira/storybook';
import Welcome from './Welcome.stories.js';
+ import MyComponents from './MyComponents.stories.js';

storiesOf('Welcome', module)
	.add('', () => <Welcome />);

+ storiesOf('MyComponents', module)
+        .add('', () => <MyComponents />);

3. Run storybook

The final step is to run storybook and make sure everything is working. just run npm run storybook to get a local server running, and direct your browser to the outputted address.

If you want to deploy storybook to your fork's github pages, follow Deploying storybook to a fork's github pages.

⚠️ **GitHub.com Fallback** ⚠️