Feature/add data-tags attribute to sidebar items

[thehuijb]

Issue: 9209 Add an option to hide a story from the sidebar

What I did

I made an adjustment to how stories are written out to the sidebar to include a data-tags attribute which defaults to data-tags="none"

the tags can then be used to show or hide stories based on plain css selectors:
for instance one could add a rule to hide all stories with data-tags="hidden":

[data-tags=hidden] {
  display: none;
}

or more complex to hide all stories that do not have a certain TAG so you could show just the stories that belong to that TAG:

[data-tags]:not([data-tags~=TAG] {
  display: none;
}

NOTE: - these css options are not included in the PR one must add these depending on the solution they are looking for.

to add the tags to the stories you only need to add it to the default like so:

export default {
  title: 'Welcome',
  tags: 'hidden',
};

or to a specific story like this:

Button.story = {
  tags: 'hidden'
}

you can specify multiple tags using the pipe symbol | e.g. tags: 'web|app' to specify that the component or story belongs to the web and to the app
if you would add tags: 'web|app' to default and then add tags: 'web' to a story and tags: 'app' to another, one could show and hide different stories based on a selected TAG
if components are created under the same branch, the branch will receive the tags from all component and pipe | them together e.g. if one storyfile has

export default {
  title: 'Components/Category/Headings',
  tags: 'web'
}

and another storyfile has

export default {
  title: 'Components/Category/Buttons',
  tags: 'app'
}

the resulting link in the sidebar to Category will have data-tags="web|app"

How to test

1. start one of the example apps
2. add tags: 'hidden' to one of the stories files like described above
3. refresh page and inspect the stories in the sidebar with the devtools
4. see that the links in the sidebar contain data-tags attibutes

• Is this testable with Jest or Chromatic screenshots? NO
• Does this need a new example in the kitchen sink apps? probably NOT
• Does this need an update to the documentation? YES included

If your answer is yes to any of these, please make sure to include it in your PR.

[ndelangen]

How come this PR has 316 commits & 200+ files changed?

[thehuijb]

How come this PR has 316 commits & 200+ files changed?

good question, how did that happen?
I rebased on the next branch, then did some rework to fix the conflicts you predicted.
guess I'm going to have to submit a new PR