Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 8a52135

Browse files
thepasslethepassle
authored
Merge pull request #2357 from modernweb-dev/feat/sb-addon
Feat/sb addon
2 parents b841d1a + bb7d199 commit 8a52135

File tree

11 files changed

+791
-500
lines changed

11 files changed

+791
-500
lines changed

‎package-lock.json

Lines changed: 374 additions & 487 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/dev-server-storybook/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
"@web/dev-server-core": "^0.5.0",
6565
"@web/rollup-plugin-html": "^2.0.0",
6666
"@web/rollup-plugin-polyfills-loader": "^2.0.0",
67-
"@web/storybook-prebuilt": "^0.1.36",
67+
"@web/storybook-prebuilt": "^0.1.37",
6868
"babel-plugin-bundled-import-meta": "^0.3.2",
6969
"babel-plugin-template-html-minifier": "^4.1.0",
7070
"es-module-lexer": "^1.0.2",

‎packages/mocks/README.md

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -108,14 +108,14 @@ You can also add the `mockRollupPlugin` to your `.storybook/main.cjs` config for
108108

109109
`feature-a/.storybook/main.cjs`:
110110

111-
```js
111+
```diff
112112
module.exports = {
113113
stories: ['../stories/**/*.stories.{js,md,mdx}'],
114-
rollupConfig: async config => {
115-
const { mockRollupPlugin } = await import('@web/mocks/plugins.js');
116-
config.plugins.push(mockRollupPlugin());
117-
return config;
118-
},
114+
+ rollupConfig: async config => {
115+
+ const { mockRollupPlugin } = await import('@web/mocks/plugins.js');
116+
+ config.plugins.push(mockRollupPlugin());
117+
+ return config;
118+
+ },
119119
};
120120
```
121121

@@ -164,6 +164,21 @@ This can be used to avoid CORS issues when deploying your Storybooks.
164164
</details>
165165
<br/>
166166

167+
And add the addon:
168+
`feature-a/.storybook/main.cjs`:
169+
170+
```diff
171+
module.exports = {
172+
stories: ['../stories/**/*.stories.{js,md,mdx}'],
173+
+ addons: ['@web/mocks/storybook/addon.js'],
174+
rollupConfig: async config => {
175+
const { mockRollupPlugin } = await import('@web/mocks/plugins.js');
176+
config.plugins.push(mockRollupPlugin());
177+
return config;
178+
},
179+
};
180+
```
181+
167182
`feature-a/.storybook/preview.js`:
168183

169184
```js

‎packages/mocks/demo/wc/.storybook/main.cjs

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
stories: ['../stories/**/*.stories.js'],
3+
addons: [
4+
'@web/mocks/storybook/addon.js',
5+
],
6+
};

‎packages/mocks/demo/wc/.storybook/preview.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { withMocks } from '../../../storybook/decorator.js';
2+
3+
export const decorators = [
4+
withMocks
5+
];

‎packages/mocks/demo/wc/src/MyFeature.js

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// @ts-nocheck
2+
3+
import { LitElement, html } from 'lit';
4+
5+
class MyElement extends LitElement {
6+
static properties = {
7+
transactions: { type: Array },
8+
state: { type: String },
9+
}
10+
11+
async connectedCallback() {
12+
super.connectedCallback();
13+
this.state = 'PENDING';
14+
try {
15+
this.transactions = await fetch('/api/transactions').then(r => r.json()).then(({ transactions }) => transactions);
16+
this.state = 'SUCCESS'
17+
} catch {
18+
this.state = 'ERROR';
19+
}
20+
}
21+
22+
render() {
23+
switch (this.state) {
24+
case 'PENDING':
25+
return html`<p>Loading...</p>`;
26+
case 'ERROR':
27+
return html`<p>Something went wrong</p>`;
28+
case 'SUCCESS':
29+
return html`
30+
<ul>
31+
${this.transactions.map(t => html`<li>${t}</li>`)}
32+
</ul>
33+
`;
34+
}
35+
}
36+
}
37+
38+
customElements.define('my-element', MyElement);

‎packages/mocks/demo/wc/stories/MyFeature.stories.js

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// @ts-nocheck
2+
3+
import { html } from 'lit';
4+
import { http } from '../../../http.js';
5+
import '../src/MyFeature.js';
6+
7+
export default {
8+
title: 'My feature',
9+
};
10+
11+
const Template = () => html`<my-element></my-element>`;
12+
export const Default = Template.bind({});
13+
Default.parameters = {
14+
mocks: [
15+
http.get('/api/transactions', () => Response.json({transactions: ['foo', 'bar'] })),
16+
http.post('/api/transactions/create', () => Response.json({ ok: true })),
17+
http.put('/api/transactions/update', () => Response.json({ ok: true })),
18+
]
19+
}
20+
21+
export const Second = Template.bind({});
22+
Second.parameters = {
23+
mocks: [
24+
http.get('/api/transactions', () => Response.json({transactions: ['foo', 'bar'] })),
25+
http.post('/api/transactions/create', () => Response.json({ ok: true })),
26+
http.put('/api/transactions/update', () => Response.json({ ok: true })),
27+
]
28+
}
29+
30+
export const NoMocks = Template.bind({});

‎packages/mocks/demo/wc/web-dev-server.config.mjs

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { storybookPlugin } from '@web/dev-server-storybook';
2+
import { mockPlugin } from '../../plugins.js';
3+
4+
export default {
5+
rootDir: '../..',
6+
open: true,
7+
nodeResolve: true,
8+
plugins: [
9+
mockPlugin(),
10+
storybookPlugin({
11+
type: 'web-components',
12+
configDir: 'demo/wc/.storybook',
13+
}),
14+
],
15+
};

‎packages/mocks/package.json

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"types": "./dist-types/storybook/decorator.d.ts",
2828
"default": "./storybook/decorator.js"
2929
},
30+
"./storybook/addon.js": "./storybook/addon.js",
3031
"./plugins.js": {
3132
"types": "./dist-types/plugins.d.ts",
3233
"default": "./plugins.js"
@@ -37,7 +38,8 @@
3738
}
3839
},
3940
"scripts": {
40-
"types": "wireit"
41+
"types": "wireit",
42+
"start": "wds --config demo/wc/web-dev-server.config.mjs"
4143
},
4244
"files": [
4345
"**/*.js",
@@ -49,7 +51,8 @@
4951
"msw"
5052
],
5153
"dependencies": {
52-
"@web/storybook-prebuilt": "^0.1.36",
54+
"@web/storybook-prebuilt": "^0.1.37",
55+
"lit": "^2.7.5",
5356
"msw": "0.0.0-fetch.rc-15"
5457
},
5558
"wireit": {
@@ -65,5 +68,9 @@
6568
],
6669
"dependencies": []
6770
}
71+
},
72+
"devDependencies": {
73+
"@web/dev-server": "^0.2.3",
74+
"@web/dev-server-storybook": "^0.7.2"
6875
}
6976
}

0 commit comments

Comments
 (0)