feat: handling of 'of' attribute for components

ccontrols · Mar 16, 2020 · e5af752 · e5af752
1 parent 93ef00c
commit e5af752
Show file tree

Hide file tree

Showing 7 changed files with 153 additions and 61 deletions.
diff --git a/core/instrument/src/babel/mdx-stories.ts b/core/instrument/src/babel/mdx-stories.ts
@@ -22,9 +22,15 @@ export const extractMDXStories = (ast: File): StoriesStore => {
     JSXElement: (path: any) => {
       const node = path.node.openingElement;
       if (
-        ['Meta', 'Story', 'Preview', 'Playground', 'ComponentSource'].indexOf(
-          node.name.name,
-        ) > -1
+        [
+          'Description',
+          'Meta',
+          'Story',
+          'Preview',
+          'PropsTable',
+          'Playground',
+          'ComponentSource',
+        ].indexOf(node.name.name) > -1
       ) {
         const attributes: StoryParameters = node.attributes.reduce(
           (acc: StoryParameters, attribute: any) => {

diff --git a/core/instrument/src/misc/componentAttributes.ts b/core/instrument/src/misc/componentAttributes.ts
@@ -25,5 +25,14 @@ export const componentsFromParams = (
   if (typeof subcomponents === 'object') {
     Object.keys(subcomponents).forEach(key => result.push(subcomponents[key]));
   }
+
+  let { of } = element as StoryParameters;
+  if (typeof of === 'string') {
+    result.push(of);
+  }
+  if (typeof of === 'object') {
+    Object.keys(of).forEach(key => result.push(of[key]));
+  }
+
   return result;
 };
diff --git a/core/instrument/test/__snapshots__/mdx-component.test.ts.snap b/core/instrument/test/__snapshots__/mdx-component.test.ts.snap
@@ -6,28 +6,8 @@ Object {
     "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-arrow-func.js": Object {
       "from": "../../components/button-named-arrow-func",
       "importedName": "Button",
-      "loc": Object {
-        "end": Object {
-          "column": 72,
-          "line": 3,
-        },
-        "start": Object {
-          "column": 31,
-          "line": 3,
-        },
-      },
       "name": "Button",
-      "repository": Object {
-        "browse": "https://github.com/ccontrols/component-controls/tree/master/core/instrument/test/fixtures/components/button-named-arrow-func.js",
-        "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
-        "issues": "https://github.com/ccontrols/component-controls/issues",
-        "name": "@component-controls/instrument",
-      },
       "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-arrow-func.js",
-      "source": "import React from 'react';
-
-export const Button = props => <button>{\`Hello, \${props.name}\`}</button>;
-",
     },
   },
   "kinds": Object {
@@ -36,17 +16,6 @@ export const Button = props => <button>{\`Hello, \${props.name}\`}</button>;
       "components": Object {
         "Button": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-arrow-func.js",
       },
-      "repository": Object {
-        "browse": "https://github.com/ccontrols/component-controls/tree/master/core/instrument/test/fixtures/mdx/component/component-parameters.mdx",
-        "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
-        "issues": "https://github.com/ccontrols/component-controls/issues",
-        "name": "@component-controls/instrument",
-      },
-      "source": "import { Meta } from '@storybook/addon-docs/blocks';
-import { Button } from '../../components/button-named-arrow-func';
-
-<Meta title=\\"Storybook/MDX\\" component={Button} />
-",
       "title": "Storybook/MDX",
     },
   },
@@ -60,10 +29,8 @@ Object {
     "/Users/atanasster/component-controls/core/instrument/test/fixtures/mdx/component/named-alias-import.mdx": Object {
       "from": "../../components/button-named-class",
       "importedName": "Btn",
-      "loc": undefined,
       "name": "Button",
       "request": undefined,
-      "source": undefined,
     },
   },
   "kinds": Object {
@@ -72,32 +39,43 @@ Object {
       "components": Object {
         "Button": "/Users/atanasster/component-controls/core/instrument/test/fixtures/mdx/component/named-alias-import.mdx",
       },
-      "repository": Object {
-        "browse": "https://github.com/ccontrols/component-controls/tree/master/core/instrument/test/fixtures/mdx/component/named-alias-import.mdx",
-        "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
-        "issues": "https://github.com/ccontrols/component-controls/issues",
-        "name": "@component-controls/instrument",
-      },
-      "source": "import { Meta } from '@storybook/addon-docs/blocks';
-import { Btn as Button } from '../../components/button-named-class';
-<Meta title=\\"Storybook/MDX\\" component={Button} />",
       "title": "Storybook/MDX",
     },
   },
   "stories": Object {},
 }
 `;
 
+exports[`mdx-component propstable-of.mdx 1`] = `
+Object {
+  "components": Object {
+    "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js": Object {
+      "from": "../../components/button-default-arrow-func",
+      "importedName": "default",
+      "name": "ArrowButton",
+      "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js",
+    },
+  },
+  "kinds": Object {
+    "Story": Object {
+      "components": Object {
+        "ArrowButton": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js",
+      },
+      "title": "Story",
+    },
+  },
+  "stories": Object {},
+}
+`;
+
 exports[`mdx-component story-import.mdx 1`] = `
 Object {
   "components": Object {
     "/Users/atanasster/component-controls/core/instrument/test/fixtures/mdx/component/story-import.mdx": Object {
       "from": "./Toggle",
       "importedName": "Toggle",
-      "loc": undefined,
       "name": "Toggle",
       "request": undefined,
-      "source": undefined,
     },
   },
   "kinds": Object {
@@ -107,19 +85,6 @@ Object {
         "Button": "/Users/atanasster/component-controls/core/instrument/test/fixtures/mdx/component/story-import.mdx",
         "Toggle": "/Users/atanasster/component-controls/core/instrument/test/fixtures/mdx/component/story-import.mdx",
       },
-      "repository": Object {
-        "browse": "https://github.com/ccontrols/component-controls/tree/master/core/instrument/test/fixtures/mdx/component/story-import.mdx",
-        "docs": "https://github.com/ccontrols/component-controls/tree/master#readme",
-        "issues": "https://github.com/ccontrols/component-controls/issues",
-        "name": "@component-controls/instrument",
-      },
-      "source": "import { Meta, Story } from '@storybook/addon-docs/blocks';
-import { Btn as Button } from './Button';
-import { Toggle } from './Toggle';
-
-<Meta title=\\"Storybook/MDX\\" component={Button} />
-
-<Story name=\\"my-story\\" component={Toggle} />",
       "title": "Storybook/MDX",
     },
   },
@@ -142,3 +107,90 @@ import { Toggle } from './Toggle';
   },
 }
 `;
+
+exports[`mdx-component story-subcomponents.mdx 1`] = `
+Object {
+  "components": Object {
+    "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js": Object {
+      "from": "../../components/button-default-arrow-func",
+      "importedName": "default",
+      "name": "ArrowButton",
+      "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js",
+    },
+    "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-arrow-func.js": Object {
+      "from": "../../components/button-named-arrow-func",
+      "importedName": "Button",
+      "name": "Button",
+      "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-arrow-func.js",
+    },
+  },
+  "kinds": Object {
+    "Story": Object {
+      "components": Object {
+        "ArrowButton": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js",
+        "Button": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-arrow-func.js",
+      },
+      "title": "Story",
+    },
+  },
+  "stories": Object {
+    "story": Object {
+      "component": "ArrowButton",
+      "loc": Object {
+        "end": Object {
+          "column": 8,
+          "line": 29,
+        },
+        "start": Object {
+          "column": 6,
+          "line": 23,
+        },
+      },
+      "name": "story",
+      "source": "<Story
+        name=\\"story\\"
+        component={ArrowButton}
+        subcomponents={{
+          'My Button Tab': Button,
+        }}
+      />",
+      "subcomponents": Object {
+        "My Button Tab": "Button",
+      },
+    },
+  },
+}
+`;
+
+exports[`mdx-component subcomponents.mdx 1`] = `
+Object {
+  "components": Object {
+    "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js": Object {
+      "from": "../../components/button-default-arrow-func",
+      "importedName": "default",
+      "name": "ArrowButton",
+      "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js",
+    },
+    "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-arrow-func.js": Object {
+      "from": "../../components/button-named-arrow-func",
+      "importedName": "Button",
+      "name": "Button",
+      "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-arrow-func.js",
+    },
+  },
+  "kinds": Object {
+    "Story": Object {
+      "component": "ArrowButton",
+      "components": Object {
+        "ArrowButton": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js",
+        "Button": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-named-arrow-func.js",
+      },
+      "subcomponents": Object {
+        "Button": "Button",
+      },
+      "title": "Story",
+    },
+  },
+  "stories": Object {},
+}
+`;
diff --git a/core/instrument/test/fixtures/mdx/component/propstable-of.mdx b/core/instrument/test/fixtures/mdx/component/propstable-of.mdx
@@ -0,0 +1,6 @@
+import { Meta, PropsTable } from '@storybook/addon-docs/blocks';
+import ArrowButton from '../../components/button-default-arrow-func';
+
+<Meta title="Story" />
+
+<PropsTable of={ArrowButton} />
diff --git a/core/instrument/test/fixtures/mdx/component/story-subcomponents.mdx b/core/instrument/test/fixtures/mdx/component/story-subcomponents.mdx
@@ -0,0 +1,7 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+import ArrowButton from '../../components/button-default-arrow-func';
+import { Button } from '../../components/button-named-arrow-func';
+
+<Meta title="Story" />
+
+<Story name="story" component={ArrowButton} subcomponents={{ 'My Button Tab': Button }} />
diff --git a/core/instrument/test/fixtures/mdx/component/subcomponents.mdx b/core/instrument/test/fixtures/mdx/component/subcomponents.mdx
@@ -0,0 +1,5 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+import ArrowButton from '../../components/button-default-arrow-func';
+import { Button } from '../../components/button-named-arrow-func';
+
+<Meta title="Story" component={ArrowButton} subcomponents={{ Button }} />
diff --git a/core/instrument/test/mdx-component.test.ts b/core/instrument/test/mdx-component.test.ts
@@ -1,5 +1,12 @@
 import { loadStoriesTests } from './loadTestFiles';
 
 describe('mdx-component', () => {
-  loadStoriesTests(undefined, 'mdx', 'component');
+  loadStoriesTests(
+    {
+      stories: { storeSourceFile: false, package: false },
+      components: { storeSourceFile: false, package: false },
+    },
+    'mdx',
+    'component',
+  );
 });