Storybook: UI: Option to collapse single-story components

[klangfarbe]

Hi,

currently I migrate to Storybook 5.2 and update all stories to the new CSF. I recognised that it isn't possible to reuse a story title for grouping simple stories as you could before with storiesOf.

For example: If you have a group atoms and some simple components belonging to that group, e.g. a checkbox and a radio button with one story for each component, you must specify a unique name as a title since the stories are located in different source files. This leads to unnecessary and ugly folder structures with only one entry inside:

Instead what I would like to have is this:

This behaviour currently can only be achieved with some index.stories.js file with transient exports of all stories from the sub-stories and one default export:

export default {
  title: "Form Elements|Atoms"
};

export * from "./Checkbox.stories";
export * from "./FormField.stories";
export * from "./Radio.stories";

While FormSelect has multiple stories exported and therefore a default export like

export default {
  title: "Form Elements|Atoms/FormSelect"
}

export const defaultStory = ...
export const placeholder = ...
export const customSlot = ...

My suggestion would be to create folders in the component tree only, if there are multiple stories exported. Otherwise the title from the default export should be used as the story title:

export default {
  title: "Form Elements|Atoms/CheckBox"
}

export const onlyOneStory = ...

Here the visible story would have the name CheckBox instead of Only One Story. If we add another story to the file, the UI creates the folder CheckBox containing both stories. The benefit would be that you still can group stories from different simple components and keep the requirement to have a unique title in a default export in each story-file.

Best regards,
Chris

[shilman]

Related: #8035 #7700

We definitely wouldn't make this the default behavior since it would be a breaking change. I'm open to the idea of making it opt-in, though, since it seems to be a frequently requested feature.

You can also achieve this with https://github.com/storybookjs/storybook/pull/8133

[klangfarbe]

Thanks for the info, I will check out #8133. Would be good if this could be an opt-in functionality.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[fernandopasik]

The feature from https://github.com/storybookjs/storybook/pull/8133 can provide a possible solution, but you end up with all your stories having the same title

export default {
  component: MyComponent,
  title: 'My grouped stories',
}

export const myComponent => () =>

from the maintainability perspective seems not great to repeat the title in every story

[tmeasday]

@ghengeveld can we add this feature to the sidebar work you've been doing?

[ghengeveld]

I discussed this with @shilman today. We're inclined to implement the following:

• IF a component has exactly one story
• AND the _displayed_ story name exactly matches the _displayed_ component name
• Hide the component node in the tree view
• Show the story node instead

We think this should be the built-in behavior, without any opt-in/opt-out configuration.

This behavior is similar to _docs-only_ mode, except that docs-only hides the stories and applies to all components. It also changes the icon. Naturally the above therefore does not apply to docs-only mode because the two behaviors are incompatible.

[thany]

Yes please! After upgrading from storiesOf() notation to CSF, the titles must be unqiue per stories-file, which wasn't the case in storiesOf-notation. So now I had to make them unique, basically putting every story one level deeper in the stories tree.

For example, I had to go from:

storiesOf('Foundation').add('Button' ...)
storiesOf('Foundation').add('Input' ...)
storiesOf('Foundation').add('Text' ...)

to:

export default { title: 'Foundation/Button' } Story.story = { name: 'default' };
export default { title: 'Foundation/Input' } Story.story = { name: 'default' };
export default { title: 'Foundation/Text' } Story.story = { name: 'default' };

So this:

\- Foundation
   |- Button
   |- Input
   \- Text

Now has to become something like this:

\- Foundation
   |- Button
   |  \- default
   |- Input
   |  \- default
   \- Text
      \- default

Unless I put all those stories in one file, which the documentation recommends against 😫 So what then??

[ghengeveld]

@klangfarbe @fernandopasik @thany Please take a look: https://github.com/storybookjs/storybook/pull/13039

[shilman]

Ermahgerd!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-beta.5 containing PR #13039 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.