Merge pull request #10953 from storybookjs/10585-controls-for-web-com…

…ponents Addon-controls: Web-components support
storybookjs · May 28, 2020 · 056c04a · 056c04a
2 parents 0d0276d + 52bb778
commit 056c04a
Show file tree

Hide file tree

Showing 8 changed files with 209 additions and 181 deletions.
diff --git a/.../src/frameworks/web-components/__testfixtures__/lit-element-demo-card/properties.snapshot b/.../src/frameworks/web-components/__testfixtures__/lit-element-demo-card/properties.snapshot
@@ -2,138 +2,158 @@
 
 exports[`web-components component properties lit-element-demo-card 1`] = `
 Object {
-  "sections": Object {
-    "attributes": Array [
-      Object {
-        "defaultValue": Object {
-          "summary": "false",
-        },
-        "description": "Indicates that the back of the card is shown",
-        "name": "back-side",
-        "required": "",
-        "type": Object {
-          "summary": "boolean",
-        },
-      },
-      Object {
-        "defaultValue": Object {
-          "summary": "\\"Your Message\\"",
-        },
-        "description": "Header message",
-        "name": "header",
-        "required": "",
-        "type": Object {
-          "summary": "string",
-        },
-      },
-      Object {
-        "defaultValue": Object {
-          "summary": "[]",
-        },
-        "description": "Data rows",
-        "name": "rows",
-        "required": "",
-        "type": Object {
-          "summary": "object",
-        },
-      },
-    ],
-    "css": Array [
-      Object {
-        "defaultValue": Object {
-          "summary": undefined,
-        },
-        "description": "Header font size",
-        "name": "--demo-wc-card-header-font-size",
-        "required": "",
-        "type": Object {
-          "summary": undefined,
-        },
-      },
-      Object {
-        "defaultValue": Object {
-          "summary": undefined,
-        },
-        "description": "Font color for front",
-        "name": "--demo-wc-card-front-color",
-        "required": "",
-        "type": Object {
-          "summary": undefined,
-        },
-      },
-      Object {
-        "defaultValue": Object {
-          "summary": undefined,
-        },
-        "description": "Font color for back",
-        "name": "--demo-wc-card-back-color",
-        "required": "",
-        "type": Object {
-          "summary": undefined,
-        },
-      },
-    ],
-    "events": Array [
-      Object {
-        "defaultValue": Object {
-          "summary": undefined,
-        },
-        "description": "Fires whenever it switches between front/back",
-        "name": "side-changed",
-        "required": "",
-        "type": Object {
-          "summary": undefined,
-        },
-      },
-    ],
-    "properties": Array [
-      Object {
-        "defaultValue": Object {
-          "summary": "false",
-        },
-        "description": "Indicates that the back of the card is shown",
-        "name": "backSide",
-        "required": "",
-        "type": Object {
-          "summary": "boolean",
-        },
-      },
-      Object {
-        "defaultValue": Object {
-          "summary": "\\"Your Message\\"",
-        },
-        "description": "Header message",
-        "name": "header",
-        "required": "",
-        "type": Object {
-          "summary": "string",
-        },
-      },
-      Object {
-        "defaultValue": Object {
-          "summary": "[]",
-        },
-        "description": "Data rows",
-        "name": "rows",
-        "required": "",
-        "type": Object {
-          "summary": "object",
-        },
-      },
-    ],
-    "slots": Array [
-      Object {
-        "defaultValue": Object {
-          "summary": undefined,
-        },
-        "description": "This is an unnamed slot (the default slot)",
-        "name": "",
-        "required": "",
-        "type": Object {
-          "summary": undefined,
-        },
-      },
-    ],
+  "": Object {
+    "description": "This is an unnamed slot (the default slot)",
+    "name": "",
+    "required": false,
+    "table": Object {
+      "category": "slots",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
+      "type": Object {
+        "summary": undefined,
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
+  "--demo-wc-card-back-color": Object {
+    "description": "Font color for back",
+    "name": "--demo-wc-card-back-color",
+    "required": false,
+    "table": Object {
+      "category": "css",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
+      "type": Object {
+        "summary": undefined,
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
+  "--demo-wc-card-front-color": Object {
+    "description": "Font color for front",
+    "name": "--demo-wc-card-front-color",
+    "required": false,
+    "table": Object {
+      "category": "css",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
+      "type": Object {
+        "summary": undefined,
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
+  "--demo-wc-card-header-font-size": Object {
+    "description": "Header font size",
+    "name": "--demo-wc-card-header-font-size",
+    "required": false,
+    "table": Object {
+      "category": "css",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
+      "type": Object {
+        "summary": undefined,
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
+  "back-side": Object {
+    "description": "Indicates that the back of the card is shown",
+    "name": "back-side",
+    "required": false,
+    "table": Object {
+      "category": "attributes",
+      "defaultValue": Object {
+        "summary": "false",
+      },
+      "type": Object {
+        "summary": "boolean",
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
+  "backSide": Object {
+    "description": "Indicates that the back of the card is shown",
+    "name": "backSide",
+    "required": false,
+    "table": Object {
+      "category": "properties",
+      "defaultValue": Object {
+        "summary": "false",
+      },
+      "type": Object {
+        "summary": "boolean",
+      },
+    },
+    "type": Object {
+      "name": "boolean",
+    },
+  },
+  "header": Object {
+    "description": "Header message",
+    "name": "header",
+    "required": false,
+    "table": Object {
+      "category": "properties",
+      "defaultValue": Object {
+        "summary": "\\"Your Message\\"",
+      },
+      "type": Object {
+        "summary": "string",
+      },
+    },
+    "type": Object {
+      "name": "string",
+    },
+  },
+  "rows": Object {
+    "description": "Data rows",
+    "name": "rows",
+    "required": false,
+    "table": Object {
+      "category": "properties",
+      "defaultValue": Object {
+        "summary": "[]",
+      },
+      "type": Object {
+        "summary": "object",
+      },
+    },
+    "type": Object {
+      "name": "object",
+    },
+  },
+  "side-changed": Object {
+    "description": "Fires whenever it switches between front/back",
+    "name": "side-changed",
+    "required": false,
+    "table": Object {
+      "category": "events",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
+      "type": Object {
+        "summary": undefined,
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
   },
 }
 `;
diff --git a/.../docs/src/frameworks/web-components/__testfixtures__/lit-html-welcome/properties.snapshot b/.../docs/src/frameworks/web-components/__testfixtures__/lit-html-welcome/properties.snapshot
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`web-components component properties lit-html-welcome 1`] = `false`;
+exports[`web-components component properties lit-html-welcome 1`] = `Object {}`;
diff --git a/addons/docs/src/frameworks/web-components/config.js b/addons/docs/src/frameworks/web-components/config.js
@@ -3,11 +3,11 @@
 import { addParameters } from '@storybook/client-api';
 import React from 'react';
 import { render } from 'lit-html';
-import { extractProps, extractComponentDescription } from './custom-elements';
+import { extractArgTypes, extractComponentDescription } from './custom-elements';
 
 addParameters({
   docs: {
-    extractProps,
+    extractArgTypes,
     extractComponentDescription,
     inlineStories: true,
     prepareForInline: (storyFn) => {

diff --git a/addons/docs/src/frameworks/web-components/custom-elements.ts b/addons/docs/src/frameworks/web-components/custom-elements.ts
@@ -1,5 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { getCustomElements, isValidComponent, isValidMetaData } from '@storybook/web-components';
+import { ArgTypes } from '@storybook/api';
 
 interface TagItem {
   name: string;
@@ -31,49 +32,51 @@ interface Sections {
   css?: any;
 }
 
-function mapData(data: TagItem[]) {
-  return data.map((item) => ({
-    name: item.name,
-    type: { summary: item.type },
-    required: '',
-    description: item.description,
-    defaultValue: { summary: item.default !== undefined ? item.default : item.defaultValue },
-  }));
+function mapData(data: TagItem[], category: string) {
+  return (
+    data &&
+    data.reduce((acc, item) => {
+      const type = category === 'properties' ? { name: item.type } : { name: 'void' };
+      acc[item.name] = {
+        name: item.name,
+        required: false,
+        description: item.description,
+        type,
+        table: {
+          category,
+          type: { summary: item.type },
+          defaultValue: { summary: item.default !== undefined ? item.default : item.defaultValue },
+        },
+      };
+      return acc;
+    }, {} as ArgTypes)
+  );
 }
 
 function isEmpty(obj: object) {
   return Object.entries(obj).length === 0 && obj.constructor === Object;
 }
 
-export const extractPropsFromElements = (tagName: string, customElements: CustomElements) => {
+export const extractArgTypesFromElements = (tagName: string, customElements: CustomElements) => {
   if (!isValidComponent(tagName) || !isValidMetaData(customElements)) {
     return null;
   }
   const metaData = customElements.tags.find(
     (tag) => tag.name.toUpperCase() === tagName.toUpperCase()
   );
-  const sections: Sections = {};
-  if (metaData.attributes) {
-    sections.attributes = mapData(metaData.attributes);
-  }
-  if (metaData.properties) {
-    sections.properties = mapData(metaData.properties);
-  }
-  if (metaData.events) {
-    sections.events = mapData(metaData.events);
-  }
-  if (metaData.slots) {
-    sections.slots = mapData(metaData.slots);
-  }
-  if (metaData.cssProperties) {
-    sections.css = mapData(metaData.cssProperties);
-  }
-  return isEmpty(sections) ? false : { sections };
+  const argTypes = {
+    ...mapData(metaData.attributes, 'attributes'),
+    ...mapData(metaData.properties, 'properties'),
+    ...mapData(metaData.events, 'events'),
+    ...mapData(metaData.slots, 'slots'),
+    ...mapData(metaData.cssProperties, 'css'),
+  };
+  return argTypes;
 };
 
-export const extractProps = (tagName: string) => {
+export const extractArgTypes = (tagName: string) => {
   const customElements: CustomElements = getCustomElements();
-  return extractPropsFromElements(tagName, customElements);
+  return extractArgTypesFromElements(tagName, customElements);
 };
 
 export const extractComponentDescription = (tagName: string) => {