React Storybook - Kitchen Sink

config.js

import { configure } from '@kadira/storybook'

import 'lib/semantic-ui/semantic-ui.global.less'

// Our project follows the convention of co-locating components with their stories. For example:
// Component/
//   Component.js
//   Component.spec.js
//   Component.stories.js
//   index.js
const req = require.context('../src', true, /.stories.js$/)

/**
 * @returns {void}
 */
function loadStories () {
  // Load all stories
  req.keys().forEach(req)

  // Load the "Kitchen Sink" story
  require('./KitchenSink.stories.js')
}

configure(loadStories, module)

KitchenSink.stories.js

// This is using Semantic-UI-React for a grid system but the rendering can be handled however you want.

import { getStorybook, storiesOf } from '@kadira/storybook'
import { Grid, Header } from 'semantic-ui-react'

// Avoid infinite loop
const KITCHEN_SINK_TITLE = 'Kitchen Sink'

const renderStory = (story) => (
  <Grid.Row key={story.name} style={{ marginBottom: '1rem' }}>
    <Grid.Column>
      <Header as='h2' content={story.name} />
      {story.render()}
    </Grid.Column>
  </Grid.Row>
)

const renderStoryGroup = (group) => (group.kind !== KITCHEN_SINK_TITLE &&
  <Grid.Column key={group.kind}>
    <Header as='h1' content={group.kind} />
    {group.stories.map(renderStory)}
  </Grid.Column>
)

storiesOf('Kitchen Sink', module)
  .add('everything', () => (
    <Grid padded columns={1}>
      {getStorybook().map(renderStoryGroup)}
    </Grid>
  ))