Skip to content

Commit

Permalink
docs: update to [email protected] via @web/storybook-builder (#3730)
Browse files Browse the repository at this point in the history
* docs: test Storybook 7 instead of WDS-storybook

* docs: use wds storybook

* chore: make it work with latest version in github branch

* chore: use framework

* chore: use latest storybook

* chore: use latest versions with middleware modeOC

* chore: take latest versions

* docs: correct dist dir for Storybook CEM creation

* chore: versions

* chore: trim addons

* chore: remove patches with latest versions

* docs: link CSS storybook

* chore: patch dependencies for watch mode in storybook

* refactor: use full releases of dependencies

---------

Co-authored-by: Mikhail Bashkirov <[email protected]>
  • Loading branch information
Westbrook Johnson and bashmish authored Oct 18, 2023
1 parent f633005 commit c744102
Show file tree
Hide file tree
Showing 17 changed files with 3,254 additions and 494 deletions.
1 change: 0 additions & 1 deletion .github/workflows/publish.yml
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ jobs:
- name: Deploy to GitHub Pages
run: |
git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
touch projects/documentation/dist/.nojekyll
npx gh-pages -d projects/documentation/dist -m "[skip ci] update demonstration site" -t -u "github-actions-bot <[email protected]>"
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
18 changes: 0 additions & 18 deletions .storybook/main.cjs

This file was deleted.

9 changes: 0 additions & 9 deletions .storybook/manager.js

This file was deleted.

20 changes: 0 additions & 20 deletions .storybook/preview.js

This file was deleted.

6 changes: 0 additions & 6 deletions .storybook/types.d.ts

This file was deleted.

7 changes: 6 additions & 1 deletion netlify.toml
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
[build]
command = "yarn docs:build"
publish = "projects/documentation/dist"
publish = "projects/documentation/dist"

[[headers]]
for = "/storybook/*.json"
[headers.values]
Access-Control-Allow-Origin = "*"
33 changes: 20 additions & 13 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
"prelerna-publish": "rimraf react && yarn get-ready && yarn custom-element-json && yarn build:confirm",
"prepare": "husky install",
"prestorybook": "wireit",
"prestorybook:build": "cem analyze --outdir .storybook/",
"prestorybook:build": "cem analyze --outdir storybook/",
"pretest:bench": "yarn build:tests && test -f test/benchmark/cli.js ||:",
"pretest:visual": "yarn build && yarn build",
"process-icons": "wireit",
Expand All @@ -64,7 +64,7 @@
"spectrum-vars": "wireit",
"start": "yarn storybook",
"storybook": "wireit",
"storybook:build": "build-storybook -o projects/documentation/dist/storybook",
"storybook:build": "NODE_ENV=production storybook build -o projects/documentation/dist/storybook -c storybook",
"storybook:quick": "run-p build:watch storybook:run",
"storybook:run": "web-dev-server --config wds-storybook.config.js",
"test": "yarn test:focus unit",
Expand Down Expand Up @@ -102,11 +102,15 @@
"@netlify/build": "^29.1.0",
"@open-wc/dev-server-hmr": "^0.2.0",
"@open-wc/testing": "^3.2.0",
"@rollup/plugin-commonjs": "^25.0.3",
"@rollup/plugin-commonjs": "^25.0.4",
"@rollup/plugin-json": "^6.0.0",
"@rollup/plugin-node-resolve": "^15.1.0",
"@rollup/plugin-node-resolve": "^15.2.1",
"@sindresorhus/slugify": "^2.1.1",
"@spectrum-web-components/eslint-plugin": "file:./linters/eslint",
"@storybook/addon-a11y": "^7.5.0",
"@storybook/addon-essentials": "^7.5.0",
"@storybook/addon-links": "^7.5.0",
"@storybook/web-components": "^7.5.0",
"@types/chai": "^4.1.7",
"@types/command-line-args": "^5.0.0",
"@types/command-line-usage": "^5.0.1",
Expand All @@ -118,11 +122,12 @@
"@types/webpack-env": "^1.13.9",
"@typescript-eslint/eslint-plugin": "^5.35.0",
"@typescript-eslint/parser": "^5.35.0",
"@web/dev-server": "^0.3.1",
"@web/dev-server-rollup": "^0.5.2",
"@web/dev-server-storybook": "^1.0.5",
"@web/dev-server": "^0.3.4",
"@web/dev-server-rollup": "^0.5.3",
"@web/rollup-plugin-copy": "^0.4.0",
"@web/rollup-plugin-html": "^2.0.1",
"@web/storybook-builder": "^0.1.2",
"@web/storybook-framework-web-components": "^0.1.1",
"@web/test-runner": "^0.17.1",
"@web/test-runner-commands": "^0.8.0",
"@web/test-runner-junit-reporter": "^0.6.1",
Expand All @@ -146,6 +151,7 @@
"eslint-plugin-lit-a11y": "^2.2.2",
"eslint-plugin-notice": "^0.9.10",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-storybook": "^0.6.13",
"express": "^4.16.4",
"fast-glob": "^3.2.12",
"fs-extra": "^11.1.1",
Expand All @@ -159,6 +165,7 @@
"lightningcss": "^1.19.0",
"lit": "^2.5.0",
"lit-analyzer": "^1.2.1",
"lit-html": "^2.4.0",
"mocha-junit-reporter": "^2.0.2",
"netlify-cli": "^15.9.0",
"next": "^13.4.1",
Expand All @@ -180,9 +187,12 @@
"pretty-bytes": "^5.6.0",
"pretty-quick": "^3.1.3",
"re-template-tag": "^2.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"rimraf": "^5.0.1",
"rollup": "^3.27.2",
"sinon": "^15.2.0",
"storybook": "^7.5.0",
"stylelint": "^15.10.2",
"stylelint-config-prettier": "^9.0.5",
"stylelint-config-standard": "^34.0.0",
Expand Down Expand Up @@ -346,13 +356,13 @@
"clean": "if-file-deleted"
},
"prestorybook": {
"command": "cem analyze --outdir .storybook/",
"command": "cem analyze --outdir storybook/",
"files": [
"packages/**/*.ts",
"tools/**/*.ts"
],
"output": [
".storybook/custom-elements.json"
"storybook/custom-elements.json"
]
},
"process-icons": {
Expand Down Expand Up @@ -382,11 +392,8 @@
"clean": false
},
"storybook": {
"command": "web-dev-server --config wds-storybook.config.js",
"command": "storybook dev -p 8080 -c storybook",
"service": true,
"files": [
"wds-storybook.config.js"
],
"dependencies": [
"build:watch",
"prestorybook"
Expand Down
86 changes: 86 additions & 0 deletions storybook/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
/*
Copyright 2022 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/
import rollupJson from '@rollup/plugin-json';
import { mergeConfigs } from '@web/dev-server';
import { fromRollup } from '@web/dev-server-rollup';
import { watchSWC } from '../web-test-runner.utils.js';

/** @type { import('storybook-builder-wds').StorybookConfigWds } */
const config = {
stories: [
'../packages/*/stories/*.stories.js',
'../tools/*/stories/*.stories.js',
],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-a11y',
],
framework: {
name: '@web/storybook-framework-web-components',
},
wdsFinal(config) {
const json = fromRollup(rollupJson);
return mergeConfigs(config, {
nodeResolve: {
exportConditions: ['browser', 'development'],
moduleDirectories: [
'node_modules',
'packages',
'projects',
'tools',
],
},
clearTerminalOnReload: false,
mimeTypes: {
'**/*.json': 'js',
},
plugins: [json(), watchSWC()],
http2: true,
watch: true,
middleware: [
async (ctx, next) => {
await next();
if (
// Icon packages
ctx.url.search('/icons-') > -1 ||
// Node modules
(ctx.url.search('/node_modules/') > -1 &&
ctx.url.search('/@spectrum-web-components') === -1)
) {
ctx.set(
'Cache-Control',
'public, max-age=604800, stale-while-revalidate=86400'
);
}
},
],
});
},
rollupFinal(config) {
// add a new plugin to the build
config.plugins.push(rollupJson());
return config;
},
};

if (process.env.NODE_ENV === 'development') {
config.refs = {
'design-system': {
title: 'Spectrum CSS',
url: 'https://opensource.adobe.com/spectrum-css/preview/',
expanded: false, // Optional, true by default
},
};
}

export default config;
20 changes: 20 additions & 0 deletions storybook/manager.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/*
Copyright 2022 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/
import { addons } from '@storybook/addons';
import yourTheme from './theme.js';

addons.setConfig({
theme: yourTheme,
sidebar: {
showRoots: false,
},
});
File renamed without changes.
24 changes: 24 additions & 0 deletions storybook/preview.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/*
Copyright 2022 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/
import { setCustomElementsManifest } from '@storybook/web-components';
import { swcThemeDecorator } from '@spectrum-web-components/story-decorator/decorator.js';
import cem from './custom-elements.json';

setCustomElementsManifest(cem);

export const parameters = {
docs: { hidden: true },
controls: { expanded: true },
layout: 'fullscreen',
};

export const decorators = [swcThemeDecorator];
13 changes: 12 additions & 1 deletion .storybook/theme.js → storybook/theme.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,15 @@
import { create } from '@web/storybook-prebuilt/theming/create.js';
/*
Copyright 2022 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/
import { create } from '@storybook/theming/create';

export default create({
brandTitle: 'Spectrum Web Components',
Expand Down
File renamed without changes.
17 changes: 17 additions & 0 deletions storybook/types.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/*
Copyright 2022 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/
import { TemplateResult } from '@spectrum-web-components/base';

export interface Story<T> {
(args?: T): TemplateResult;
args: Partial<T>;
}
Loading

0 comments on commit c744102

Please sign in to comment.