Storybook groups brainstorm

index.js

import React from 'react';
import { storiesOf, action, linkTo, getStorybook } from '@kadira/storybook';
import Button from './Button';
import Welcome from './Welcome';
import { WithNotes } from '../notes-addon';
// import { addGroups, Group } from 'storybook-groups';


const Group = ({ children }) => React.Children.only(children);

const css = {
  padding: 10,
  border: '2px solid black',
};

function addGroups(storiesOf, m) {
  const stories = getStorybook();
  // Object<string, Object<string, React$Component[]>>
  const kinds = stories.reduce((acc, next) => Object.assign({}, acc, {
    [next.kind]: next.stories
      .map(story => story.render())
      .filter(node => node.type === Group)
      .reduce((acc, node) => {
        // side effects
        if (acc[node.props.name]) {
          acc[node.props.name].push(node.props.children);
          return acc;
        }

        acc[node.props.name] = [node.props.children];
        return acc;
      }, {}),
  }), {});

  Object
    .keys(kinds)
    .forEach(kind => {
      storiesOf(kind, m)
        .add('All', () => (
          <div>
            {Object.keys(kinds[kind]).map(name => (
              <div style={css} key={name}>
                <h3>{name}</h3>
                {kinds[kind][name]}
              </div>
            ))}
          </div>
        ));
    });
}

storiesOf('Welcome', module)
    .add('to Storybook', () => (
        <Welcome showApp={linkTo('Button')} />
    ));

storiesOf('Button', module)
    .add('with text', () => (
        <Group name="buttons">
            <Button onClick={action('clicked')}>Hello Button</Button>
        </Group>
    ))
    .add('with some emoji', () => (
        <Group name="buttons">
            <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>
        </Group>
    ));

addGroups(storiesOf, module);