Skip to content

Commit 5efea01

Browse files
castastrophecastastrophe
committed
feat(storybook)!: upgrade v8.x and migrate to vite
1 parent b5ee3c2 commit 5efea01

File tree

23 files changed

+6564
-2895
lines changed

23 files changed

+6564
-2895
lines changed

‎.eslintignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ tools/**/*.d.ts
44
tools/*/node_modules/**/*
55
config/*
66
tools/base/src/version.js
7+
!.storybook

‎.github/workflows/chromatic-vrt.yml‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,19 +35,13 @@ jobs:
3535
- name: Setup Job and Install Dependencies
3636
uses: ./.github/actions/setup-job
3737

38-
- name: Generate Custom Elements Manifest
39-
run: yarn docs:analyze
40-
41-
- name: Move CEM to Storybook directory
42-
run: cp projects/documentation/custom-elements.json storybook/
43-
4438
- name: Publish to Chromatic
4539
id: chromatic
4640
uses: chromaui/action@v11
4741
with:
4842
projectToken: ${{ secrets.CHROMATIC_TOKEN }}
49-
buildScriptName: storybook:build
50-
storybookConfigDir: storybook
43+
buildScriptName: build
44+
storybookConfigDir: .storybook
5145
exitOnceUploaded: true
5246
onlyChanged: true
5347
traceChanged: true

‎.github/workflows/publish.yml‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,6 @@ jobs:
2222
- name: Generate Custom Elements Manifest
2323
run: yarn docs:analyze
2424

25-
- name: Move CEM to Storybook directory
26-
run: cp projects/documentation/custom-elements.json storybook/
27-
2825
- name: Build documentation
2926
run: yarn docs:production
3027

‎.storybook/main.js‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
/*!
2+
* Copyright 2025 Adobe. All rights reserved.
3+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
4+
* you may not use this file except in compliance with the License. You may obtain a copy
5+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
6+
*
7+
* Unless required by applicable law or agreed to in writing, software distributed under
8+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9+
* OF ANY KIND, either express or implied. See the License for the specific language
10+
* governing permissions and limitations under the License.
11+
*/
12+
13+
import path from 'node:path';
14+
15+
import fg from 'fast-glob';
16+
import ViteCEM from 'vite-plugin-cem';
17+
// import turbosnap from 'vite-plugin-turbosnap';
18+
import tsconfigPaths from 'vite-tsconfig-paths';
19+
import { nodeResolve } from '@rollup/plugin-node-resolve';
20+
21+
import { esBuildConfig } from '../tasks/ts-tools.js';
22+
23+
const rootDir = process.cwd();
24+
const esBuildSettings = esBuildConfig(
25+
fg.sync(
26+
[
27+
'packages/**/!(*.d).ts',
28+
'tools/**/!(*.d).ts',
29+
'test/plugins/**/!(*.d).ts',
30+
'projects/story-decorator/**/!(*.d).ts',
31+
'test/lit-helpers.ts',
32+
'test/testing-helpers.ts',
33+
'test/testing-helpers-a11y.ts',
34+
'test/visual/test.ts',
35+
],
36+
{ cwd: rootDir }
37+
),
38+
{
39+
env: process.env.NODE_ENV,
40+
external: ['require', 'fs', 'path'],
41+
}
42+
);
43+
44+
/** @type { import('@storybook/web-components-vite').StorybookConfig } */
45+
export default {
46+
rootDir,
47+
staticDirs: [],
48+
stories: [
49+
{
50+
directory: '../packages',
51+
files: '*/stories/*.stories.ts',
52+
titlePrefix: 'Components',
53+
},
54+
{
55+
directory: '../tools',
56+
files: '*/stories/*.stories.ts',
57+
titlePrefix: 'Tools',
58+
},
59+
],
60+
addons: [
61+
'@storybook/addon-essentials',
62+
// https://github.com/storybookjs/storybook/tree/next/code/addons/a11y
63+
'@storybook/addon-a11y',
64+
// Conditionally add the addon-designs because Figma assets are not publicly available
65+
// https://storybook.js.org/addons/@storybook/addon-designs/
66+
...(process.env.NODE_ENV === 'development'
67+
? ['@storybook/addon-designs']
68+
: []),
69+
// https://docs.chromatic.com/docs/visual-tests-addon/
70+
'@chromatic-com/storybook',
71+
],
72+
docs: {
73+
autodocs: false,
74+
},
75+
framework: '@storybook/web-components-vite',
76+
// core: {
77+
// disableTelemetry: true,
78+
// disableWhatsNewNotifications: true,
79+
// },
80+
async viteFinal(config, { configType }) {
81+
// Merge custom configuration into the default config
82+
const { mergeConfig } = await import('vite');
83+
84+
/** @type { import('vite').UserConfig } */
85+
return mergeConfig(config, {
86+
publicDir: './assets',
87+
optimizeDeps: {
88+
include: [
89+
'@lit-labs/observers',
90+
'cem-plugin-better-lit-types',
91+
'@mdx-js/react',
92+
],
93+
exclude: [
94+
'../node_modules/.cache',
95+
'node_modules/.cache',
96+
'lit',
97+
'lit-html',
98+
],
99+
},
100+
plugins: [
101+
nodeResolve({
102+
exportConditions: ['browser', configType?.toLowerCase()],
103+
moduleDirectories: [
104+
'node_modules',
105+
'packages',
106+
'projects',
107+
'tools',
108+
],
109+
}),
110+
ViteCEM({
111+
config: path.join(
112+
rootDir,
113+
'custom-elements-manifest.config.js'
114+
),
115+
}),
116+
// turbosnap({
117+
// rootDir: './',
118+
// }),
119+
tsconfigPaths({
120+
root: rootDir,
121+
loose: true,
122+
}),
123+
],
124+
build: {
125+
sourcemap: configType === 'DEVELOPMENT',
126+
manifest: true,
127+
minify: configType === 'PRODUCTION',
128+
},
129+
esbuild: esBuildSettings,
130+
});
131+
},
132+
// build: {
133+
// test: {
134+
// disabledAddons: ['@storybook/addon-designs'],
135+
// },
136+
// },
137+
// typescript: {
138+
// // Enables the `react-docgen-typescript` parser.
139+
// // See https://storybook.js.org/docs/api/main-config/main-config-typescript for more information about this option.
140+
// reactDocgen: 'react-docgen',
141+
// check: true,
142+
// },
143+
// features: {
144+
// /* Code splitting flag; load stories on-demand */
145+
// storyStoreV7: true,
146+
// /* Builds stories.json to help with on-demand loading */
147+
// buildStoriesJson: true,
148+
// },
149+
refs:
150+
process.env.NODE_ENV === 'development'
151+
? {
152+
'design-system': {
153+
title: 'Spectrum CSS',
154+
url: 'https://opensource.adobe.com/spectrum-css/preview/',
155+
expanded: false, // Optional, true by default
156+
},
157+
}
158+
: {},
159+
};

‎.storybook/manager.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/*!
2+
* Copyright 2025 Adobe. All rights reserved.
3+
*
4+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License. You may obtain a copy
6+
* of the License at <http://www.apache.org/licenses/LICENSE-2.0>
7+
*
8+
* Unless required by applicable law or agreed to in writing, software distributed under
9+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
10+
* OF ANY KIND, either express or implied. See the License for the specific language
11+
* governing permissions and limitations under the License.
12+
*/
13+
14+
import { addons } from '@storybook/manager-api';
15+
import { create } from '@storybook/theming';
16+
17+
addons.setConfig({
18+
theme: create({
19+
base: 'light',
20+
brandTitle: 'Adobe | Spectrum Web Components',
21+
brandUrl: 'https://opensource.adobe.com/spectrum-web-components',
22+
brandTarget: '_self',
23+
typography: {
24+
fonts: {
25+
base: 'adobe-clean, "Adobe Clean", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif',
26+
code: '"Source Code Pro", Monaco, monospace',
27+
},
28+
},
29+
30+
// colorPrimary: "#7326d3",
31+
colorSecondary: 'rgb(2, 101, 220)',
32+
33+
/* Being applied to the active state of radio buttons */
34+
appBg: 'rgb(255, 255, 255)',
35+
/* Being applied to the arg table */
36+
appContentBg: 'rgb(255, 255, 255)',
37+
// appPreviewBg: "rgb(248, 248, 248)",
38+
appBorderColor: 'rgb(213, 213, 213)',
39+
appBorderRadius: 4,
40+
41+
/* Text colors */
42+
fontBase:
43+
'adobe-clean, "Adobe Clean", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif',
44+
fontCode: '"Source Code Pro", Monaco, monospace',
45+
textColor: 'rgb(34, 34, 34)',
46+
textInverseColor: 'rgb(219, 219, 219)',
47+
textMutedColor: 'rgb(175, 175, 175)',
48+
49+
/* Toolbar default and active colors */
50+
barTextColor: 'rgb(34, 34, 34)',
51+
barHoverColor: 'rgb(2, 101, 220)',
52+
barSelectedColor: 'rgb(2, 101, 220)',
53+
barBg: 'rgb(255, 255, 255)',
54+
55+
// buttonBg: "rgb(255, 255, 255)",
56+
// buttonBorder: "transparent",
57+
// booleanBg: "rgb(255, 255, 255)",
58+
// booleanSelectedBg: "rgb(213, 213, 213)",
59+
60+
/* Form colors */
61+
inputBg: 'rgb(255, 255, 255)',
62+
inputBorder: 'rgb(177, 177, 177)',
63+
inputTextColor: 'rgb(34, 34, 34)',
64+
inputBorderRadius: 4,
65+
66+
// gridCellSize?: number;
67+
}),
68+
sidebar: {
69+
showRoots: true,
70+
collapsedRoots: ['tools'],
71+
},
72+
});

‎.storybook/modes/index.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/*!
2+
* Copyright 2024 Adobe. All rights reserved.
3+
*
4+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License. You may obtain a copy
6+
* of the License at <http://www.apache.org/licenses/LICENSE-2.0>
7+
*
8+
* Unless required by applicable law or agreed to in writing, software distributed under
9+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
10+
* OF ANY KIND, either express or implied. See the License for the specific language
11+
* governing permissions and limitations under the License.
12+
*/
13+
14+
const modes = {
15+
'Light | LTR': {
16+
context: 'spectrum-two',
17+
color: 'light',
18+
textDirection: 'ltr',
19+
},
20+
'Dark | RTL': {
21+
context: 'spectrum-two',
22+
color: 'dark',
23+
textDirection: 'rtl',
24+
},
25+
'S1 | Light | LTR': {
26+
context: 'spectrum',
27+
color: 'light',
28+
textDirection: 'ltr',
29+
},
30+
'Express | Light | LTR': {
31+
context: 'express',
32+
color: 'light',
33+
textDirection: 'ltr',
34+
},
35+
};
36+
37+
export default modes;
38+
39+
export const disableDefaultModes = {
40+
...Object.keys(modes).reduce((acc, key) => {
41+
acc[key] = { disable: true };
42+
return acc;
43+
}, {}),
44+
};

‎.storybook/package.json‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
{
2+
"name": "@spectrum-tools/storybook",
3+
"version": "0.0.0",
4+
"description": "A Spectrum storybook for development and testing",
5+
"license": "Apache-2.0",
6+
"author": "Adobe",
7+
"homepage": "https://opensource.adobe.com/spectrum-web-components/",
8+
"repository": {
9+
"type": "git",
10+
"url": "https://github.com/adobe/spectrum-web-components.git",
11+
"directory": ".storybook"
12+
},
13+
"bugs": {
14+
"url": "https://github.com/adobe/spectrum-css/issues"
15+
},
16+
"type": "module",
17+
"exports": {
18+
".": "./preview.js",
19+
"./main": "./main.js",
20+
"./manager": "./manager.js",
21+
"./modes": "./modes/index.js",
22+
"./modes/*": "./modes/*",
23+
"./package.json": "./package.json",
24+
"./preview": "./preview.js",
25+
"./templates/*": "./templates/*",
26+
"./types": "./types/index.js",
27+
"./types/*": "./types/*"
28+
},
29+
"module": "main.js",
30+
"scripts": {
31+
"build": "storybook build --stats-json --config-dir .",
32+
"start": "storybook dev -p 8080 --config-dir .",
33+
"test": "chromatic --build-script-name build"
34+
},
35+
"devDependencies": {
36+
"@babel/core": "^7.26.9",
37+
"@chromatic-com/storybook": "^3.2.4",
38+
"@rollup/plugin-node-resolve": "^16.0.0",
39+
"@storybook/addon-a11y": "^8.5.8",
40+
"@storybook/addon-designs": "^8.2.0",
41+
"@storybook/addon-essentials": "^8.5.8",
42+
"@storybook/addon-interactions": "^8.5.8",
43+
"@storybook/test-runner": "^0.21.3",
44+
"@storybook/web-components-vite": "^8.5.8",
45+
"@types/react": "^18.0.25",
46+
"cem-plugin-better-lit-types": "^0.2.1",
47+
"chromatic": "^11.25.2",
48+
"esbuild": "^0.25.0",
49+
"lightningcss": "1.29.1",
50+
"lit": "^2.5.0 || ^3.1.3",
51+
"lit-html": "^2.4.0 || ^3.1.3",
52+
"lodash-es": "^4.17.21",
53+
"prettier": "^3.5.1",
54+
"react": "^18.2.0",
55+
"react-dom": "^18.2.0",
56+
"react-syntax-highlighter": "^15.6.1",
57+
"remark-gfm": "^4.0.1",
58+
"rollup": "^4.12.0",
59+
"rollup-plugin-postcss-lit": "^2.1.0",
60+
"storybook": "^8.5.8",
61+
"typescript": "^5.7.3",
62+
"vite": "^6.1.1",
63+
"vite-plugin-cem": "^0.8.2",
64+
"vite-plugin-turbosnap": "^1.0.3",
65+
"vite-tsconfig-paths": "^5.1.4"
66+
},
67+
"keywords": [
68+
"design-system",
69+
"spectrum",
70+
"adobe",
71+
"adobe-spectrum"
72+
]
73+
}

0 commit comments

Comments
 (0)