Autogenerate event handlers.

addons/docs/src/frameworks/web-components/custom-elements.ts

@@ -1,10 +1,10 @@
 import { getCustomElements, isValidComponent, isValidMetaData } from '@storybook/web-components';
-import { ArgTypes } from '@storybook/api';
+import { ArgType, ArgTypes } from '@storybook/api';
 import { logger } from '@storybook/client-logger';
 
 interface TagItem {
   name: string;
-  type: { text: string };
+  type: { [key: string]: any };
   description: string;
   default?: any;
   kind?: string;
@@ -50,30 +50,57 @@ function mapData(data: TagItem[], category: string) {
   return (
     data &&
     data
-      .filter((item) => !!item)
+      .filter((item) => item && item.name)
       .reduce((acc, item) => {
         if (item.kind === 'method') return acc;
 
         const type =
           category === 'properties' ? { name: item.type?.text || item.type } : { name: 'void' };
-        acc[item.name] = {
-          name: item.name,
-          required: false,
-          description: item.description,
-          type,
-          table: {
-            category,
-            type: { summary: item.type?.text || item.type },
-            defaultValue: {
-              summary: item.default !== undefined ? item.default : item.defaultValue,
-            },
-          },
-        };
+
+        switch (category) {
+          case 'events':
+            // eslint-disable-next-line no-return-assign
+            mapEvent(item).forEach((argType) => (acc[argType.name] = argType));
+            break;
+          default:
+            acc[item.name] = mapItem({ ...item, type }, category);
+            break;
+        }
+
         return acc;
       }, {} as ArgTypes)
   );
 }
 
+function mapItem(item: TagItem, category: string): ArgType {
+  return {
+    name: item.name,
+    action: { name: item.name },
+    required: false,
+    description: item.description,
+    type: item.type,
+    table: {
+      category,
+      type: { summary: item.type?.text || item.type },
+      defaultValue: {
+        summary: item.default !== undefined ? item.default : item.defaultValue,
+      },
+    },
+  };
+}
+
+function mapEvent(item: TagItem): ArgType[] {
+  let name = item.name
+    .replace(/(-|_|:|\.|\s)+(.)?/g, (_match, _separator, chr: string) => {
+      return chr ? chr.toUpperCase() : '';
+    })
+    .replace(/^([A-Z])/, (match) => match.toLowerCase());
+
+  name = `on${name.charAt(0).toUpperCase() + name.substr(1)}`;
+
+  return [{ name, action: { name: item.name }, table: { disable: true } }, mapItem(item, 'events')];
+}
+
 const getMetaDataExperimental = (tagName: string, customElements: CustomElements) => {
   if (!isValidComponent(tagName) || !isValidMetaData(customElements)) {
     return null;

examples/web-components-kitchen-sink/src/components/sb-header.stories.ts

@@ -9,12 +9,30 @@ export default {
   component: 'sb-header',
 } as Meta;
 
-const Template: Story<SbHeader> = ({ user }) => html`<sb-header .user="${user}"></sb-header>`;
+interface SbHeaderProps extends SbHeader {
+  onSbHeaderCreateAccount: (event: Event) => void;
+  onSbHeaderLogin: (event: Event) => void;
+  onSbHeaderLogout: (event: Event) => void;
+}
 
-export const LoggedIn: Story<SbHeader> = Template.bind({});
+const Template: Story<SbHeaderProps> = ({
+  user,
+  onSbHeaderCreateAccount,
+  onSbHeaderLogin,
+  onSbHeaderLogout,
+}) => {
+  return html`<sb-header
+    @sb-header:createAccount=${onSbHeaderCreateAccount}
+    @sb-header:login=${onSbHeaderLogin}
+    @sb-header:logout=${onSbHeaderLogout}
+    .user=${user}
+  ></sb-header>`;
+};
+
+export const LoggedIn: Story<SbHeaderProps> = Template.bind({});
 LoggedIn.args = {
   user: {},
 };
 
-export const LoggedOut: Story<SbHeader> = Template.bind({});
+export const LoggedOut: Story<SbHeaderProps> = Template.bind({});
 LoggedOut.args = {};

examples/web-components-kitchen-sink/src/components/sb-header.ts

@@ -104,10 +104,16 @@ export class SbHeader extends LitElement {
 
   private logInOutButton() {
     return this.user
-      ? html`<sb-button size="small" @sb-button:click="${() => this.dispatchCustomEvent('logout')} "
-        label = "Log out" </sb-button>`
-      : html`<sb-button size="small" @sb-button:click="${() => this.dispatchCustomEvent('login')}"
-                        label="Log in" </sb-button>`;
+      ? html`<sb-button
+          size="small"
+          @sb-button:click="${() => this.dispatchCustomEvent('logout')}"
+          label="Log out"
+        ></sb-button>`
+      : html`<sb-button
+          size="small"
+          @sb-button:click="${() => this.dispatchCustomEvent('login')}"
+          label="Log in"
+        ></sb-button>`;
   }
 }