From 875ac0294c3dd26e679317ecba7d134db041b165 Mon Sep 17 00:00:00 2001 From: Mikhail Bashkirov Date: Wed, 24 Dec 2025 19:31:56 +0400 Subject: [PATCH] chore: update @web/mocks demo to storybook-builder --- package-lock.json | 4 +-- packages/mocks/demo/wc/.storybook/main.cjs | 6 ---- packages/mocks/demo/wc/.storybook/main.js | 9 ++++++ packages/mocks/demo/wc/.storybook/preview.js | 5 --- .../wc/src/{MyFeature.js => MyElement.js} | 4 +-- .../demo/wc/stories/MyFeature.stories.js | 30 ----------------- .../demo/wc/stories/my-element.stories.js | 32 +++++++++++++++++++ .../mocks/demo/wc/web-dev-server.config.mjs | 15 --------- packages/mocks/package.json | 6 ++-- 9 files changed, 47 insertions(+), 64 deletions(-) delete mode 100644 packages/mocks/demo/wc/.storybook/main.cjs create mode 100644 packages/mocks/demo/wc/.storybook/main.js delete mode 100644 packages/mocks/demo/wc/.storybook/preview.js rename packages/mocks/demo/wc/src/{MyFeature.js => MyElement.js} (90%) delete mode 100644 packages/mocks/demo/wc/stories/MyFeature.stories.js create mode 100644 packages/mocks/demo/wc/stories/my-element.stories.js delete mode 100644 packages/mocks/demo/wc/web-dev-server.config.mjs diff --git a/package-lock.json b/package-lock.json index d25393b8d..d2ad1c037 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36197,8 +36197,8 @@ "msw": "2.4.1" }, "devDependencies": { - "@web/dev-server": "^0.4.6", - "@web/dev-server-storybook": "^2.0.0" + "@web/storybook-builder": "^0.2.2", + "@web/storybook-framework-web-components": "^0.2.1" } }, "packages/mocks/node_modules/@mswjs/interceptors": { diff --git a/packages/mocks/demo/wc/.storybook/main.cjs b/packages/mocks/demo/wc/.storybook/main.cjs deleted file mode 100644 index e263b2210..000000000 --- a/packages/mocks/demo/wc/.storybook/main.cjs +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - stories: ['../stories/**/*.stories.js'], - addons: [ - '@web/mocks/storybook/addon.js', - ], -}; diff --git a/packages/mocks/demo/wc/.storybook/main.js b/packages/mocks/demo/wc/.storybook/main.js new file mode 100644 index 000000000..999d1e5c4 --- /dev/null +++ b/packages/mocks/demo/wc/.storybook/main.js @@ -0,0 +1,9 @@ +/** @type { import('../../../../index.d.ts').StorybookConfig } */ +const config = { + stories: ['../stories/**/*.stories.js'], + addons: ['@web/mocks/storybook-addon'], + framework: { + name: '@web/storybook-framework-web-components', + }, +}; +export default config; diff --git a/packages/mocks/demo/wc/.storybook/preview.js b/packages/mocks/demo/wc/.storybook/preview.js deleted file mode 100644 index d315ba81e..000000000 --- a/packages/mocks/demo/wc/.storybook/preview.js +++ /dev/null @@ -1,5 +0,0 @@ -import { withMocks } from '../../../storybook/decorator.js'; - -export const decorators = [ - withMocks -]; \ No newline at end of file diff --git a/packages/mocks/demo/wc/src/MyFeature.js b/packages/mocks/demo/wc/src/MyElement.js similarity index 90% rename from packages/mocks/demo/wc/src/MyFeature.js rename to packages/mocks/demo/wc/src/MyElement.js index 72b89f660..38b3b1570 100644 --- a/packages/mocks/demo/wc/src/MyFeature.js +++ b/packages/mocks/demo/wc/src/MyElement.js @@ -2,7 +2,7 @@ import { LitElement, html } from 'lit'; -class MyElement extends LitElement { +export class MyElement extends LitElement { static properties = { transactions: { type: Array }, state: { type: String }, @@ -34,5 +34,3 @@ class MyElement extends LitElement { } } } - -customElements.define('my-element', MyElement); diff --git a/packages/mocks/demo/wc/stories/MyFeature.stories.js b/packages/mocks/demo/wc/stories/MyFeature.stories.js deleted file mode 100644 index e82a62f32..000000000 --- a/packages/mocks/demo/wc/stories/MyFeature.stories.js +++ /dev/null @@ -1,30 +0,0 @@ -// @ts-nocheck - -import { html } from 'lit'; -import { http } from '../../../http.js'; -import '../src/MyFeature.js'; - -export default { - title: 'My feature', -}; - -const Template = () => html``; -export const Default = Template.bind({}); -Default.parameters = { - mocks: [ - http.get('/api/transactions', () => Response.json({transactions: ['foo', 'bar'] })), - http.post('/api/transactions/create', () => Response.json({ ok: true })), - http.put('/api/transactions/update', () => Response.json({ ok: true })), - ] -} - -export const Second = Template.bind({}); -Second.parameters = { - mocks: [ - http.get('/api/transactions', () => Response.json({transactions: ['foo', 'bar'] })), - http.post('/api/transactions/create', () => Response.json({ ok: true })), - http.put('/api/transactions/update', () => Response.json({ ok: true })), - ] -} - -export const NoMocks = Template.bind({}); diff --git a/packages/mocks/demo/wc/stories/my-element.stories.js b/packages/mocks/demo/wc/stories/my-element.stories.js new file mode 100644 index 000000000..ef8c20698 --- /dev/null +++ b/packages/mocks/demo/wc/stories/my-element.stories.js @@ -0,0 +1,32 @@ +// @ts-nocheck + +import { html } from 'lit'; +import { http } from '../../../http.js'; +import { MyElement } from '../src/MyElement.js'; + +customElements.define('my-element', MyElement); + +export default { + title: 'My element', + render: () => html``, +}; + +export const Default = { + parameters: { + mocks: [ + http.get('/api/transactions', () => Response.json({ transactions: ['foo', 'bar'] })), + http.post('/api/transactions/create', () => Response.json({ ok: true })), + http.put('/api/transactions/update', () => Response.json({ ok: true })), + ], + }, +}; + +export const Second = { + parameters: { + mocks: [ + http.get('/api/transactions', () => Response.json({ transactions: ['foo 2', 'bar 2'] })), + http.post('/api/transactions/create', () => Response.json({ ok: true })), + http.put('/api/transactions/update', () => Response.json({ ok: true })), + ], + }, +}; diff --git a/packages/mocks/demo/wc/web-dev-server.config.mjs b/packages/mocks/demo/wc/web-dev-server.config.mjs deleted file mode 100644 index 74975eca4..000000000 --- a/packages/mocks/demo/wc/web-dev-server.config.mjs +++ /dev/null @@ -1,15 +0,0 @@ -import { storybookPlugin } from '@web/dev-server-storybook'; -import { mockPlugin } from '../../plugins.js'; - -export default { - rootDir: '../..', - open: true, - nodeResolve: true, - plugins: [ - mockPlugin(), - storybookPlugin({ - type: 'web-components', - configDir: 'demo/wc/.storybook', - }), - ], -}; diff --git a/packages/mocks/package.json b/packages/mocks/package.json index 385f25e9d..522342228 100644 --- a/packages/mocks/package.json +++ b/packages/mocks/package.json @@ -50,7 +50,7 @@ } }, "scripts": { - "start": "wds --config demo/wc/web-dev-server.config.mjs", + "start": "storybook dev -c ./demo/wc/.storybook", "test:browser": "node ../test-runner/dist/bin.js test-browser/*.test.js --config test-browser/web-test-runner.config.js", "types": "wireit" }, @@ -72,8 +72,8 @@ "msw": "2.4.1" }, "devDependencies": { - "@web/dev-server": "^0.4.6", - "@web/dev-server-storybook": "^2.0.0" + "@web/storybook-builder": "^0.2.2", + "@web/storybook-framework-web-components": "^0.2.1" }, "imports": { "#sw-path": {