Skip to content

Commit 4bf5ef1

Browse files
urishurish
authored
Merge pull request #41 from wokwi/storybook-6
Upgrade Storybook to 6.x
2 parents 87e80c4 + 66db6b4 commit 4bf5ef1

File tree

9 files changed

+9485
-11839
lines changed

9 files changed

+9485
-11839
lines changed

‎.storybook/main.js‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
11
module.exports = {
2-
addons: [
3-
'@storybook/addon-actions/register',
4-
'@storybook/addon-docs',
5-
'@storybook/addon-google-analytics/register',
6-
'@storybook/addon-knobs/register',
7-
'storybook-events-logger/dist/register',
8-
],
2+
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
3+
addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-knobs'],
4+
5+
// See https://github.com/storybookjs/storybook/issues/12578#issuecomment-702664081
6+
babel: async (options) => {
7+
Object.assign(
8+
options.plugins.find((plugin) => plugin[0].includes('plugin-proposal-decorators'))[1],
9+
{
10+
decoratorsBeforeExport: true,
11+
legacy: false,
12+
}
13+
);
14+
return options;
15+
},
916
};

‎.storybook/preview.js‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,23 @@
1-
import { configure } from '@storybook/web-components';
2-
import { setCustomElements } from '@storybook/web-components';
1+
2+
export const parameters = {
3+
actions: { argTypesRegex: "^on[A-Z].*" },
4+
}
5+
6+
import { configure, setCustomElements } from '@storybook/web-components';
37
import customElements from '../custom-elements.json';
48

5-
// automatically import all files ending in *.stories.ts
6-
const req = require.context('../src', true, /\.stories\.ts$/);
9+
// Configure Storybook Docs Addon for Web Components
10+
setCustomElements(customElements);
11+
12+
// force full reload to not re-register web components
13+
const req = require.context('../src', true, /\.stories\.(ts|js)$/);
14+
715
configure(req, module);
16+
817
if (module.hot) {
918
module.hot.accept(req.id, () => {
1019
const currentLocationHref = window.location.href;
1120
window.history.pushState(null, null, currentLocationHref);
1221
window.location.reload();
1322
});
1423
}
15-
16-
// Configure Storybook Docs Addon for Web Components
17-
setCustomElements(customElements);

‎.storybook/webpack.config.js‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎package-lock.json‎

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

‎package.json‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -11,29 +11,29 @@
1111
"dist"
1212
],
1313
"devDependencies": {
14-
"@babel/core": "^7.10.5",
15-
"@storybook/addon-actions": "^5.3.19",
16-
"@storybook/addon-docs": "^5.3.19",
17-
"@storybook/addon-google-analytics": "^5.3.19",
18-
"@storybook/addon-knobs": "^5.3.19",
19-
"@storybook/web-components": "^5.3.19",
14+
"@babel/core": "^7.11.4",
15+
"@storybook/addon-actions": "^6.1.11",
16+
"@storybook/addon-essentials": "^6.1.11",
17+
"@storybook/addon-knobs": "^6.1.11",
18+
"@storybook/addon-links": "^6.1.11",
19+
"@storybook/web-components": "^6.1.11",
2020
"@typescript-eslint/eslint-plugin": "^2.34.0",
2121
"@typescript-eslint/parser": "^2.34.0",
22-
"awesome-typescript-loader": "^5.2.1",
2322
"babel-loader": "^8.1.0",
2423
"eslint": "^6.8.0",
2524
"eslint-config-prettier": "^6.11.0",
26-
"eslint-plugin-json": "^2.1.1",
25+
"eslint-plugin-json": "^2.1.2",
2726
"eslint-plugin-prettier": "^3.1.4",
2827
"husky": "^4.2.5",
2928
"hygen": "^5.0.3",
3029
"lint-staged": "^10.2.11",
30+
"lit-html": "^1.3.0",
3131
"prettier": "^2.0.5",
32+
"react-is": "^16.13.1",
3233
"rimraf": "^3.0.2",
33-
"rollup": "^2.22.1",
34+
"rollup": "^2.23.0",
3435
"rollup-plugin-commonjs": "^10.1.0",
3536
"rollup-plugin-node-resolve": "^5.2.0",
36-
"storybook-events-logger": "^2.0.5",
3737
"terser": "^4.8.0",
3838
"typescript": "^3.9.7",
3939
"web-component-analyzer": "^1.1.6"

‎src/arduino-nano-element.stories.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { boolean, withKnobs } from '@storybook/addon-knobs';
22
import { storiesOf } from '@storybook/web-components';
33
import { html } from 'lit-html';
4-
import { logEvent } from 'storybook-events-logger';
4+
import { action } from '@storybook/addon-actions';
55
import './arduino-nano-element';
66

77
storiesOf('Arduino Nano', module)
@@ -15,8 +15,8 @@ storiesOf('Arduino Nano', module)
1515
.ledTX=${boolean('TX LED', false)}
1616
.ledRX=${boolean('RX LED', false)}
1717
.ledPower=${boolean('Power LED', true)}
18-
@button-press=${logEvent}
19-
@button-release=${logEvent}
18+
@button-press=${action('button-press')}
19+
@button-release=${action('button-press')}
2020
></wokwi-arduino-nano>
2121
`
2222
);

‎src/membrane-keypad-element.stories.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1+
import { action } from '@storybook/addon-actions';
12
import { storiesOf } from '@storybook/web-components';
23
import { html } from 'lit-html';
3-
import { logEvent } from 'storybook-events-logger';
44
import './membrane-keypad-element';
55

66
storiesOf('Membrane Keypad', module)
@@ -9,17 +9,17 @@ storiesOf('Membrane Keypad', module)
99
'Default',
1010
() => html`
1111
<wokwi-membrane-keypad
12-
@button-press=${logEvent}
13-
@button-release=${logEvent}
12+
@button-press=${action('button-press')}
13+
@button-release=${action('button-release')}
1414
></wokwi-membrane-keypad>
1515
`
1616
)
1717
.add(
1818
'With connector',
1919
() => html`
2020
<wokwi-membrane-keypad
21-
@button-press=${logEvent}
22-
@button-release=${logEvent}
21+
@button-press=${action('button-press')}
22+
@button-release=${action('button-release')}
2323
.connector=${true}
2424
></wokwi-membrane-keypad>
2525
`
@@ -28,8 +28,8 @@ storiesOf('Membrane Keypad', module)
2828
'Custom keys',
2929
() => html`
3030
<wokwi-membrane-keypad
31-
@button-press=${logEvent}
32-
@button-release=${logEvent}
31+
@button-press=${action('button-press')}
32+
@button-release=${action('button-release')}
3333
.keys=${['1', '2', '3', '4', 'Q', 'W', 'E', 'R', 'A', 'S', 'D', 'F', '!', '@', '#', '$']}
3434
></wokwi-membrane-keypad>
3535
`
@@ -39,8 +39,8 @@ storiesOf('Membrane Keypad', module)
3939
() => html`
4040
<wokwi-membrane-keypad
4141
columns="3"
42-
@button-press=${logEvent}
43-
@button-release=${logEvent}
42+
@button-press=${action('button-press')}
43+
@button-release=${action('button-release')}
4444
></wokwi-membrane-keypad>
4545
`
4646
)
@@ -49,8 +49,8 @@ storiesOf('Membrane Keypad', module)
4949
() => html`
5050
<wokwi-membrane-keypad
5151
columns="3"
52-
@button-press=${logEvent}
53-
@button-release=${logEvent}
52+
@button-press=${action('button-press')}
53+
@button-release=${action('button-release')}
5454
.connector=${true}
5555
></wokwi-membrane-keypad>
5656
`

‎src/potentiometer-element.stories.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1+
import { action } from '@storybook/addon-actions';
12
import { storiesOf } from '@storybook/web-components';
23
import { html } from 'lit-html';
3-
import { logEvent } from 'storybook-events-logger';
44
import './potentiometer-element';
55

66
storiesOf('Potentiometer', module)
77
.addParameters({ component: 'wokwi-potentiometer' })
88
.add(
99
'Potentiometer',
10-
() => html` <wokwi-potentiometer min="0" max="200" @input=${logEvent}></wokwi-potentiometer> `
10+
() =>
11+
html`
12+
<wokwi-potentiometer min="0" max="200" @input=${action('input')}></wokwi-potentiometer>
13+
`
1114
);

‎src/rotary-dailer-element.stories.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { withKnobs, number } from '@storybook/addon-knobs';
1+
import { action } from '@storybook/addon-actions';
2+
import { withKnobs } from '@storybook/addon-knobs';
23
import { storiesOf } from '@storybook/web-components';
34
import { html } from 'lit-html';
45
import './rotary-dialer-element';
5-
import { logEvent } from 'storybook-events-logger';
66

77
storiesOf('Rotary Dialer', module)
88
.addParameters({ component: 'wokwi-rotary-dialer' })
@@ -12,9 +12,9 @@ storiesOf('Rotary Dialer', module)
1212
() =>
1313
html`
1414
<wokwi-rotary-dialer
15-
@dial=${logEvent}
16-
@dial-start=${logEvent}
17-
@dial-end=${logEvent}
15+
@dial=${action('dial')}
16+
@dial-start=${action('dial-start')}
17+
@dial-end=${action('dial-end')}
1818
></wokwi-rotary-dialer>
1919
`
2020
);

0 commit comments

Comments
 (0)