allowing component directories to contain there own stories for storybook. A component directory should now contain index.js, story.js and readme.md

This commit is contained in:
Alex Windett 2017-01-11 12:28:45 +00:00
parent 62b7524e53
commit 900268ab27
3 changed files with 52 additions and 22 deletions

View File

@ -1,7 +1,10 @@
const { configure } = require('@kadira/storybook'); const { configure } = require('@kadira/storybook');
const req = require.context('../src/components', true, /story.js$/)
function loadStories() { function loadStories() {
req.keys().forEach((filename) => req(filename));
require('../stories'); require('../stories');
} }
configure(loadStories, module); configure(loadStories, module);

View File

@ -0,0 +1,27 @@
const React = require('react');
const {
storiesOf
} = require('@kadira/storybook');
const Button = require('./');
storiesOf('Button', module)
.add('With text', () => (
<Button>
Inspire the lazy
</Button>
)).add('Secondary', () => (
<Button secondary>
Inspire the brave
</Button>
)).add('Disabled', () => (
<Button disabled>
Inspire the liars
</Button>
)).add('Anchor', () => (
<div>
<Button href='#'>
Inspire the anchor
</Button>
</div>
));

View File

@ -7,7 +7,7 @@ const {
const { const {
Base, Base,
Button, // Button,
Container, Container,
Checkbox, Checkbox,
Row, Row,
@ -178,26 +178,26 @@ storiesOf('Avatar', module)
</Base> </Base>
)); ));
storiesOf('Button', module) // storiesOf('Button', module)
.add('With text', () => ( // .add('With text', () => (
<Button> // <Button>
Inspire the lazy // Inspire the lazy
</Button> // </Button>
)).add('Secondary', () => ( // )).add('Secondary', () => (
<Button secondary> // <Button secondary>
Inspire the brave // Inspire the brave
</Button> // </Button>
)).add('Disabled', () => ( // )).add('Disabled', () => (
<Button disabled> // <Button disabled>
Inspire the liars // Inspire the liars
</Button> // </Button>
)).add('Anchor', () => ( // )).add('Anchor', () => (
<div> // <div>
<Button href='#'> // <Button href='#'>
Inspire the anchor // Inspire the anchor
</Button> // </Button>
</div> // </div>
)); // ));
storiesOf('Checkbox', module) storiesOf('Checkbox', module)
.add('Default', () => ( .add('Default', () => (