Then create your stories with the .addWithHOC API.
importReactfrom'react';
importTextFieldfrom'./TextField';
importwithStatefrom'recompose/withState';
import{storiesOf,action}from'@kadira/storybook';
storiesOf('TextField')
.addWithHOC(
'simple usage',
`
This is the basic usage with the TextField
`,
withState('value','onChange','init value'),
TextField,
({ value, onChange})=>(
<TextField value={value} onChange={onChange}/>
)
);
Have a look at this example stories to learn more about the addWithInfo API.
Use with Docgen
We may add the description to prop. For example:
Object.assign(Button,{
displayName:'Button',
propTypes:{
/** Single line comment: This is label description */
label:React.PropTypes.string.isRequired,
/*
* Multiple lines comment: This is style description
* Must be in object
*/
style:React.PropTypes.object,
disabled:React.PropTypes.bool,
onClick:React.PropTypes.func,
},
});
The FAQ
Components lose their names on static build
Component names also get minified with other javascript code when building for production. When creating components, set the displayName static property to show the correct component name on static builds.