Story Bricks

This is the set of simple but useful components that helps to organize a description of any React component. For example, you can use it to create a component story in Storybook.

See the list of the components and their descriptions in the docs.

The appearance is inspired by React Native Web Storybook.

Getting Started

To install run

$ npm install --save-dev story-bricks

That's it. Now just use the bricks to build a story!

import React from 'react';
import { storiesOf } from '@storybook/react';
import { Description, Story, Title } from 'story-bricks';
 
storiesOf('My Project', module)
    .add('MyComponent', () => <Story>
        <Title>MyComponent</Title>
 
        <Description>
            My awesome component!
        </Description>
    </Story>);

Tips and tricks

Component's calculated JSX looks different from your actual source JSX.

For example, instead of the <MyComponent /> you see something like

<No Display Name>
    test
</No Display Name>

or

<src_MyComponent>
    test
</src_MyComponent>

Solution: It's because of your transpiler that transforms module default export's name. Just add a displayName to your component.

I decorate my component or use a HOC, and calculated JSX shows it.

For example, the <Button /> from Material UI looks like

<WithStyles(Button)>
    test
</WithStyles(Button)>

Solution: Save or re-export your component as the constant or class with a desired name, e.g.

export const Button = props => <MaterialUIButton {...props} />;