search

strothj / react-docgen-typescript-loader

Webpack loader to generate docgen information from Typescript React components.
Other
360 stars 47 forks source link

Component description detection doesn't work well with the Component Story Format (CSF) #85

Open cameronhimself opened 4 years ago

cameronhimself commented 4 years ago

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.

dgreene1 commented 4 years ago

This other thread (https://github.com/storybookjs/storybook/issues/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 https://github.com/storybookjs/storybook/issues/7677 then we can ensure that we're in-sync with the Storybook team.