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

[cameronhimself]

trafficstars

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]

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.