Addon Docs: Fix Symbol conversion issue in docs page and controls panel

[yannbf]

Closes #32183

What I did

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-storybook/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>

Greptile Summary

This PR fixes a critical Symbol conversion error that was crashing Storybook's docs page and controls panel when React components received JSX elements as props. The issue occurred because JSX elements contain internal JavaScript Symbol values that cannot be converted to strings using standard template literal interpolation, causing "Cannot convert a Symbol value to string" runtime errors.

The core fix modifies the react-editable-json-tree component used by Storybook's controls and docs rendering. All template literals in aria-label attributes now wrap interpolated variables with String() conversion (e.g., aria-label='remove the array ${String(name)}'). This ensures that Symbol values, along with other primitive types like null and undefined, are safely converted to strings without throwing errors.

To support the fix, the PR adds comprehensive test coverage including:

• A new isReactSandbox() utility function to identify React-based templates for conditional testing
• A test story (jsx-docgen.stories.tsx) that reproduces the issue by passing JSX elements as component props
• End-to-end tests in both addon-docs.spec.ts and addon-controls.spec.ts that verify JSX elements render properly in the docs page and controls panel respectively

The changes integrate seamlessly with Storybook's existing architecture by enhancing the JSON tree renderer's robustness without affecting its core functionality. The React-specific nature of the issue is properly handled through conditional test execution that skips JSX-related tests for non-React renderers.

Confidence score: 5/5

• This PR is safe to merge with minimal risk as it addresses a well-defined runtime error with a targeted fix
• Score reflects the focused nature of the changes and comprehensive test coverage that validates the fix works correctly
• No files require special attention as the changes are straightforward string conversion safety improvements

[greptile-apps]

_{5 files reviewed, no comments}

_{Edit Code Review Bot Settings | Greptile}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 583a4e3

Command	Status	Duration	Result
nx run-many -t build --parallel=3	✅ Succeeded	1m 13s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-08-08 11:14:22 UTC

[storybook-pr-benchmarking]

Package Benchmarks

^{Commit: 583a4e3, ran on 8 August 2025 at 11:01:50 UTC}

The following packages have significant changes to their size or dependencies:

@storybook/builder-webpack5

	Before	After	Difference
Dependency count	198	198	0
Self size	80 KB	80 KB	0 B
Dependency size	31.37 MB	31.38 MB	🚨 +14 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/angular

	Before	After	Difference
Dependency count	198	198	0
Self size	192 KB	192 KB	0 B
Dependency size	29.57 MB	29.59 MB	🚨 +14 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/ember

	Before	After	Difference
Dependency count	203	203	0
Self size	28 KB	28 KB	0 B
Dependency size	28.10 MB	28.11 MB	🚨 +14 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/nextjs

	Before	After	Difference
Dependency count	538	538	0
Self size	903 KB	903 KB	0 B
Dependency size	59.12 MB	59.13 MB	🚨 +14 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/nextjs-vite

	Before	After	Difference
Dependency count	130	130	0
Self size	3.08 MB	3.08 MB	0 B
Dependency size	22.28 MB	22.29 MB	🚨 +14 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/react-native-web-vite

	Before	After	Difference
Dependency count	163	163	0
Self size	32 KB	32 KB	0 B
Dependency size	23.66 MB	23.68 MB	🚨 +14 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/react-vite

	Before	After	Difference
Dependency count	120	120	0
Self size	32 KB	32 KB	0 B
Dependency size	20.23 MB	20.24 MB	🚨 +14 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/react-webpack5

	Before	After	Difference
Dependency count	286	286	0
Self size	25 KB	25 KB	0 B
Dependency size	43.69 MB	43.70 MB	🚨 +14 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/server-webpack5

	Before	After	Difference
Dependency count	210	210	0
Self size	17 KB	17 KB	0 B
Dependency size	32.64 MB	32.65 MB	🚨 +14 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/cli

	Before	After	Difference
Dependency count	220	220	0
Self size	585 KB	585 KB	0 B
Dependency size	104.36 MB	104.37 MB	🚨 +14 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	189	189	0
Self size	31 KB	31 KB	0 B
Dependency size	88.44 MB	88.45 MB	🚨 +14 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/preset-react-webpack

	Before	After	Difference
Dependency count	177	177	0
Self size	24 KB	24 KB	0 B
Dependency size	30.51 MB	30.53 MB	🚨 +14 KB 🚨
Bundle Size Analyzer	Link	Link