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', + ); });