Old Storybook Style Story Tree

[webOS101]

Issue details

Please provide issue details here - What did you expect to happen? What happened instead? In the newest versions of Storybook, clicking on a category no longer opens up the first story associated with that category. We used to have a category (storiesOf()) and each category had only a single entry with an empty (' ') title. This worked fairly well for our use case. Is it possible to reproduce this style? Or, is it possible to have a root story node (empty category)?

Steps to reproduce

Please provide necessary steps for reproduction of this issue. Describe the exact steps a maintainer has to take to make the problem occur. If the problem is non-trivial to reproduce, please link a repository or provide some code snippets.

(A screencast can be useful for visual bugs, but it is not a substitute for a textual description.)

Create a story with an empty title on Storybook 2 and compare with Storybook 3.

Please specify which version of Storybook and optionally any affected addons that you're running

• @storybook/react 3.3.10

Affected platforms

• If UI related, please indicate browser, OS, and version
• If dependency related, please include relevant version numbers
• If developer tooling related, please include the platform information

Screenshots / Screencast / Code Snippets (Optional)

storiesOf('About', module)
    .add(
        ' ',
        withInfo('A Tour of Sampler')(() => (
...

[Hypnosphi]

CC: @igor-dv

What do you think about supporting top-level ("kindless") stories?

[igor-dv]

I think we can add support for it, but need to think how to make it less ugly and in the line with existing API.

[Hypnosphi]

import {add} from '@storybook/react'?

[igor-dv]

@Hypnosphi I think it looks more like a new api... I would like somehow to use an existing one... Maybe to be able to do something like

storiesOf(module)
    .add('Story' () => {});

But I don't like it either =(

[PinkaminaDianePie]

This bug makes navigation twice as hard. Each time 2 clicks instead of one :(

[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!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[Grsmto]

Coming from Docz, that would be really welcome!

It's quite obvious that this is a big UX issue both from dev and user experience when you see that you have to do this to display a homepage:

There seem to be a couple of issue referencing this one so I suppose this is a need from the community. What would be the effort to implement this? Or maybe there is a higher plan for menu/navigation customisation that we are not aware of?

[shilman]

cc @domyen

[domyen]

TLDR: I think we should stick with the current treeview behavior. The proposed behavior is a better fit for the upcoming Storybook Docs feature not Storybook the dev environment.

There are two common SB use cases:

1. Isolated UI Component development
2. Component library documentation

Currently, Storybook is intended for 1. isolated component development – helping devs create components. The more folks get into 2. component library documentation, the less ideal Storybook is (for now!). This issue is an example where the use cases are blurred thus causing a split on what's the best user experience.

If you're using SB for 1, the current treeview behavior is ideal. It's easy to predict what's going to happen if you click on a collapsed list item – you will expand it and reveal it's contents. This is identical behavior as the treeview in VSCode, OSX Finder, Windows Explorer etc. suffice to say it's a pretty universal pattern. I think we should stick with it.

If you're using SB for 2, the current treeview behavior results in an extra click. I remember the previous behavior is SB2.0 and def appreciate that it can be annoying for this use case. I think the old behavior is ideal for a docs site, where clicking on a list item, reveals different "sections" inside that list item.

For example: clicking "The Vue Instance" reveals a bunch of sections of the doc and effectively shows you the first section without an extra click.

The good news is that we're building a new documentation-mode where we should definitely consider the click-to-auto-view-first-story treeview behavior (perhaps as an option?). This would help folks expecting a sidebar nav similar to Docz or Styleguidist.

[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!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[stephiescastle]

The good news is that we're building a new documentation-mode where we should definitely consider the click-to-auto-view-first-story treeview behavior (perhaps as an option?). This would help folks expecting a sidebar nav similar to Docz or Styleguidist.

@domyen Is this still being considered? This is still a UX issue for our team.

[shilman]

@stephiescastle The original request to auto-navigate to the first story in the component has been fixed already (in 5.x). We're also planning to overhaul Storybook Docs and the future behavior could be closer to what you're looking for. That said, we haven't figured that out yet, nor do we have a specific timeline for those improvements yet.

Any feedback on what specifically you'd like to see would be much appreciated! 🙏

[stephiescastle]

@shilman Thanks for the update! I should have elaborated. Clicking on a component does auto-navigate to its first story, but what we'd like is to have the first item within a data-nodetype="group" to be active when expanding that group. This is to avoid two clicks to view something within that group. Should I open up a new issue?