Tags: Add project tags, negation, dev/autodocs/test system tags

[shilman]

Closes #21085
Closes #9209

Based on ComponentDriven/csf#80

What I did

Project tags

Added project tags:

// .storybook/preview.js
export default {
  tags: ['autodocs'],
}

This means that we don't need the docs.autodocs configuration anymore.

1. To enable autodocs globally, add autodocs tag to preview.js
2. To opt-out of autodocs on individual components, add !autodocs to the story meta
3. To make autodocs opt-in on a per-component basis, don't add autodocs to preview.js and selectively add autodocs to the components you want autodocs for.

Tag negation

Add the ability to remove tags that have been added higher up in the hierarchy using !tag syntax:

// Button.stories.js

export default {
  component: Button,
  tags: ['foo', 'bar', '!autodocs']
}

export const Primary = {
  tags: ['!foo', 'baz']
}

Updated system tags

Added dev/docs/test system tags

Added new "system" tags dev and test that automatically get applied to every store (and can be removed with !dev etc.

• !dev removes a story/component from the sidebar
• !autodocs removes a story from autodocs
• !test removes a story from test runs

Removed story/docs system tags

Storybook was automatically adding the tag story to stories and docs to docs nodes (autodocs, mdx, etc.).

I've removed these, since the use case wasn't clear and since docs now means something else per above ☝️

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

1. Run a sandbox or test project with the new version
2. Verify legacy docs.autodocs settings in main.js
   a. That they still work as before
   b. That they give a deprecation warning in the browser console and that it makes sense.
3. Remove the docs.autodocs setting and restart
4. Test the following settings for 'autodocs':
   a. no autodocs tag is added to .storybook/preview.js
   b. autodocs tag is added to a component (opt-in case)
   c. autodocs tag is added to .storybook/preview.js
   d. !autodocs tag is added to a component (opt-out case)
   d. !autodocs tag is added to a story (opt-out case of a story in autodocs)
5. Test the same settings for the dev tag. Note that the dev tag is added globally by default.
   a. Disable dev tag globally by adding !dev to .storybook/preview.ts (opt-in case)
   b. Add dev tag to a component and verify that it appears in the sidebar
   c. Add !dev tag to a story within that component and verify that it disappears from the sidebar
   d. Enable dev globally by removing !dev from .storybook/preview.js
   e. Add !dev to a component and verify that it disappears from the sidebar (opt-out case)
6. Run the test-runner with --includeTags=test and verify that only those stories get tested

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 2dee030. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 2 targets

• nx affected -t check -c production --parallel=7
• nx run-many -t build -c production --parallel=3

---

Sent with 💌 from NxCloud.

[tmeasday]

Again, LGTM, but need to see the CSF PR

[JReinhold]

shouldn't this be a server-side warning in the terminal instead, given that this is a main.js API getting deprecated?

[JReinhold]

I think this reverses the fix you did in #25537

With this change, the autodocs entry will again inherit all the tags from the primary story.

I'm not sure there's a clean workaround for it though.