Storybook: What is the purpose of the component property in CSF?

Created on 24 Oct 2019 · 5Comments · Source: storybookjs/storybook

This is just a question, not a bug report; I've scoured the docs looking for an answer but haven't found any. The docs state that a CSF module should default-export a metadata object like

export default {
  title: 'Path|To/MyComponent',
  component: MyComponent,
  decorators: [ ... ],
  parameters: { ... }
}

What is the purpose of the component property? I've seen elsewhere that it is omitted, and I can't tell what value it adds.

csf question / support

Source

pelotom

👍4

Most helpful comment

Right now, it's only used in addon-docs. DocsPage uses it to automatically extract the props table & description of the component. However, it will get a lot more use in the future.

For example, stories for many non-react frameworks currently look like this:

export const basic = () => ({
  component: Blah
  template: '<blah>blah</blah>'
})
export const disabled = () => ({
  component: Blah
  template: '<blah :disabled=true>disabled</blah>'
})

Other uses include addons that want to associate component-related statistics on top of the stories. For example, I recently prototyped a code coverage addon that relies on component.

shilman on 24 Oct 2019

👍5

All 5 comments

Right now, it's only used in addon-docs. DocsPage uses it to automatically extract the props table & description of the component. However, it will get a lot more use in the future.

For example, stories for many non-react frameworks currently look like this:

export const basic = () => ({
  component: Blah
  template: '<blah>blah</blah>'
})
export const disabled = () => ({
  component: Blah
  template: '<blah :disabled=true>disabled</blah>'
})

Other uses include addons that want to associate component-related statistics on top of the stories. For example, I recently prototyped a code coverage addon that relies on component.

shilman on 24 Oct 2019

👍5

Thanks for the answer!

pelotom on 24 Oct 2019

May I politely suggest that the docs on CSF mention that this is optional, and its purpose (either planned or current) a bit more explicitly?

I, too, was quite lost until now about this. At least, it could be mentioned that it is optional, which I've only gained from some examples scattered around the internet.

My intuition is to use stories maybe not the way they are intended - where the default export (the title in the sidebar for the story) would be something like "Inputs" and I'd have several input designs under that. adding a component to the default export doesn't make much sense for that use case, but if I'm not intending to use e.g. addon-docs this (at least to me) seems like a reasonable way to utilize the story hierarchy.

Thanks!

edit: And as a TypeScript dev, I find myself looking for an explicit definition of what these default and non-default exports are supposed to look like. Is there such a thing?


export default {
  title: 'Welcome',
  component: Welcome,
}

export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />

ToStorybook.story = {
  name: 'to Storybook',
}

is what Storybook starts you out with, which at least hints at a few types, but this just leaves me wondering what other configurations are valid. For instance, I noticed if you don't define Foo.story.name where Foo is a React Component, Storybook shows the React Component's displayName on the sidebar. https://storybook.js.org/docs/formats/component-story-format/ gets pretty close to what I'm asking for, but I'm wondering if there is something more complete out there.