fix(storybook): display events payload

Author: urish

.storybook/main.js

@@ -4,5 +4,6 @@ module.exports = {
     '@storybook/addon-docs',
     '@storybook/addon-google-analytics/register',
     '@storybook/addon-knobs/register',
+    'storybook-events-logger/dist/register',
   ],
 };

package-lock.json

@@ -30,6 +30,7 @@
     "lint-staged": "^10.0.10",
     "prettier": "^2.0.2",
     "rimraf": "^3.0.0",
+    "storybook-events-logger": "^2.0.5",
     "typescript": "^3.7.3",
     "web-component-analyzer": "^1.0.3"
   },

package.json

@@ -1,17 +1,16 @@
-import { withActions, 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)
   .addParameters({ component: 'wokwi-membrane-keypad' })
-  .addDecorator(withActions())
   .add(
     'Default',
     () => html`
       <wokwi-membrane-keypad
-        @button-press=${action('button-press')}
-        @button-release=${action('button-release')}
+        @button-press=${logEvent}
+        @button-release=${logEvent}
       ></wokwi-membrane-keypad>
     `
   )
@@ -20,8 +19,8 @@ storiesOf('Membrane Keypad', module)
     () => html`
       <wokwi-membrane-keypad
         .threeColumns="${true}"
-        @button-press=${action('button-press')}
-        @button-release=${action('button-release')}
+        @button-press=${logEvent}
+        @button-release=${logEvent}
       ></wokwi-membrane-keypad>
     `
   );

src/membrane-keypad-element.stories.ts

@@ -1,18 +1,11 @@
 import { storiesOf } from '@storybook/web-components';
-import { action } from '@storybook/addon-actions';
 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=${action('potentiometer-value-changed')}
-        ></wokwi-potentiometer>
-      `
+    () => html` <wokwi-potentiometer min="0" max="200" @input=${logEvent}></wokwi-potentiometer> `
   );

src/potentiometer-element.stories.ts

@@ -0,0 +1,3 @@
+declare module 'storybook-events-logger' {
+  export function logEvent(e: Event): void;
+}