Document the props of your components in storybook.
Why not react-storybook-addon-info ?
Quite simple, because he doesn't handle fela correctly and i use it on my project.
Install storybook-addon-props-fela
:
yarn add storybook-addon-props-fela
// OR
npm i --save storybook-addon-props-fela
Then in your storybook import and add the addon :
import { setAddon, storiesOf } from '@kadira/storybook';
import PropsAddon from 'storybook-addon-props-fela';
setAddon(PropsAddon);
Once you added the addon, a new method is available for your stories addWithProps
.
addWithProps
is the same as the default function of storybook add
except the fact that it takes a third parameter. This third parameters is the component from which you want the props.
To use the full power of this addon, your component need to provide propTypes
and defaultProps
.
The addon support flow and use it for the required property (it's quite a minimum support for now, i think we can do more with flow later).
import React, { PropTypes } from 'react';
import { setAddon, storiesOf } from '@kadira/storybook';
import { createComponent } from 'react-fela';
import initFelaProvider from './initFela';
import PropsAddon from '../../lib/index';
const FelaProvider = initFelaProvider();
const test = ({ color }) => ({
fontSize: 35,
color,
});
const Test = createComponent(test, 'h1');
Test.defaultProps = { color: '#333' };
Test.propsTypes = {
color: PropTypes.string,
};
setAddon(PropsAddon);
storiesOf('test', module)
.addDecorator(FelaProvider)
.addWithProps(
'Paris',
() => <Test fontSize={45} fontFamily="Roboto" align="center" color="#CAF200">Hello</Test>,
Test,
)
.addWithProps('Orleans', () => <Test color="#236544">Hello</Test>, Test);
storiesOf('test 2', module).addWithProps('Paris', () => <div color="#333">test</div>);
If your component is enhanced with a decorator for example, you'll need to pass the rawComponent.
For example for a component like this:
import React, {PropTypes} from 'react';
import {createComponent, connect} from 'react-fela';
import R from 'ramda';
import getContextThemeDecorator from 'layout/themes/getContextThemeDecorator.react';
import {Text} from 'components/baseComponents';
const badge = ({theme}: BadgeProps) => ({
position: 'absolute',
top: 0,
right: 0,
opacity: 0.85,
color: 'white',
padding: '3px 10px',
borderRadius: '20%/50%',
transform: 'translate(50%)',
lineHeight: 1,
overflow: 'hidden',
whiteSpace: 'nowrap',
});
const container = ({small, tiny}: ContainerProps) => ({
display: 'flex',
position: 'relative',
width: small ? 45 : tiny ? 25 : 70,
height: small ? 45 : tiny ? 25 : 70,
});
const Badge = createComponent(badge, Text);
const Container = createComponent(container, 'div');
export const Avatar = ({badge, border, small, tiny, theme, ...props}) => (
<Container {...props}>
<DefaultAvatar {...{border, small, tiny}} />
{badge ? <Badge {...{theme}}>{badge}</Badge> : null}
</Container>
);
Avatar.defaultProps = {
border: true,
};
Avatar.propTypes = {
avatar: PropTypes.string,
badge: PropTypes.string,
border: PropTypes.bool,
small: PropTypes.bool,
tiny: PropTypes.bool,
};
const enhance = R.pipe(getContextThemeDecorator);
export default enhance(Avatar);
you write your story like this :
import React from 'react';
import {storiesOf} from '@kadira/storybook';
import Avatar, {Avatar as RawAvatar} from 'components/material/avatar.react';
export default FelaProvider =>
storiesOf('Avatar', module)
.addDecorator(FelaProvider)
.addWithProps('without picture', () => <Avatar />, RawAvatar)
.addWithProps('without picture small', () => <Avatar small />, RawAvatar)
.addWithProps('without picture tiny', () => <Avatar tiny />, RawAvatar)
.addWithProps(
'with picture',
() => <Avatar avatar="http://placehold.it/150x150" />,
RawAvatar,
)
[...]
.addWithProps('with badge', () => <Avatar badge="0 pts" />, RawAvatar);
Show the story with the props.