Docs: Add code snippet to addons panel #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	77.7 MB	77.7 MB	0 B	0.58	0%
initSize	133 MB	133 MB	3.35 kB	0.68	0%
diffSize	55.3 MB	55.3 MB	3.35 kB	0.68	0%
buildSize	6.87 MB	7.24 MB	363 kB	1448.14	🔺5%
buildSbAddonsSize	1.51 MB	1.88 MB	363 kB	1435.12	🔺19.3%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.86 MB	1.86 MB	75 B	2.34	0%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.57 MB	3.93 MB	363 kB	1459.31	🔺9.2%
buildPreviewSize	3.3 MB	3.3 MB	168 B	7.78	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	21s	6.6s	-14s -439ms	-0.97	-218.1%
generateTime	20.1s	21.4s	1.2s	-0.26	6%
initTime	14.3s	12.6s	-1s -681ms	-0.84	-13.3%
buildTime	9.9s	9.7s	-131ms	1.16	-1.3%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	4.4s	4.3s	-72ms	-1.13	-1.6%
devManagerResponsive	3.2s	3.3s	109ms	-1.03	3.3%
devManagerHeaderVisible	488ms	514ms	26ms	-0.69	5.1%
devManagerIndexVisible	571ms	590ms	19ms	-0.61	3.2%
devStoryVisibleUncached	1.1s	1.1s	64ms	-1.99	🔺5.3%
devStoryVisible	571ms	543ms	-28ms	-1.02	-5.2%
devAutodocsVisible	473ms	445ms	-28ms	-0.79	-6.3%
devMDXVisible	436ms	434ms	-2ms	-0.82	-0.5%
buildManagerHeaderVisible	483ms	493ms	10ms	-0.9	2%
buildManagerIndexVisible	570ms	582ms	12ms	-0.91	2.1%
buildStoryVisible	448ms	459ms	11ms	-0.8	2.4%
buildAutodocsVisible	368ms	418ms	50ms	-0.43	12%
buildMDXVisible	378ms	385ms	7ms	-0.72	1.8%

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 f2a8af8. 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 2 targets

Sent with 💌 from NxCloud.

greptile-apps

LGTM

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

code/addons/essentials/src/index.ts

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

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.

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

larsrickert · 2024-10-30T09:26:40Z

@shilman Hey :) Would it be possible for you to take a look at this PR?

shilman · 2024-10-30T11:27:02Z

@larsrickert Sorry I missed this one. Will look later today!

shilman

Hi @larsrickert ! Thanks for your patience on the review.

This looks great: a low-cost improvement to Storybook, eliminating the need for the Storysource addon, which is broken/outdated.

My original thought was to create a standalone addon for this, @storybook/addon-source, which would co-exist with addon-docs the same way that @storybook/addon-controls current does. What do you think about that direction?

I realize this is a much simpler change, and I appreciate that.

I want to discuss this with the core team on Monday and get back to you. But I like this direction and appreciate your PR!!!

shilman · 2024-11-04T05:46:59Z

@larsrickert I haven't had a formal discussion with the team but initial sentiment from talking to a few people is that we should move controls & source handling into the core, and keep docs as its own addon. I will keep you posted on whether we're serious about that change & how it might get done.

In the meantime, I'm inclined to merge this PR since it's useful as is. I will try to have some resolution this week. Thanks for your patience.

larsrickert · 2024-11-04T07:42:14Z

@shilman Thanks for your insights and thoughts! In general, I appreciate the separation of concerns by moving features to dedicated addons. In the case of the docs addon / source generation I am open to both options. Since the source code generation is already part of the docs addon (and its already displayed on the "Docs" page for each story), the new "Code" panel would also fit perfectly in the current docs addon in my opinion.

I like your idea about merging this feature already in the docs addon and then discuss if it should be split up into a source addon in the future. But since this would be a bigger refactoring and probably also other parts of the docs addon would be moved, I'd still merge this PR already as feature for Storybook 8.x. 👍

shilman · 2024-11-11T13:36:21Z

Hi @larsrickert, can you please add the following flag:

parameters: {
  docs: {
    source: {
      addonPanel: false,
    },
  },
}

This way users can opt out of the new behavior if they want. Once that's ready and CI is green, I'll update MIGRATION.md to describe the new behavior and will merge the PR.

storybook-pr-benchmarking · 2024-11-11T14:08:21Z

Package Benchmarks

^{Commit: f2a8af8, ran on 13 December 2024 at 12:53:42 UTC}

No significant changes detected, all good. 👏

larsrickert · 2024-11-13T15:26:52Z

Hi @larsrickert, can you please add the following flag:
parameters: {
  docs: {
    source: {
      addonPanel: false,
    },
  },
}
This way users can opt out of the new behavior if they want. Once that's ready and CI is green, I'll update MIGRATION.md to describe the new behavior and will merge the PR.

Hey @shilman Sure, no problem :) Is there some example/docs how to implement this or someone that could guide me here? I already tried to achieve it but in addons.add() I can only hide the panel content by returning null, but the "Code" panel itself is still displayed. I guess we need to check the parameter before calling addons.add?

shilman · 2024-11-13T16:48:10Z

Oof. I'm actually not too familiar with that aspect of things. @ndelangen can you please help?

kasperpeulen

LGTM, and I agree with @shilman request to be able to turn it off.

larsrickert · 2024-11-25T10:20:22Z

@shilman @kasperpeulen Thanks for the feedback! I added the parameter as requested :)
Does someone of you have time to review if this is the correct way to do this?

shilman · 2024-12-03T13:41:26Z

@larsrickert i discussed with @yannbf and @ndelangen and the current parameter approach won't cut it. i'm going to reimplement it now with a worse API and then get it merged. thanks again for the contribution and for your patience on this.

shilman · 2024-12-03T14:48:01Z

@larsrickert I've opened a PR on top of this one for your review. Please merge if you're OK with it, or we can discuss the changes there.

#29791

I've also found some issues with the PR in its current form.

The default snippet is messed up for React out of the box (see sandbox)
The panel should show up at the end so as not to disrupt existing setups

I've also reached out in Discord in case it's more efficient to discuss it there.

code/addons/docs/src/manager.tsx

JReinhold

Great addition!

Don't we want to document this too?

JReinhold · 2024-12-09T15:32:30Z

MIGRATION.md

+```js
+export default {
+  parameters: {
+    docsSourcePanel: { disable: true },


Not sure I think this is the right API.

We already have parameters.docs.source.X: https://storybook.js.org/docs/api/doc-blocks/doc-block-source

Wouldn't it make sense to keep in line with that, and have it as parameters.docs.source.panel = bool instead?

Potentially, if we want to leave room for other panel-specific configs later, it could be parameters.docs.source.panel.enable = bool

cc @shilman

I see that this has already been discussed, before.

Personally, I highly disagree with the direction.

I just think that we can change internal hacks whenever, but we can only change the API in majors, so I'd rather merge this with hacks than an API we dislike.

It looks like we can add something here if we want: https://github.com/storybookjs/storybook/blob/next/code/core/src/manager/container/Panel.tsx/#L32

@JReinhold — But as you (implicitly) point out, parameters.docs.source.X are props of the Source doc block. That wouldn't be the case here.

Maybe parameters.docs.sourcePanel: boolean would be a nice middle ground?

Although if the panel title is Code, maybe it should be codePanel?

@JReinhold @kylegach Thanks for your input!
I updated the implementation to support a new parameters.docs.codePanel parameter so the code panel can be disabled by setting:

export default { parameters: { docs: { codePanel: false, }, }, };

shilman

LGTM. Will add some documentation in a followup PR 😬

Relates to #1963 Update Storybook to version `8.5.0-beta.22` which includes our [contribution](storybookjs/storybook#29253) that shows a "Code" panel for each story.

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

Closed

4 tasks

greptile-apps bot reviewed Oct 1, 2024

View reviewed changes

chakAs3 requested changes Oct 5, 2024

View reviewed changes

code/addons/essentials/src/index.ts Show resolved Hide resolved

code/renderers/vue3/src/docs/sourceDecorator.ts Show resolved Hide resolved

shilman self-assigned this Oct 7, 2024

shilman added the addon: docs label Oct 7, 2024

larsrickert requested a review from chakAs3 October 11, 2024 06:42

chakAs3 approved these changes Oct 11, 2024

View reviewed changes

code/renderers/vue3/src/docs/sourceDecorator.ts Show resolved Hide resolved

larsrickert mentioned this pull request Oct 15, 2024

Update Storybook dependencies to include "Code" panel for stories SchwarzIT/onyx#1963

Open

6 tasks

larsrickert force-pushed the larsrickert/1898-story-code-panel branch from 05996b9 to 14f6a7a Compare October 30, 2024 09:25

shilman reviewed Nov 2, 2024

View reviewed changes

larsrickert force-pushed the larsrickert/1898-story-code-panel branch from 14f6a7a to 7b4d91f Compare November 4, 2024 07:35

larsrickert force-pushed the larsrickert/1898-story-code-panel branch from 7b4d91f to ddef097 Compare November 11, 2024 13:59

kasperpeulen approved these changes Nov 14, 2024

View reviewed changes

larsrickert force-pushed the larsrickert/1898-story-code-panel branch from ddef097 to 413f2d4 Compare November 25, 2024 08:48

chakAs3 approved these changes Dec 4, 2024

View reviewed changes

code/addons/docs/src/manager.tsx Outdated Show resolved Hide resolved

larsrickert and others added 8 commits December 6, 2024 07:52

feat: add code snippet panel to single story view mode

a91b0ba

remove console log

107c40b

use dark theme

a283cea

feat: support docs.source.addonPanel parameter

1fa0e7d

Addon-docs: Fix and document source panel disabling

01e11e5

fix typos

2be1769

move docs source panel order

33ce8f9

fix react code snippet format

db146c3

larsrickert force-pushed the larsrickert/1898-story-code-panel branch from 78ee7df to db146c3 Compare December 6, 2024 06:52

shilman added 2 commits December 9, 2024 14:53

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

ad65bda

Fix merge conflict remnants

75f235a

shilman changed the title ~~Docs: Add code snippet panel to single story view mode~~ Docs: Add code snippet to addons panel Dec 9, 2024

JReinhold requested changes Dec 9, 2024

View reviewed changes

yannbf and others added 3 commits December 9, 2024 16:33

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

8408f76

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

ef170fd

refactor: update parameter to disable code panel

d749986

larsrickert requested a review from JReinhold December 12, 2024 10:24

shilman added 2 commits December 13, 2024 20:08

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

46bf7b6

Fix typechecks

f2a8af8

shilman approved these changes Dec 13, 2024

View reviewed changes

shilman merged commit b98a73b into next Dec 13, 2024
58 checks passed

shilman deleted the larsrickert/1898-story-code-panel branch December 13, 2024 13:29

github-actions bot mentioned this pull request Dec 13, 2024

Release: Prerelease 8.5.0-alpha.22 #30041

Merged

17 tasks

larsrickert mentioned this pull request Dec 16, 2024

docs(storybook): show code panel for stories SchwarzIT/onyx#2342

Merged

shilman added the needs qa Indicates that this needs manual QA during the upcoming minor/major release label Dec 17, 2024

larsrickert mentioned this pull request Dec 19, 2024

Storybook: Implement global source code transformer for story "Code" panel SchwarzIT/onyx#2379

Open

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Docs: Add code snippet to addons panel #29253

Docs: Add code snippet to addons panel #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 commented Oct 5, 2024

larsrickert commented Oct 7, 2024

larsrickert commented Oct 30, 2024

shilman commented Oct 30, 2024

shilman left a comment

shilman commented Nov 4, 2024 •

edited

Loading

larsrickert commented Nov 4, 2024

shilman commented Nov 11, 2024 •

edited

Loading

storybook-pr-benchmarking bot commented Nov 11, 2024 •

edited

Loading

larsrickert commented Nov 13, 2024

shilman commented Nov 13, 2024

kasperpeulen left a comment •

edited

Loading

larsrickert commented Nov 25, 2024

shilman commented Dec 3, 2024

shilman commented Dec 3, 2024 •

edited

Loading

JReinhold left a comment

JReinhold Dec 9, 2024 •

edited

Loading

JReinhold Dec 9, 2024

JReinhold Dec 9, 2024

kylegach Dec 9, 2024

kylegach Dec 9, 2024 •

edited

Loading

larsrickert Dec 12, 2024

shilman left a comment

Docs: Add code snippet to addons panel #29253

Docs: Add code snippet to addons panel #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 commented Oct 5, 2024

larsrickert commented Oct 7, 2024

larsrickert commented Oct 30, 2024

shilman commented Oct 30, 2024

shilman left a comment

Choose a reason for hiding this comment

shilman commented Nov 4, 2024 • edited Loading

larsrickert commented Nov 4, 2024

shilman commented Nov 11, 2024 • edited Loading

storybook-pr-benchmarking bot commented Nov 11, 2024 • edited Loading

Package Benchmarks

larsrickert commented Nov 13, 2024

shilman commented Nov 13, 2024

kasperpeulen left a comment • edited Loading

Choose a reason for hiding this comment

larsrickert commented Nov 25, 2024

shilman commented Dec 3, 2024

shilman commented Dec 3, 2024 • edited Loading

JReinhold left a comment

Choose a reason for hiding this comment

JReinhold Dec 9, 2024 • edited Loading

Choose a reason for hiding this comment

JReinhold Dec 9, 2024

Choose a reason for hiding this comment

JReinhold Dec 9, 2024

Choose a reason for hiding this comment

kylegach Dec 9, 2024

Choose a reason for hiding this comment

kylegach Dec 9, 2024 • edited Loading

Choose a reason for hiding this comment

larsrickert Dec 12, 2024

Choose a reason for hiding this comment

shilman left a comment

Choose a reason for hiding this comment

larsrickert commented Oct 1, 2024 •

edited by storybook-pr-benchmarking bot

Loading

nx-cloud bot commented Oct 1, 2024 •

edited

Loading

shilman commented Nov 4, 2024 •

edited

Loading

shilman commented Nov 11, 2024 •

edited

Loading

storybook-pr-benchmarking bot commented Nov 11, 2024 •

edited

Loading

kasperpeulen left a comment •

edited

Loading

shilman commented Dec 3, 2024 •

edited

Loading

JReinhold Dec 9, 2024 •

edited

Loading

kylegach Dec 9, 2024 •

edited

Loading