CSF: Add addon-themes for testing to sandboxes & main storybook

[ndelangen]

Closes #27525

What I did

• rename the theme global we use internally to sb_theme.
• add addon-themes to template stories, and to main storybook.
• add a disable parameter to addon-themes, so we don't have to look at it in the toolbar, unless we're testing it

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

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

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>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	76.3 MB	76.3 MB	0 B	-1.55	0%
initSize	198 MB	198 MB	-929 B	0.7	0%
diffSize	122 MB	122 MB	-929 B	1.32	0%
buildSize	7.61 MB	7.6 MB	-554 B	0.55	0%
buildSbAddonsSize	1.64 MB	1.64 MB	-250 B	0.45	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	2.3 MB	2.3 MB	0 B	-	0%
buildSbPreviewSize	351 kB	350 kB	-295 B	0.26	-0.1%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	4.48 MB	4.48 MB	-545 B	0.45	0%
buildPreviewSize	3.12 MB	3.12 MB	-9 B	0.82	0%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	25.7s	23.1s	-2s -668ms	1.1	-11.5%
generateTime	22s	21.6s	-344ms	-0.81	-1.6%
initTime	22.3s	21.5s	-795ms	-1.05	-3.7%
buildTime	14.9s	13.5s	-1s -423ms	-0.68	-10.5%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	7.7s	8.9s	1.1s	0.01	13.4%
devManagerResponsive	5.3s	5.9s	595ms	0.15	10.1%
devManagerHeaderVisible	717ms	799ms	82ms	-0.49	10.3%
devManagerIndexVisible	750ms	833ms	83ms	-0.47	10%
devStoryVisibleUncached	1.1s	1s	-118ms	-1.09	-11.2%
devStoryVisible	771ms	854ms	83ms	-0.48	9.7%
devAutodocsVisible	654ms	889ms	235ms	1.04	26.4%
devMDXVisible	605ms	755ms	150ms	-0.16	19.9%
buildManagerHeaderVisible	700ms	843ms	143ms	0.32	17%
buildManagerIndexVisible	703ms	846ms	143ms	0.28	16.9%
buildStoryVisible	751ms	896ms	145ms	0.27	16.2%
buildAutodocsVisible	687ms	707ms	20ms	-0.56	2.8%
buildMDXVisible	633ms	730ms	97ms	-0.13	13.3%

Greptile Summary

This pull request integrates the addon-themes into Storybook for testing purposes, renaming the theme global to sb_theme and adding a disable parameter for better control.

• code/.storybook/main.ts: Added @storybook/addon-themes to the addons array and updated the stories array.
• code/.storybook/preview.tsx: Renamed theme global to sb_theme and added disable parameter to addon-themes.
• code/addons/themes/src/constants.ts: Introduced disable parameter to ThemeParameters interface.
• code/addons/themes/src/theme-switcher.tsx: Added disable parameter and GLOBAL_KEY for theme switcher control.
• code/addons/themes/template/stories/decorators.stories.ts: Added new decorators for applying themes using class names, data attributes, and JSX providers.

[greptile-apps]

_{30 file(s) reviewed, 54 comment(s)
Edit PR Review Bot Settings}

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit a37cd7f. 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 1 target

• nx run-many -t build --parallel=3

---

Sent with 💌 from NxCloud.