Add back in ability to search for stories

[kharrop]

Is your feature request related to a problem? Please describe
In the new Storybook (6.1+), users can no longer search by story name, which is how users primarily used one of our Storybooks.

Describe the solution you'd like
Allow the user to filter their search options by all or components only instead of having that controlled by a config setting.

Describe alternatives you've considered
Converting all our stories into individual *.stories.mdx (these are searchable even though technically not components), which is not ideal.

Are you able to assist to bring the feature to reality?
Yes

Additional context
A few ideas:

Robust dropdown

Filters as part of the search

[yannbf]

cc @ghengeveld

[robertwbradford]

We have a similar situation in Storybook for a component library with 250+ components. With the 6.1 upgrade it looks like I'm needing to choose between a non-functioning search or breaking all the URLs—neither of which is ideal.

Our component library is a monorepo with multiple packages. Each of these packages contains (among other stories) a single "Demo" component. For this "overview" Storybook, we are dynamically generating stories from each of these "Demo" components where each component is part of a "category."

Since we are needing to do this dynamically, we still have to use the storiesOf API (similar to this guidance). Essentially we end up with something like the following:

storiesOf("Base", module)
  .add("my-badge", ...)
  .add("my-buttons", ...)
  // ...

storiesOf("Layout", module)
  .add("my-grid", ...)
  .add("my-masonry-grid", ...)
  // ...

// ...

We then end up with URLs like the following:

• /?path=/story/base--my-badge
• /?path=/story/base--my-buttons
• /?path=/story/layout--my-grid
• /?path=/story/layout--my-masonry-grid

However, with 6.1, users are no longer able to search for "buttons" because it only searches against the "Base" and "Layout" terms. I started reorganizing like the following:

storiesOf("Base/my-badge", module).add("Demo", ...);
storiesOf("Base/my-buttons", module).add("Demo", ...);
// ...
storiesOf("Layout/my-grid", module).add("Demo", ...);
storiesOf("Layout/my-masonry-grid", module).add("Demo", ...);
// ...

But then, of course, we end up with different URLs:

• /?path=/story/base-my-badge--demo
• /?path=/story/base-my-buttons--demo
• /?path=/story/layout-my-grid--demo
• /?path=/story/layout-my-masonry-grid--demo

Restoring the search to include the actual story names would be very helpful. Not sure what to do.

[blakeplumb]

@robertwbradford

To get this to work with 6.1, and still have the same URLs, you can change your storiesOf syntax to be the following.

storiesOf("Base/my-badge", module).add("my-badge", ..., {__id: "base--my-badge"});
storiesOf("Base/my-buttons", module).add("my-buttons", ..., {__id: "base--my-buttons"});
// ...
storiesOf("Layout/my-grid", module).add("my-grid", ..., {__id: "layout--my-grid"});
storiesOf("Layout/my-masonry-grid", module).add("my-masonry-grid", ..., {__id: "layout--my-masonry-grid"});
// ...

[pardoman]

To the maintainers: Is the search behavior change a result of a re-design decision or are we looking at a bug?
Thanks

[shilman]

This was a design decision that came after some debate. @domyen and @ghengeveld can give more info on the rationale.

[pardoman]

@shilman Thanks for the response, it's very helpful knowing the new behavior was the result of a design decision.

Since there was some debate about it, would anyone know whether there's high confidence in keeping the the new behavior going forward?

[shilman]

@pardoman We discussed revisiting the decision after gathering feedback on the release, so nothing is set in stone. We're probably open to a PR that enables story search as an opt-in behavior.

That said, I'm not sure adding back the previous search behavior is necessarily the right step forward. Consider @robertwbradford 's case and @kharrop 's case from the original issue.

@robertwbradford's use case is something I've heard from a few other users. They are are defining a story per component, which is something that the storiesOf API allows you to do. This has the benefits of (1) reducing the number of files, and (2) making the nav structure more compact. However, this structure doesn't line up with the direction we're taking Storybook, which is towards one component per story file. This isn't as compact as the storiesOf syntax, but we have lots of reasons for moving in this direction. To allow users to create a compact nav structure, we also introduced single-story hoisting in 6.1: https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#single-story-hoisting. If these users use single-story hoisting, they will preserve their current nav structure AND search will work fine. They will have more files, but hopefully they will get used to that.

In @kharrop 's case, I think what they want is more of a documentation search and they are using story name search as a workaround for that. Since Storybook is used as a documentation tool, we should support this in some way (possibly using the workaround, or possibly in a more rich search for the documentation use case?!).

If there are more use cases that I'm not aware of, please raise them here.

[jondkoon]

Thanks for all your work on Storybook, been a long time fan and user 4+ years.

Just wanted to comment that we are running to this as well with our design system at Charityvest.
We are definitely behind on the newest story format, and should probably update all our stories.

That being said I think it's odd from a UX perspective to have the search function above the navigation not filter the text that sits below it. Storybook has been relatively stable with few breaking changes (at least for me). I think this is the first major breaking change I have experienced.

[shilman]

Hey @jondkoon big fan! Sorry to hear it. What specifically is broken for you?

[pardoman]

I'm guessing @jondkoon is referring to the ability for users to search the string passed into .add().

Example:

storiesOf("Base/my-badge", module).add("Demo", ...);

We can search for "Base" or "my-badge", but we cannot search "Demo".

[jondkoon]

@shilman what @pardoman said is correct. In their example the fact that you can't search on "Demo".

I'm guessing we need to refactor our stories to fix search. I understand if that is the answer here.

[shilman]

Gadzooks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-beta.4 containing PR #14062 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.

[pardoman]

Thanks @ghengeveld and @shilman !

[kharrop]

This is great news, thank you!