Upgrade Storybook to 6.x

.storybook/main.js

@@ -1,9 +1,16 @@
 module.exports = {
-  addons: [
-    '@storybook/addon-actions/register',
-    '@storybook/addon-docs',
-    '@storybook/addon-google-analytics/register',
-    '@storybook/addon-knobs/register',
-    'storybook-events-logger/dist/register',
-  ],
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-knobs'],
+
+  // See https://github.com/storybookjs/storybook/issues/12578#issuecomment-702664081
+  babel: async (options) => {
+    Object.assign(
+      options.plugins.find((plugin) => plugin[0].includes('plugin-proposal-decorators'))[1],
+      {
+        decoratorsBeforeExport: true,
+        legacy: false,
+      }
+    );
+    return options;
+  },
 };

.storybook/preview.js

@@ -1,17 +1,23 @@
-import { configure } from '@storybook/web-components';
-import { setCustomElements } from '@storybook/web-components';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}
+
+import { configure, setCustomElements } from '@storybook/web-components';
 import customElements from '../custom-elements.json';
 
-// automatically import all files ending in *.stories.ts
-const req = require.context('../src', true, /\.stories\.ts$/);
+// Configure Storybook Docs Addon for Web Components
+setCustomElements(customElements);
+
+// force full reload to not re-register web components
+const req = require.context('../src', true, /\.stories\.(ts|js)$/);
+
 configure(req, module);
+
 if (module.hot) {
   module.hot.accept(req.id, () => {
     const currentLocationHref = window.location.href;
     window.history.pushState(null, null, currentLocationHref);
     window.location.reload();
   });
 }
-
-// Configure Storybook Docs Addon for Web Components
-setCustomElements(customElements);

package.json

@@ -11,29 +11,29 @@
     "dist"
   ],
   "devDependencies": {
-    "@babel/core": "^7.10.5",
-    "@storybook/addon-actions": "^5.3.19",
-    "@storybook/addon-docs": "^5.3.19",
-    "@storybook/addon-google-analytics": "^5.3.19",
-    "@storybook/addon-knobs": "^5.3.19",
-    "@storybook/web-components": "^5.3.19",
+    "@babel/core": "^7.11.4",
+    "@storybook/addon-actions": "^6.1.11",
+    "@storybook/addon-essentials": "^6.1.11",
+    "@storybook/addon-knobs": "^6.1.11",
+    "@storybook/addon-links": "^6.1.11",
+    "@storybook/web-components": "^6.1.11",
     "@typescript-eslint/eslint-plugin": "^2.34.0",
     "@typescript-eslint/parser": "^2.34.0",
-    "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.1.0",
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-json": "^2.1.1",
+    "eslint-plugin-json": "^2.1.2",
     "eslint-plugin-prettier": "^3.1.4",
     "husky": "^4.2.5",
     "hygen": "^5.0.3",
     "lint-staged": "^10.2.11",
+    "lit-html": "^1.3.0",
     "prettier": "^2.0.5",
+    "react-is": "^16.13.1",
     "rimraf": "^3.0.2",
-    "rollup": "^2.22.1",
+    "rollup": "^2.23.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "storybook-events-logger": "^2.0.5",
     "terser": "^4.8.0",
     "typescript": "^3.9.7",
     "web-component-analyzer": "^1.1.6"

src/arduino-nano-element.stories.ts

@@ -1,7 +1,7 @@
 import { boolean, withKnobs } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/web-components';
 import { html } from 'lit-html';
-import { logEvent } from 'storybook-events-logger';
+import { action } from '@storybook/addon-actions';
 import './arduino-nano-element';
 
 storiesOf('Arduino Nano', module)
@@ -15,8 +15,8 @@ storiesOf('Arduino Nano', module)
         .ledTX=${boolean('TX LED', false)}
         .ledRX=${boolean('RX LED', false)}
         .ledPower=${boolean('Power LED', true)}
-        @button-press=${logEvent}
-        @button-release=${logEvent}
+        @button-press=${action('button-press')}
+        @button-release=${action('button-press')}
       ></wokwi-arduino-nano>
     `
   );

src/membrane-keypad-element.stories.ts

@@ -1,6 +1,6 @@
+import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/web-components';
 import { html } from 'lit-html';
-import { logEvent } from 'storybook-events-logger';
 import './membrane-keypad-element';
 
 storiesOf('Membrane Keypad', module)
@@ -9,17 +9,17 @@ storiesOf('Membrane Keypad', module)
     'Default',
     () => html`
       <wokwi-membrane-keypad
-        @button-press=${logEvent}
-        @button-release=${logEvent}
+        @button-press=${action('button-press')}
+        @button-release=${action('button-release')}
       ></wokwi-membrane-keypad>
     `
   )
   .add(
     'With connector',
     () => html`
       <wokwi-membrane-keypad
-        @button-press=${logEvent}
-        @button-release=${logEvent}
+        @button-press=${action('button-press')}
+        @button-release=${action('button-release')}
         .connector=${true}
       ></wokwi-membrane-keypad>
     `
@@ -28,8 +28,8 @@ storiesOf('Membrane Keypad', module)
     'Custom keys',
     () => html`
       <wokwi-membrane-keypad
-        @button-press=${logEvent}
-        @button-release=${logEvent}
+        @button-press=${action('button-press')}
+        @button-release=${action('button-release')}
         .keys=${['1', '2', '3', '4', 'Q', 'W', 'E', 'R', 'A', 'S', 'D', 'F', '!', '@', '#', '$']}
       ></wokwi-membrane-keypad>
     `
@@ -39,8 +39,8 @@ storiesOf('Membrane Keypad', module)
     () => html`
       <wokwi-membrane-keypad
         columns="3"
-        @button-press=${logEvent}
-        @button-release=${logEvent}
+        @button-press=${action('button-press')}
+        @button-release=${action('button-release')}
       ></wokwi-membrane-keypad>
     `
   )
@@ -49,8 +49,8 @@ storiesOf('Membrane Keypad', module)
     () => html`
       <wokwi-membrane-keypad
         columns="3"
-        @button-press=${logEvent}
-        @button-release=${logEvent}
+        @button-press=${action('button-press')}
+        @button-release=${action('button-release')}
         .connector=${true}
       ></wokwi-membrane-keypad>
     `

src/potentiometer-element.stories.ts

@@ -1,11 +1,14 @@
+import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/web-components';
 import { html } from 'lit-html';
-import { logEvent } from 'storybook-events-logger';
 import './potentiometer-element';
 
 storiesOf('Potentiometer', module)
   .addParameters({ component: 'wokwi-potentiometer' })
   .add(
     'Potentiometer',
-    () => html` <wokwi-potentiometer min="0" max="200" @input=${logEvent}></wokwi-potentiometer> `
+    () =>
+      html`
+        <wokwi-potentiometer min="0" max="200" @input=${action('input')}></wokwi-potentiometer>
+      `
   );

src/rotary-dailer-element.stories.ts

@@ -1,8 +1,8 @@
-import { withKnobs, number } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+import { withKnobs } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/web-components';
 import { html } from 'lit-html';
 import './rotary-dialer-element';
-import { logEvent } from 'storybook-events-logger';
 
 storiesOf('Rotary Dialer', module)
   .addParameters({ component: 'wokwi-rotary-dialer' })
@@ -12,9 +12,9 @@ storiesOf('Rotary Dialer', module)
     () =>
       html`
         <wokwi-rotary-dialer
-          @dial=${logEvent}
-          @dial-start=${logEvent}
-          @dial-end=${logEvent}
+          @dial=${action('dial')}
+          @dial-start=${action('dial-start')}
+          @dial-end=${action('dial-end')}
         ></wokwi-rotary-dialer>
       `
   );