storybook
storybook copied to clipboard
storybookjs
Docs: Add code snippet panel to single story view mode
Closes #26691
What I did
Add a new "Code" panel for the docs addon so the generated code snippet can also be viewed/copied in single story mode and is no longer limited to the docs page / view mode.
Open questions:
- Since the code snippet generation is way more advanced for Vue than for other frameworks (when using vue-component-meta docgen), should be provide a preview option to hide/disable the "Code" panel?
- Should we remove the top/bottom margin of the source code?
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
- [x] stories
- [ ] unit tests
- [ ] integration tests
- [ ] end-to-end tests
Manual testing
- Run a sandbox for template, e.g.
yarn task --task sandbox --start-from auto --template vue3-vite/default-ts - Open Storybook in your browser
- Access any single story, e.g. http://localhost:6006/?path=/story/stories-renderers-vue3-vue3-vite-default-ts-sourcecode--default
- Click on "Code" panel at the bottom of the screen
Documentation
- [ ] Add or update documentation reflecting your changes
- [ ] If you are deprecating/removing a feature, make sure to update MIGRATION.MD
Checklist for Maintainers
-
[x] When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli/src/sandbox-templates.ts -
[x] 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 | 78.7 MB | 78.7 MB | 74 B | 2.93 | 0% |
| initSize | 147 MB | 147 MB | 3.05 kB | -0.55 | 0% |
| diffSize | 68.3 MB | 68.3 MB | 2.97 kB | -0.56 | 0% |
| buildSize | 6.79 MB | 7.15 MB | 362 kB | 44.43 | 🔺5.1% |
| buildSbAddonsSize | 1.5 MB | 1.86 MB | 362 kB | 2735.44 | 🔺19.4% |
| buildSbCommonSize | 195 kB | 195 kB | 0 B | - | 0% |
| buildSbManagerSize | 1.83 MB | 1.83 MB | 0 B | 1.53 | 0% |
| buildSbPreviewSize | 270 kB | 270 kB | 0 B | -2.38 | 0% |
| buildStaticSize | 0 B | 0 B | 0 B | - | - |
| buildPrebuildSize | 3.8 MB | 4.16 MB | 362 kB | 2865.47 | 🔺8.7% |
| buildPreviewSize | 2.99 MB | 2.99 MB | 168 B | 0.58 | 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 | 15.1s | 21.8s | 6.6s | 1.69 | 🔺30.6% |
| generateTime | 22.3s | 22.8s | 463ms | 1.67 | 2% |
| initTime | 14.5s | 14.7s | 167ms | 0.78 | 1.1% |
| buildTime | 8.1s | 8.9s | 807ms | -0.25 | 9% |
| testBuildTime | 0ms | 0ms | 0ms | - | - |
| devPreviewResponsive | 8.7s | 5.7s | -2s -948ms | -0.94 | -51.1% |
| devManagerResponsive | 5.7s | 3.8s | -1s -911ms | -0.89 | -49.5% |
| devManagerHeaderVisible | 849ms | 524ms | -325ms | -0.96 | -62% |
| devManagerIndexVisible | 899ms | 554ms | -345ms | -0.95 | -62.3% |
| devStoryVisibleUncached | 1.7s | 914ms | -836ms | -0.47 | -91.5% |
| devStoryVisible | 893ms | 555ms | -338ms | -0.97 | -60.9% |
| devAutodocsVisible | 809ms | 506ms | -303ms | -0.34 | -59.9% |
| devMDXVisible | 692ms | 441ms | -251ms | -1.33 | 🔰-56.9% |
| buildManagerHeaderVisible | 802ms | 463ms | -339ms | -0.95 | -73.2% |
| buildManagerIndexVisible | 816ms | 474ms | -342ms | -0.92 | -72.2% |
| buildStoryVisible | 849ms | 497ms | -352ms | -1.25 | 🔰-70.8% |
| buildAutodocsVisible | 791ms | 482ms | -309ms | -0.2 | -64.1% |
| buildMDXVisible | 698ms | 499ms | -199ms | -0.02 | -39.9% |
Greptile Summary
This PR adds a new 'Code' panel to the Storybook UI for displaying and copying generated code snippets in single story view mode, focusing on improvements for the docs addon and Vue3 renderer.
- Implemented new 'Code' panel in
code/addons/docs/src/manager.tsxfor viewing generated code snippets - Enhanced Vue3 source code generation in
code/renderers/vue3/src/docs/sourceDecorator.ts, improving handling of complex props and slots - Updated
code/addons/essentials/package.jsonand related files to integrate the new 'Code' panel functionality - Reordered addons in
code/addons/essentials/src/index.ts, potentially affecting addon initialization order - Removed view mode check in Vue3 sourceDecorator, allowing source code generation for non-docs view modes
