Component description detection doesn't work well with the Component Story Format (CSF)
Opened this issue · 1 comments
When using CSF with Storybook there's no natural way to get the component description detection to work. Let's take a component called ExampleButton
:
import { ExampleButton } from './components';
export default { title: 'Example Package' };
export const ExampleButton = () => <ExampleButton />; // <--- error
Oops, local ExampleButton
definition conflicts with the imported component. Let's try again:
import { ExampleButton as ExampleButtonComponent } from './components';
export default { title: 'Example Package' };
export const ExampleButton = () => <ExampleButtonComponent />;
Hm, still no description of the component. Oh, the name is being humanized to 'Example Button' (added space). Third try:
import { ExampleButton } from './components';
export default { title: 'Example Package' };
export const ExampleButtonStory = () => <ExampleButton />;
ExampleButtonStory.story = { name: 'ExampleButton' };
And finally it works.
It would be nice if it were possible to get component descriptions without undoing the humanization and requiring the story = {}
boilerplate everywhere.
This other thread (storybookjs/storybook#7677) seems like an important one to keep track of so that we can ensure that react-docgen-typescript-loader
handles the type correctly.
So if we ensure that we use the TypeScript interface that is created as a result of storybookjs/storybook#7677 then we can ensure that we're in-sync with the Storybook team.