Export stories as components

[asudoh]

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

[SimonFinney]

@asudoh Thanks for putting this together - is there any chance of prioritizing this in the near future?

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. Thanks for your contributions.

[asudoh]

Keeping with maintainer's interest.

[carbon-bot]

Hi there! 👋 If you're wondering why this issue was moved, we're currently updating our repo structure so that every package is found in the same project.

This should not have any impact for you, but we wanted to give you a heads up in case you were wondering what is going on. If you have any questions, feel free to reach out to us on Slack or contact us at: [email protected]. Thanks!

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[jendowns]

Could we keep this open please? Would love to be able to import stories into our addons library 🤩

[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.

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[jendowns]

Please keep this open 🙏

[tay1orjones]

Storybook's new Component Story Format should provide a path to portable stories once v5.2 is stable.

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[jendowns]

Please keep this open 🙏

[tw15egan]

Keeping an eye on https://github.com/storybookjs/storybook/releases for a stable 5.2 👀

[tay1orjones]

5.2 is out! 🎉

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[tay1orjones]

Please keep this open 🙏

Storybook was recently updated to 5.2 in #4192. Are there any required items beyond refactoring stories to CSF and exporting them?

[asudoh]

Weighing in; I've been under an impression that CSF is designed for static stories. Most of our stories OTOH are parameterized via knobs.

[tay1orjones]

Everything in the storiesOf API has a direct equivalent in CSF. It works with all the official addons, including knobs. Example from the react storybook

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[tay1orjones]

I can help refactor some stories if there's an agreed upon direction. Storybook also has some codemods we could take advantage of to assist with the process.

[asudoh]

Hi 👋 thank you for your willingness for contribution! The biggest thing is making story exports don't run knob code, so those reused stories can run without knobs. While I still don't find any official direction from Storybook team on this front, putting knob setup code in story parameters and evaluating such knobs in story parameters in a decorator would be one idea.

[joshblack]

Closed by #6663