chore: update @web/mocks demo to storybook-builder

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;

packages/mocks/demo/wc/src/MyFeature.js → 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);

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`<my-element></my-element>`,
+};
+
+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 })),
+    ],
+  },
+};

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": {