Skip to content

docs: add storybook plugins (barebones) #5737

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 19, 2025
Merged

docs: add storybook plugins (barebones) #5737

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions second-gen/packages/swc/.storybook/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,11 @@ const config = {
core: {
disableTelemetry: true,
},
addons: [
'@storybook/addon-docs',
'@storybook/addon-a11y',
'@storybook/addon-designs',
],
viteFinal: async (config) => {
config.resolve = config.resolve || {};
config.resolve.alias = {
Expand Down
3 changes: 2 additions & 1 deletion second-gen/packages/swc/.storybook/preview.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import '../tokens/light-vars.css';
import '../tokens/medium-vars.css';
import '../tokens/global-vars.css';

import { html } from 'lit';
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This wasn't actually being used in this file so the import wasn't needed.

import { setCustomElementsManifest } from '@storybook/web-components';
import customElements from './custom-elements.json';

Expand All @@ -14,6 +13,7 @@ setCustomElementsManifest(customElements);

const preview = {
parameters: {
layout: 'centered',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think centered or padded are nice customer experiences. The downside of making every component fullscreen is that the smaller components get squashed into the top left corner.

controls: {
expanded: true,
matchers: {
Expand All @@ -29,6 +29,7 @@ const preview = {
},
},
},
tags: ['autodocs'],
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Automatically triggers documentation pages for every component. Components can opt-out using tags: ['!autodocs']

};

export default preview;
3 changes: 3 additions & 0 deletions second-gen/packages/swc/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,9 @@
"devDependencies": {
"@axe-core/playwright": "^4.10.2",
"@custom-elements-manifest/analyzer": "^0.10.5",
"@storybook/addon-a11y": "9.1.3",
"@storybook/addon-designs": "10.0.2",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This lets us bring over the Figma resources that we have linked in CSS.

"@storybook/addon-docs": "9.1.3",
"@storybook/test-runner": "^0.23.0",
"@storybook/web-components-vite": "9.1.3",
"@types/react": "^19",
Expand Down
74 changes: 74 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6287,6 +6287,18 @@ __metadata:
languageName: unknown
linkType: soft

"@storybook/addon-a11y@npm:9.1.3":
version: 9.1.3
resolution: "@storybook/addon-a11y@npm:9.1.3"
dependencies:
"@storybook/global": "npm:^5.0.0"
axe-core: "npm:^4.2.0"
peerDependencies:
storybook: ^9.1.3
checksum: 10c0/1a93d5f8083a0fa51036b37da8d8f5cb09e0ce64cd99c68cbd3882a9d14cfc9b15cf64ddac0de692f97390c7f591ff39e332de76a10ab36c5a634e3f32e17637
languageName: node
linkType: hard

"@storybook/addon-a11y@npm:^8.6.12":
version: 8.6.14
resolution: "@storybook/addon-a11y@npm:8.6.14"
Expand Down Expand Up @@ -6342,6 +6354,27 @@ __metadata:
languageName: node
linkType: hard

"@storybook/addon-designs@npm:10.0.2":
version: 10.0.2
resolution: "@storybook/addon-designs@npm:10.0.2"
dependencies:
"@figspec/react": "npm:^1.0.0"
peerDependencies:
"@storybook/addon-docs": ^0.0.0-0 || ^9.0.0 || ^9.1.0-0
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
storybook: ^0.0.0-0 || ^9.0.0 || ^9.1.0-0
peerDependenciesMeta:
"@storybook/addon-docs":
optional: true
react:
optional: true
react-dom:
optional: true
checksum: 10c0/8d02487ad337570eabc7962131ee933bf3995fe4700211dc734958d3a59c31f981214c0bc651b574b76f6e97abf259603bd277b30693b45eea2abf64899aab74
languageName: node
linkType: hard

"@storybook/addon-designs@npm:^8.2.1":
version: 8.2.1
resolution: "@storybook/addon-designs@npm:8.2.1"
Expand Down Expand Up @@ -6385,6 +6418,23 @@ __metadata:
languageName: node
linkType: hard

"@storybook/addon-docs@npm:9.1.3":
version: 9.1.3
resolution: "@storybook/addon-docs@npm:9.1.3"
dependencies:
"@mdx-js/react": "npm:^3.0.0"
"@storybook/csf-plugin": "npm:9.1.3"
"@storybook/icons": "npm:^1.4.0"
"@storybook/react-dom-shim": "npm:9.1.3"
react: "npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
react-dom: "npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
ts-dedent: "npm:^2.0.0"
peerDependencies:
storybook: ^9.1.3
checksum: 10c0/2babff31e71f025f85a94b0f3e18f5facc3cbdb178c3b9a697e194f45856980ef9f990022dcffc55b019a2e8e43358fcfa0ba3e99013b9def12c7f593e4427a6
languageName: node
linkType: hard

"@storybook/addon-essentials@npm:^8.6.12":
version: 8.6.14
resolution: "@storybook/addon-essentials@npm:8.6.14"
Expand Down Expand Up @@ -6749,6 +6799,16 @@ __metadata:
languageName: node
linkType: hard

"@storybook/icons@npm:^1.4.0":
version: 1.6.0
resolution: "@storybook/icons@npm:1.6.0"
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
checksum: 10c0/bbec9201a78a730195f9cf377b15856dc414a54d04e30d16c379d062425cc617bfd0d6586ba1716012cfbdab461f0c9693a6a52920f9bd09c7b4291fb116f59c
languageName: node
linkType: hard

"@storybook/instrumenter@npm:8.6.14":
version: 8.6.14
resolution: "@storybook/instrumenter@npm:8.6.14"
Expand Down Expand Up @@ -6855,6 +6915,17 @@ __metadata:
languageName: node
linkType: hard

"@storybook/react-dom-shim@npm:9.1.3":
version: 9.1.3
resolution: "@storybook/react-dom-shim@npm:9.1.3"
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
storybook: ^9.1.3
checksum: 10c0/399b80b84b577474daaab5346db6fd099ab41a4c2a7fb68e575b7085902cf6ef5e2a62f06bebc33eb1ff9849cd35d7e0b28a93de3e8d4f32a5b03fb538850543
languageName: node
linkType: hard

"@storybook/router@npm:7.6.20":
version: 7.6.20
resolution: "@storybook/router@npm:7.6.20"
Expand Down Expand Up @@ -7052,6 +7123,9 @@ __metadata:
dependencies:
"@axe-core/playwright": "npm:^4.10.2"
"@custom-elements-manifest/analyzer": "npm:^0.10.5"
"@storybook/addon-a11y": "npm:9.1.3"
"@storybook/addon-designs": "npm:10.0.2"
"@storybook/addon-docs": "npm:9.1.3"
"@storybook/test-runner": "npm:^0.23.0"
"@storybook/web-components-vite": "npm:9.1.3"
"@swc/core": "workspace:*"
Expand Down
Loading