Export stories as components

This issue is for tracking the effort of exporting Storybook story code as React components.

CC @jendowns

Summary/Justification

Some business units have created a design system based on Carbon. For such Carbon-based design systems, they have their own storybook but want to use some stories from Carbon.

Detailed design and usage example

This effort introduces modules like:

export default ({ ...props }) => (
  <div>
    <Button {...props} className="some-class">
      Button
    </Button>
    <Button {...props} href="#" className="some-class">
      Link
    </Button>
  </div>
);

Using that, Carbon-based design system can create a story like:

import ButtonStory from '/path/to/button-story';

storiesOf('Buttons', module)
  .add(
    'Default',
    () => (<ButtonStory data-foo="Foo" />));

Specific timeline issues / requests

N/A

[tay1orjones]

5.2 is out! 🎉

[tay1orjones]

We’d also like to see this for use in our Watson IoT addons.

Instances where we are simply wanting to render the story as-is, I have found that we can import the story from node_modules and then re-export it from a story file in our project. There’s some oddities with story source rendering and prop tables, but gives us a starting point.

Something we’d like to do in our storybook is divide “stock” carbon components (re-exported components without modifications) from “extended/custom” components via the hierarchySeparator. This currently isn’t possible as there isn’t a way to modify the story name.