Storybook: [Feature] Improved SearchBox for stories

[ghost]

Hello everyone! First time poster here.

Currently search is performed exclusively on the name of the story, but it might be relatively easy/safe to take advantage of Story Parameters to make search a bit smarter.

I wanted to implement an interactive Design System in storybook in which stories could be "tagged" and searched for by typing in such tags, and enable using the same Markdown files used to document a story so that matching terms within them would be found and consequently the story "matched" in the search results. (inspired by Storybook Readme).

I was thinking it could be a matter of providing the attributes directly in the story, such as:

import ButtonReadme from '../components/button/README.md';

storiesOf('Button', module)
  .add('with text', () => (
    <Button onClick={action('clicked')}>Click me!</Button>
  ),
  {
     searchTags: ['button', 'generic'],
     searchMarkdown: [ButtonReadme] // Could provide several files if needed
  }
)

I'm not sure of what this all involves, but I presume it would mean:

• [ ] edit <SearchBox /> to receive additional data from the stories (possibly here).
• [ ] read from said markdown files somewhere
• [ ] reserve/use some specific parameter from api.add(title, story, params) so that you can provide said tags and/or markdown files.

What do you guys think? I'd be happy to help with the implementation and feedback!

[igor-dv]

Interesting Idea 👍
I would wait though until @ndelangen and co will finish a major refactoring of the UI and State management.

[ndelangen]

@christopherstat Let's have a chat on our slack?
https://now-examples-slackin-rrirkqohko.now.sh/

[nicholasmaddren]

Wow, I was literally just explaining to my team how cool this functionality would be to find that a few days ago it had been raised here!

I found myself scrolling through the list of my components trying to find form related components. It would be really nice if you could tag components and then filter by those tags, e.g... ['form', 'input'].

[ndelangen]

In my branch the search is expanded to full text on every property of the story.

I'd like to implement fuzzy search on it, would you care to help with that @nicholasmaddren or @christopherstat ?

[ndelangen]

WIP: #4086

[tmeasday]

The features @ndelangen described are merged in the v5 branch.

[shilman]

Released: https://github.com/storybooks/storybook/releases/tag/v5.0.0-alpha.0