Search stories and variants about histoire HOT 8 CLOSED

Maybe we can investigate using lunr (or equivalent) and index pre-building to have a performant fuzzy search

from histoire.

I'm thinking it would be better to design a fully fledged search UX that we can iterate on.
My current idea is to have a search overlay similar to the VS Code or GitHub (ctrl+K) command palette.

Storybook integrates the search UX inside the sidebar:

But I don't think it would be a good solution for us as we have a two-columns layout for the variants by default:

Thinks we should make sure to do in the initial implementation:

• We should restore the state of the search when bringing it up again
• It should have a keyboard shortcut
• It should be very fast
• Selecting a search result (a story or a variant) or hitting [Enter] key should close the search and navigate to the corresponding page

from histoire.

I think both solution serves different purposes:

• The modal based one allow quick access to a particular story
• The filter based one allow quick access to a range of stories

The use-case I was thinking for the filter based one was if was working on some section of my web app and needed to focus on a few particular stories without being polluted by all the other ones.

I wasn't thinking of the Storybook implementation, but more like keeping the tree "as it" and hide unmatching stories.

Maybe doing both would be a good solution, wdyt?

from histoire.

I don't think having two different kinds of search is good. The search would effectively already filter the stories, and can work on the design to group results, for example:

• Top result
• Stories
• Variants
• Actions

If we think about the search/filtering use case, imo the user wants to open a specific variant, so imo it's better to focus on one UX for that and make it as good as possible.

from histoire.

I feel that if we have a very good search modal, an additional filtering field on the stories tree would be confusing and redundant.

from histoire.

When opening the search modal (search is empty), we can also offer to filter specific things, for example Stories or Variants.

from histoire.

Ok, let's keep the modal based one then 🙂 !

from histoire.

First version ready on main. We will open new issues for further iterations.

from histoire.