Vue: Consider custom code snippet in story code panel and update styles

[larsrickert]

Follow up PR for #29253

What I did

• Update the story "Code" panel added in Docs: Add code snippet to addons panel #29253 to consider custom code snippets. Previously, stories with custom code snippets did not show any code snippet or reused the one from the previously opened story
• remove default "html" format which breaks react/JSX snippets/formatting
• updated the styles to remove unnecessary margin and made the code full panel height
• replace useAddonState with useState because the code snippets are individual per story so persisting the state globally does not make sense / is not needed
• sync light/dark mode with theme

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!

1. Run a sandbox for template, e.g. yarn task --task sandbox --start-from auto --template react-vite/default-ts
2. Open Storybook in your browser
3. Access story: http://localhost:6006/?path=/story/addons-docs-codepanel--custom-code

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>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	77.9 MB	77.9 MB	0 B	1.73	0%
initSize	131 MB	131 MB	1.47 kB	1.75	0%
diffSize	52.9 MB	52.9 MB	1.47 kB	-0.8	0%
buildSize	7.19 MB	7.19 MB	225 B	13.52	0%
buildSbAddonsSize	1.85 MB	1.85 MB	225 B	14.08	0%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.87 MB	1.87 MB	0 B	3	0%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.91 MB	3.91 MB	225 B	14.25	0%
buildPreviewSize	3.28 MB	3.28 MB	0 B	2.37	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	6.5s	18.8s	12.2s	0.75	65.3%
generateTime	19.4s	19.5s	114ms	-0.79	0.6%
initTime	12.7s	16.2s	3.5s	1.5	🔺21.7%
buildTime	8.6s	8.2s	-483ms	-1.28	🔰-5.9%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	4.7s	5.2s	508ms	0.34	9.7%
devManagerResponsive	3.4s	4s	570ms	0.84	14.2%
devManagerHeaderVisible	641ms	630ms	-11ms	-0.17	-1.7%
devManagerIndexVisible	676ms	659ms	-17ms	-0.23	-2.6%
devStoryVisibleUncached	1.8s	2s	188ms	0.46	9.4%
devStoryVisible	675ms	661ms	-14ms	-0.25	-2.1%
devAutodocsVisible	569ms	502ms	-67ms	-0.58	-13.3%
devMDXVisible	573ms	535ms	-38ms	-0.33	-7.1%
buildManagerHeaderVisible	555ms	624ms	69ms	0.55	11.1%
buildManagerIndexVisible	641ms	720ms	79ms	0.81	11%
buildStoryVisible	536ms	614ms	78ms	0.67	12.7%
buildAutodocsVisible	495ms	427ms	-68ms	-0.95	-15.9%
buildMDXVisible	450ms	454ms	4ms	-0.36	0.9%

Greptile Summary

Based on the provided information, I'll create a concise summary of the key changes in this PR:

Enhanced code panel functionality in Storybook with improved Vue component support and custom code snippet handling.

• Added support for custom code snippets in code panel via code/addons/docs/template/stories/codePanel/index.stories.tsx
• Replaced useAddonState with useState in code/addons/docs/src/manager.tsx for per-story state management
• Improved Source component styling with full panel height and theme-based dark mode support
• Exported SourceParameters type from code/lib/blocks/src/blocks/Source.tsx for better type integration

The changes focus on improving the code panel's functionality and appearance while maintaining clean code organization and type safety.

_{💡 (3/5) Reply to the bot's comments like "Can you suggest a fix for this @greptileai?" or ask follow-up questions!}

[greptile-apps]

_{4 file(s) reviewed, 3 comment(s)
Edit PR Review Bot Settings | Greptile}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 686b102.

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

---

☁️ Nx Cloud last updated this comment at 2025-01-15 07:20:45 UTC

[greptile-apps]

LGTM

_{4 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings | Greptile}

[greptile-apps]

_{4 file(s) reviewed, 2 comment(s)
Edit PR Review Bot Settings | Greptile}