Docs: Add code snippet panel to single story view mode #29253

larsrickert · 2024-10-01T10:13:25Z

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:

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

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	78.7 MB	78.7 MB	0 B	2.01	0%
initSize	151 MB	151 MB	2.97 kB	-0.46	0%
diffSize	72.6 MB	72.6 MB	2.97 kB	-1.17	0%
buildSize	6.77 MB	7.13 MB	360 kB	3.17	🔺5.1%
buildSbAddonsSize	1.5 MB	1.86 MB	360 kB	11.08	🔺19.3%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.83 MB	1.83 MB	0 B	-0.79	0%
buildSbPreviewSize	270 kB	270 kB	0 B	-0.82	0%
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.8 MB	4.16 MB	360 kB	3.17	🔺8.7%
buildPreviewSize	2.97 MB	2.97 MB	168 B	5.1	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	5.4s	13.4s	7.9s	-0.14	59.2%
generateTime	19.6s	23.2s	3.6s	0.87	15.6%
initTime	14.2s	18.4s	4.1s	1.87	🔺22.6%
buildTime	9.1s	8.5s	-617ms	-1.11	-7.2%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	6.6s	7.3s	674ms	0.17	9.2%
devManagerResponsive	4.4s	4.6s	208ms	0.06	4.5%
devManagerHeaderVisible	534ms	592ms	58ms	-0.15	9.8%
devManagerIndexVisible	566ms	628ms	62ms	-0.13	9.9%
devStoryVisibleUncached	646ms	1s	441ms	-0.28	40.6%
devStoryVisible	567ms	629ms	62ms	-0.13	9.9%
devAutodocsVisible	454ms	480ms	26ms	-0.39	5.4%
devMDXVisible	437ms	515ms	78ms	-0.18	15.1%
buildManagerHeaderVisible	535ms	517ms	-18ms	-0.3	-3.5%
buildManagerIndexVisible	547ms	521ms	-26ms	-0.38	-5%
buildStoryVisible	579ms	586ms	7ms	-0.16	1.2%
buildAutodocsVisible	471ms	580ms	109ms	0.2	18.8%
buildMDXVisible	452ms	440ms	-12ms	-0.59	-2.7%

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.tsx for 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.json and 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

nx-cloud · 2024-10-01T10:15:32Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 17d4c4a. 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.

greptile-apps

LGTM

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

chakAs3 · 2024-10-05T14:06:19Z

code/addons/essentials/src/index.ts

    'controls',
    'actions',
+    'docs',


This will be applied to all the renderers, is there any reason why you changed the order? it is important

I just wanted to show the Code panel after controls and actions so it is not the first panel.
Is there any other way to achieve this?

chakAs3 · 2024-10-05T14:10:29Z

code/renderers/vue3/src/docs/sourceDecorator.ts


  // never render if the user is forcing the block to render code, or
  // if the user provides code, or if it's not an args story.
-  return (
-    !isDocsViewMode || !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE


I think showing this on story view mode. should be opt-in. you can add new field the docs parameter

For all other renderers it is always generated, we currently only check for the view mode for Vue.
Also in my opinion, the Code panel is a big benefit for users. What do you think about adding an opt-out preview parameter so the tab can be disabled?

chakAs3 · 2024-10-05T14:18:35Z

Hey @larsrickert, I like how you used the same code snippet on the SourceDecorator. However, this could ideally be an addon, similar to the existing StorySource addon. Though StorySource serves a different purpose—it only displays the actual story code from the file.

larsrickert · 2024-10-07T08:05:22Z

Hey @larsrickert, I like how you used the same code snippet on the SourceDecorator. However, this could ideally be an addon, similar to the existing StorySource addon. Though StorySource serves a different purpose—it only displays the actual story code from the file.

@chakAs3 Thanks for the feedback! Imo the code generation / snippets are responsibility of the docs addon which also already shows the snippets on the "Docs" page. So this PR/feature "just" also shows the snippets on the single story pages.
So its more like adding a missing feature / extending an existing feature of the docs addon instead of creating a new addon/feature.

larsrickert added 2 commits October 1, 2024 11:47

feat: add code snippet panel to single story view mode

dc7c47b

remove console log

a5747f4

larsrickert added feature request ci:normal labels Oct 1, 2024

larsrickert requested review from chakAs3 and kasperpeulen October 1, 2024 10:13

larsrickert mentioned this pull request Oct 1, 2024

Implement Storybook Code tab for stories SchwarzIT/onyx#1904

Open

9 tasks

greptile-apps bot reviewed Oct 1, 2024

View reviewed changes

chakAs3 requested changes Oct 5, 2024

View reviewed changes

Merge branch 'next' into larsrickert/1898-story-code-panel

17d4c4a

shilman self-assigned this Oct 7, 2024

shilman added the addon: docs label Oct 7, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Docs: Add code snippet panel to single story view mode #29253

Docs: Add code snippet panel to single story view mode #29253

larsrickert commented Oct 1, 2024 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Oct 1, 2024 •

edited

Loading

greptile-apps bot left a comment

chakAs3 Oct 5, 2024

larsrickert Oct 7, 2024

chakAs3 Oct 5, 2024 •

edited

Loading

larsrickert Oct 7, 2024

chakAs3 commented Oct 5, 2024

larsrickert commented Oct 7, 2024

Docs: Add code snippet panel to single story view mode #29253

Are you sure you want to change the base?

Docs: Add code snippet panel to single story view mode #29253

Conversation

larsrickert commented Oct 1, 2024 • edited by storybook-pr-benchmarking bot Loading

What I did

Open questions:

Checklist for Contributors

Testing

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

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

nx-cloud bot commented Oct 1, 2024 • edited Loading

☁️ Nx Cloud Report

greptile-apps bot left a comment

Choose a reason for hiding this comment

chakAs3 Oct 5, 2024

Choose a reason for hiding this comment

larsrickert Oct 7, 2024

Choose a reason for hiding this comment

chakAs3 Oct 5, 2024 • edited Loading

Choose a reason for hiding this comment

larsrickert Oct 7, 2024

Choose a reason for hiding this comment

chakAs3 commented Oct 5, 2024

larsrickert commented Oct 7, 2024

larsrickert commented Oct 1, 2024 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Oct 1, 2024 •

edited

Loading

chakAs3 Oct 5, 2024 •

edited

Loading