diff --git a/core/instrument/src/babel/mdx-stories.ts b/core/instrument/src/babel/mdx-stories.ts
index 5c17ba4ce..b4d84c11b 100644
--- 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
index 03dcb7349..c1a89781f 100644
--- 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
index 2081d1467..d31bda442 100644
--- 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 => ;
-",
},
},
"kinds": Object {
@@ -36,17 +16,6 @@ export const Button = props => ;
"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';
-
-
-",
"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,15 +39,6 @@ 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';
-",
"title": "Storybook/MDX",
},
},
@@ -88,16 +46,36 @@ import { Btn as Button } from '../../components/button-named-class';
}
`;
+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';
-
-
-
-",
"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": "",
+ "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
new file mode 100644
index 000000000..2fdf5c6b6
--- /dev/null
+++ 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';
+
+
+
+
diff --git a/core/instrument/test/fixtures/mdx/component/story-subcomponents.mdx b/core/instrument/test/fixtures/mdx/component/story-subcomponents.mdx
new file mode 100644
index 000000000..3559db935
--- /dev/null
+++ 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';
+
+
+
+
diff --git a/core/instrument/test/fixtures/mdx/component/subcomponents.mdx b/core/instrument/test/fixtures/mdx/component/subcomponents.mdx
new file mode 100644
index 000000000..3e3e69b68
--- /dev/null
+++ 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';
+
+
diff --git a/core/instrument/test/mdx-component.test.ts b/core/instrument/test/mdx-component.test.ts
index 7c9b23bb1..e79d86c6d 100644
--- 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',
+ );
});