From 7fabe824b31fb73b3656c7d3bc2b058f379f40d7 Mon Sep 17 00:00:00 2001 From: atanasster Date: Tue, 3 Mar 2020 01:05:01 -0500 Subject: [PATCH] feat: add description block --- core/core/src/smartControls.ts | 13 +- .../src/babel/control-values-in-source.ts | 18 +- .../__snapshots__/csf-component.test.js.snap | 312 +------ .../csf-named-exports.test.js.snap | 31 +- .../__snapshots__/csf-parameters.test.js.snap | 46 +- .../__snapshots__/csf-story-kind.test.js.snap | 372 +++++---- .../__snapshots__/csf-toggle.test.js.snap | 98 ++- .../get-csf-stories.test.js.snap | 47 +- .../__snapshots__/mdx-component.test.js.snap | 339 ++++---- .../test/__snapshots__/mdx-story.test.js.snap | 777 ++++++++++-------- .../prop-usage-locations.test.js.snap | 322 +------- core/specification/src/components.ts | 108 +++ core/specification/src/index.ts | 2 + core/specification/src/stories.ts | 79 +- core/specification/src/utility.ts | 40 + examples/storybook-5/.storybook/preview.js | 5 +- .../storybook/src/blocks/ControlsTable.tsx | 5 +- .../storybook/src/blocks/Description.tsx | 14 + integrations/storybook/src/blocks/index.ts | 1 + ui/block-components/package.json | 3 + .../src/Markdown/Markdown.stories.tsx | 19 + ui/block-components/src/Markdown/Markdown.tsx | 14 + ui/block-components/src/Markdown/index.ts | 1 + ui/block-components/src/index.ts | 1 + ui/block-components/src/typings.d.ts | 38 + ui/blocks/src/BlocksContext/BlockContext.tsx | 40 +- .../src/Description/Description.stories.tsx | 30 + ui/blocks/src/Description/Description.tsx | 19 + ui/blocks/src/Description/index.ts | 1 + ui/blocks/src/ImportSource/ImportSource.tsx | 7 +- ui/blocks/src/StorySource/StorySource.tsx | 8 +- ui/blocks/src/index.ts | 1 + yarn.lock | 9 +- 33 files changed, 1298 insertions(+), 1522 deletions(-) create mode 100644 core/specification/src/components.ts create mode 100644 core/specification/src/utility.ts create mode 100644 integrations/storybook/src/blocks/Description.tsx create mode 100644 ui/block-components/src/Markdown/Markdown.stories.tsx create mode 100644 ui/block-components/src/Markdown/Markdown.tsx create mode 100644 ui/block-components/src/Markdown/index.ts create mode 100644 ui/blocks/src/Description/Description.stories.tsx create mode 100644 ui/blocks/src/Description/Description.tsx create mode 100644 ui/blocks/src/Description/index.ts diff --git a/core/core/src/smartControls.ts b/core/core/src/smartControls.ts index 45fc59ef2..289a2d77e 100644 --- a/core/core/src/smartControls.ts +++ b/core/core/src/smartControls.ts @@ -3,19 +3,10 @@ import { ComponentControl, ComponentControls, ControlTypes, + PropType, + PropTypes, } from '@component-controls/specification'; -export interface PropType { - defaultValue: { value?: string | boolean; computed: boolean }; - type: { name?: string }; - required: boolean; - description: string; -} - -export interface PropTypes { - [key: string]: PropType; -} - const cleanQuotes = (txt?: string) => (txt ? txt.replace(/['"]+/g, '') : txt); const handledTypes = [ diff --git a/core/instrument/src/babel/control-values-in-source.ts b/core/instrument/src/babel/control-values-in-source.ts index 10b0b544b..13e8b5352 100644 --- a/core/instrument/src/babel/control-values-in-source.ts +++ b/core/instrument/src/babel/control-values-in-source.ts @@ -56,8 +56,22 @@ export const addArgumentUsage = ( }; export const extractArgumentsUsage = (story: Story, args: StoryArguments) => { return { - Identifier: (path: any) => { - addArgumentUsage(story, args, path.node); + TemplateLiteral: (path: any) => { + path.node.expressions.forEach((expression: any) => { + if (expression.type === 'Identifier') { + addArgumentUsage(story, args, expression); + } + }); + }, + JSXSpreadAttribute: (path: any) => { + if (path.node.argument === 'Identifier') { + addArgumentUsage(story, args, path.node.argument); + } + }, + ArrowFunctionExpression: (path: any) => { + if (path.node.body === 'Identifier') { + addArgumentUsage(story, args, path.node.body); + } }, Property: (path: any) => { const node = path.node; diff --git a/core/instrument/test/__snapshots__/csf-component.test.js.snap b/core/instrument/test/__snapshots__/csf-component.test.js.snap index efaafc454..1221e0899 100644 --- a/core/instrument/test/__snapshots__/csf-component.test.js.snap +++ b/core/instrument/test/__snapshots__/csf-component.test.js.snap @@ -2,331 +2,78 @@ exports[`csf-component No import 1`] = ` Object { - "parameters": Array [ - Object { - "loc": Object { - "end": Object { - "column": 19, - "line": 2, - }, - "start": Object { - "column": 2, - "line": 2, - }, - }, - "name": "component", - "value": "Button", - }, - ], - "source": " - export default { - component: Button - }; - ", + "components": Object {}, + "kinds": Object {}, "stories": Object {}, - "title": undefined, } `; exports[`csf-component default alias import 1`] = ` Object { - "component": Object { - "from": "./Button", - "imported": undefined, - "loc": SourceLocation { - "end": Position { - "column": 35, - "line": 1, - }, - "start": Position { - "column": 0, - "line": 1, - }, - }, - "name": "Button", - }, - "parameters": Array [ - Object { - "loc": Object { - "end": Object { - "column": 19, - "line": 3, - }, - "start": Object { - "column": 2, - "line": 3, - }, - }, - "name": "component", - "value": "Button", - }, - ], - "source": " - import * as Button from './Button'; - export default { - component: Button - }; - ", + "components": Object {}, + "kinds": Object {}, "stories": Object {}, - "title": undefined, } `; exports[`csf-component default import 1`] = ` Object { - "component": Object { - "from": "./Button", - "imported": "default", - "loc": SourceLocation { - "end": Position { - "column": 30, - "line": 1, - }, - "start": Position { - "column": 0, - "line": 1, - }, - }, - "name": "Button", - }, - "parameters": Array [ - Object { - "loc": Object { - "end": Object { - "column": 19, - "line": 3, - }, - "start": Object { - "column": 2, - "line": 3, - }, - }, - "name": "component", - "value": "Button", - }, - ], - "source": " - import Button from './Button'; - export default { - component: Button - }; - ", + "components": Object {}, + "kinds": Object {}, "stories": Object {}, - "title": undefined, } `; exports[`csf-component named alias import 1`] = ` Object { - "component": Object { - "from": "./Button", - "imported": "Btn", - "loc": SourceLocation { - "end": Position { - "column": 41, - "line": 1, - }, - "start": Position { - "column": 0, - "line": 1, - }, - }, - "name": "Button", - }, - "parameters": Array [ - Object { - "loc": Object { - "end": Object { - "column": 19, - "line": 3, - }, - "start": Object { - "column": 2, - "line": 3, - }, - }, - "name": "component", - "value": "Button", - }, - ], - "source": " - import { Btn as Button } from './Button'; - export default { - component: Button - }; - ", + "components": Object {}, + "kinds": Object {}, "stories": Object {}, - "title": undefined, } `; exports[`csf-component named import 1`] = ` Object { - "component": Object { - "from": "./Button", - "imported": "Button", - "loc": SourceLocation { - "end": Position { - "column": 34, - "line": 1, - }, - "start": Position { - "column": 0, - "line": 1, - }, - }, - "name": "Button", - }, - "parameters": Array [ - Object { - "loc": Object { - "end": Object { - "column": 19, - "line": 3, - }, - "start": Object { - "column": 2, - "line": 3, - }, - }, - "name": "component", - "value": "Button", - }, - ], - "source": " - import { Button } from './Button'; - export default { - component: Button - }; - ", + "components": Object {}, + "kinds": Object {}, "stories": Object {}, - "title": undefined, } `; exports[`csf-component parameters component 1`] = ` Object { - "component": Object { - "from": "./Button", - "imported": "Button", - "loc": SourceLocation { - "end": Position { - "column": 34, - "line": 1, - }, - "start": Position { - "column": 0, - "line": 1, - }, - }, - "name": "Button", - }, - "parameters": Array [ - Object { - "loc": Object { - "end": Object { - "column": 3, - "line": 5, - }, - "start": Object { - "column": 2, - "line": 3, - }, - }, - "name": "parameters", - "value": Array [ - Object { - "loc": Object { - "end": Object { - "column": 21, - "line": 4, - }, - "start": Object { - "column": 4, - "line": 4, - }, - }, - "name": "component", - "value": "Button", - }, - ], - }, - ], - "source": " - import { Button } from './Button'; - export default { - parameters: { - component: Button - } - }; - ", + "components": Object {}, + "kinds": Object {}, "stories": Object {}, - "title": undefined, } `; exports[`csf-component story import 1`] = ` Object { - "component": Object { - "from": "./Button", - "imported": "Btn", - "loc": SourceLocation { - "end": Position { - "column": 41, - "line": 1, - }, - "start": Position { - "column": 0, - "line": 1, - }, - }, - "name": "Button", - }, - "parameters": Array [ - Object { - "loc": Object { - "end": Object { - "column": 19, - "line": 4, + "components": Object { + "Toggle": Object { + "from": "./Toggle", + "import": "import { Toggle } from \\"./Toggle\\"; +", + "imported": "Toggle", + "loc": SourceLocation { + "end": Position { + "column": 34, + "line": 2, }, - "start": Object { - "column": 2, - "line": 4, + "start": Position { + "column": 0, + "line": 2, }, }, - "name": "component", - "value": "Button", + "name": "Toggle", }, - ], - "source": " - import { Btn as Button } from './Button'; - import { Toggle } from './Toggle'; - export default { - component: Button - }; - export const story = () => ; - story.story = { - component: Toggle, - } - ", + }, + "kinds": Object {}, "stories": Object { "story": Object { "arguments": Array [], - "component": Object { - "from": "./Toggle", - "imported": "Toggle", - "loc": SourceLocation { - "end": Position { - "column": 34, - "line": 2, - }, - "start": Position { - "column": 0, - "line": 2, - }, - }, - "name": "Toggle", - }, + "component": "Toggle", "loc": Object { "end": Object { "column": 37, @@ -357,6 +104,5 @@ Object { "source": "() => ", }, }, - "title": undefined, } `; diff --git a/core/instrument/test/__snapshots__/csf-named-exports.test.js.snap b/core/instrument/test/__snapshots__/csf-named-exports.test.js.snap index b82e2b64c..98a2f61b2 100644 --- a/core/instrument/test/__snapshots__/csf-named-exports.test.js.snap +++ b/core/instrument/test/__snapshots__/csf-named-exports.test.js.snap @@ -2,14 +2,8 @@ exports[`csf-named-exports exported alias name 1`] = ` Object { - "source": " -const myStory = () => {}; -myStory.story = { - name: 'Custom story name', -} - -export { myStory as exportedStory} - ", + "components": Object {}, + "kinds": Object {}, "stories": Object { "exportedStory": Object { "arguments": Array [], @@ -48,29 +42,16 @@ export { myStory as exportedStory} exports[`csf-named-exports re-exported name 1`] = ` Object { - "source": " -import { myStory } from 'stories.tsx'; -myStory.story = { - name: 'Custom story name', -}; - -export { myStory }; - - ", + "components": Object {}, + "kinds": Object {}, "stories": Object {}, } `; exports[`csf-named-exports story propery name 1`] = ` Object { - "source": " -const myStory = () => {}; -myStory.story = { - name: 'Custom story name', -} - -export { myStory } - ", + "components": Object {}, + "kinds": Object {}, "stories": Object { "myStory": Object { "arguments": Array [], diff --git a/core/instrument/test/__snapshots__/csf-parameters.test.js.snap b/core/instrument/test/__snapshots__/csf-parameters.test.js.snap index c28f1902e..f657c88d8 100644 --- a/core/instrument/test/__snapshots__/csf-parameters.test.js.snap +++ b/core/instrument/test/__snapshots__/csf-parameters.test.js.snap @@ -2,13 +2,8 @@ exports[`csf-parameters story propery name 1`] = ` Object { - "source": " -export const myStory = () => {}; -myStory.story = { - name: 'Custom story name', -} - - ", + "components": Object {}, + "kinds": Object {}, "stories": Object { "myStory": Object { "arguments": Array [], @@ -47,19 +42,8 @@ myStory.story = { exports[`csf-parameters story propery name and parameters 1`] = ` Object { - "source": " -export const myStory = () => {}; -myStory.story = { - name: 'Custom story name', - parameters: { - component: ControlsTable, - addonControls: { - smart: false, - } - }, -} - - ", + "components": Object {}, + "kinds": Object {}, "stories": Object { "myStory": Object { "arguments": Array [], @@ -156,26 +140,8 @@ myStory.story = { exports[`csf-parameters story propery name parameters and controls 1`] = ` Object { - "source": " -export const myStory = () => {}; -myStory.story = { - name: 'Custom story name', - parameters: { - controls: { - name: { - type: ControlTypes.TEXT, - label: 'Name', - value: 'Mark', - order: 9999, - }, - }, - addonControls: { - smart: false, - } - }, -} - - ", + "components": Object {}, + "kinds": Object {}, "stories": Object { "myStory": Object { "arguments": Array [], diff --git a/core/instrument/test/__snapshots__/csf-story-kind.test.js.snap b/core/instrument/test/__snapshots__/csf-story-kind.test.js.snap index 0b2ad5af2..2b33e4079 100644 --- a/core/instrument/test/__snapshots__/csf-story-kind.test.js.snap +++ b/core/instrument/test/__snapshots__/csf-story-kind.test.js.snap @@ -2,9 +2,8 @@ exports[`csf-story-kind No default export 1`] = ` Object { - "source": " - export const myStory = () => {}; - ", + "components": Object {}, + "kinds": Object {}, "stories": Object { "myStory": Object { "arguments": Array [], @@ -27,194 +26,182 @@ Object { exports[`csf-story-kind default export - no title 1`] = ` Object { - "parameters": Array [ - Object { - "loc": Object { - "end": Object { - "column": 9, - "line": 2, - }, - "start": Object { - "column": 2, - "line": 2, - }, - }, - "name": "test", - "value": 1, - }, - ], - "source": " - export default { - test: 1, - }; - ", + "components": Object {}, + "kinds": Object {}, "stories": Object {}, - "title": undefined, } `; exports[`csf-story-kind default export - with title 1`] = ` Object { - "parameters": Array [ - Object { - "loc": Object { - "end": Object { - "column": 41, - "line": 2, - }, - "start": Object { - "column": 2, - "line": 2, + "components": Object {}, + "kinds": Object { + "Storybook/Blocks/ControlsTable": Object { + "parameters": Array [ + Object { + "loc": Object { + "end": Object { + "column": 41, + "line": 2, + }, + "start": Object { + "column": 2, + "line": 2, + }, + }, + "name": "title", + "value": "Storybook/Blocks/ControlsTable", }, - }, - "name": "title", - "value": "Storybook/Blocks/ControlsTable", - }, - ], - "source": " + ], + "source": " export default { title: 'Storybook/Blocks/ControlsTable', }; ", + "title": "Storybook/Blocks/ControlsTable", + }, + }, "stories": Object {}, - "title": "Storybook/Blocks/ControlsTable", } `; exports[`csf-story-kind default export - with title and controls 1`] = ` Object { - "parameters": Array [ - Object { - "loc": Object { - "end": Object { - "column": 25, - "line": 2, - }, - "start": Object { - "column": 2, - "line": 2, - }, - }, - "name": "title", - "value": "Storybook/Kind", - }, - Object { - "loc": Object { - "end": Object { - "column": 26, - "line": 3, - }, - "start": Object { - "column": 2, - "line": 3, - }, - }, - "name": "component", - "value": "ControlsTable", - }, - Object { - "loc": Object { - "end": Object { - "column": 3, - "line": 13, + "components": Object {}, + "kinds": Object { + "Storybook/Kind": Object { + "parameters": Array [ + Object { + "loc": Object { + "end": Object { + "column": 25, + "line": 2, + }, + "start": Object { + "column": 2, + "line": 2, + }, + }, + "name": "title", + "value": "Storybook/Kind", }, - "start": Object { - "column": 2, - "line": 4, + Object { + "loc": Object { + "end": Object { + "column": 26, + "line": 3, + }, + "start": Object { + "column": 2, + "line": 3, + }, + }, + "name": "component", + "value": "ControlsTable", }, - }, - "name": "parameters", - "value": Array [ Object { "loc": Object { "end": Object { - "column": 5, - "line": 12, + "column": 3, + "line": 13, }, "start": Object { - "column": 4, - "line": 5, + "column": 2, + "line": 4, }, }, - "name": "controls", + "name": "parameters", "value": Array [ Object { "loc": Object { "end": Object { - "column": 7, - "line": 11, + "column": 5, + "line": 12, }, "start": Object { - "column": 6, - "line": 6, + "column": 4, + "line": 5, }, }, - "name": "name", + "name": "controls", "value": Array [ Object { "loc": Object { "end": Object { - "column": 31, - "line": 7, + "column": 7, + "line": 11, }, "start": Object { - "column": 8, - "line": 7, + "column": 6, + "line": 6, }, }, - "name": "type", - "value": "ControlTypes.TEXT", - }, - Object { - "loc": Object { - "end": Object { - "column": 21, - "line": 8, + "name": "name", + "value": Array [ + Object { + "loc": Object { + "end": Object { + "column": 31, + "line": 7, + }, + "start": Object { + "column": 8, + "line": 7, + }, + }, + "name": "type", + "value": "ControlTypes.TEXT", }, - "start": Object { - "column": 8, - "line": 8, + Object { + "loc": Object { + "end": Object { + "column": 21, + "line": 8, + }, + "start": Object { + "column": 8, + "line": 8, + }, + }, + "name": "label", + "value": "Name", }, - }, - "name": "label", - "value": "Name", - }, - Object { - "loc": Object { - "end": Object { - "column": 21, - "line": 9, - }, - "start": Object { - "column": 8, - "line": 9, - }, - }, - "name": "value", - "value": "Mark", - }, - Object { - "loc": Object { - "end": Object { - "column": 19, - "line": 10, + Object { + "loc": Object { + "end": Object { + "column": 21, + "line": 9, + }, + "start": Object { + "column": 8, + "line": 9, + }, + }, + "name": "value", + "value": "Mark", }, - "start": Object { - "column": 8, - "line": 10, + Object { + "loc": Object { + "end": Object { + "column": 19, + "line": 10, + }, + "start": Object { + "column": 8, + "line": 10, + }, + }, + "name": "order", + "value": 9999, }, - }, - "name": "order", - "value": 9999, + ], }, ], }, ], }, ], - }, - ], - "source": " + "source": " export default { title: 'Storybook/Kind', component: ControlsTable, @@ -230,88 +217,93 @@ Object { }, }; ", + "title": "Storybook/Kind", + }, + }, "stories": Object {}, - "title": "Storybook/Kind", } `; exports[`csf-story-kind default export - with title and parameters 1`] = ` Object { - "parameters": Array [ - Object { - "loc": Object { - "end": Object { - "column": 41, - "line": 2, - }, - "start": Object { - "column": 2, - "line": 2, - }, - }, - "name": "title", - "value": "Storybook/Blocks/ControlsTable", - }, - Object { - "loc": Object { - "end": Object { - "column": 3, - "line": 8, - }, - "start": Object { - "column": 2, - "line": 3, - }, - }, - "name": "parameters", - "value": Array [ + "components": Object {}, + "kinds": Object { + "Storybook/Blocks/ControlsTable": Object { + "parameters": Array [ Object { "loc": Object { "end": Object { - "column": 28, - "line": 4, + "column": 41, + "line": 2, }, "start": Object { - "column": 4, - "line": 4, + "column": 2, + "line": 2, }, }, - "name": "component", - "value": "ControlsTable", + "name": "title", + "value": "Storybook/Blocks/ControlsTable", }, Object { "loc": Object { "end": Object { - "column": 5, - "line": 7, + "column": 3, + "line": 8, }, "start": Object { - "column": 4, - "line": 5, + "column": 2, + "line": 3, }, }, - "name": "addonControls", + "name": "parameters", "value": Array [ Object { "loc": Object { "end": Object { - "column": 18, - "line": 6, + "column": 28, + "line": 4, + }, + "start": Object { + "column": 4, + "line": 4, + }, + }, + "name": "component", + "value": "ControlsTable", + }, + Object { + "loc": Object { + "end": Object { + "column": 5, + "line": 7, }, "start": Object { - "column": 6, - "line": 6, + "column": 4, + "line": 5, }, }, - "name": "smart", - "value": false, + "name": "addonControls", + "value": Array [ + Object { + "loc": Object { + "end": Object { + "column": 18, + "line": 6, + }, + "start": Object { + "column": 6, + "line": 6, + }, + }, + "name": "smart", + "value": false, + }, + ], }, ], }, ], - }, - ], - "source": " + "source": " export default { title: 'Storybook/Blocks/ControlsTable', parameters: { @@ -322,7 +314,9 @@ Object { }, }; ", + "title": "Storybook/Blocks/ControlsTable", + }, + }, "stories": Object {}, - "title": "Storybook/Blocks/ControlsTable", } `; diff --git a/core/instrument/test/__snapshots__/csf-toggle.test.js.snap b/core/instrument/test/__snapshots__/csf-toggle.test.js.snap index 6037a6a95..1fabd0c79 100644 --- a/core/instrument/test/__snapshots__/csf-toggle.test.js.snap +++ b/core/instrument/test/__snapshots__/csf-toggle.test.js.snap @@ -2,52 +2,59 @@ exports[`csf-toggle Toggle story 1`] = ` Object { - "component": Object { - "from": "./Toggle", - "imported": "Toggle", - "loc": SourceLocation { - "end": Position { - "column": 34, - "line": 2, - }, - "start": Position { - "column": 0, - "line": 2, - }, - }, - "name": "Toggle", - }, - "parameters": Array [ - Object { - "loc": Object { - "end": Object { - "column": 28, - "line": 5, + "components": Object { + "Toggle": Object { + "from": "./Toggle", + "import": "import { Toggle } from \\"./Toggle\\"; +", + "imported": "Toggle", + "loc": SourceLocation { + "end": Position { + "column": 34, + "line": 2, }, - "start": Object { - "column": 2, - "line": 5, + "start": Position { + "column": 0, + "line": 2, }, }, - "name": "title", - "value": "Components/Toggle", + "name": "Toggle", }, - Object { - "loc": Object { - "end": Object { - "column": 19, - "line": 6, + }, + "kinds": Object { + "Components/Toggle": Object { + "component": "Toggle", + "parameters": Array [ + Object { + "loc": Object { + "end": Object { + "column": 28, + "line": 5, + }, + "start": Object { + "column": 2, + "line": 5, + }, + }, + "name": "title", + "value": "Components/Toggle", }, - "start": Object { - "column": 2, - "line": 6, + Object { + "loc": Object { + "end": Object { + "column": 19, + "line": 6, + }, + "start": Object { + "column": 2, + "line": 6, + }, + }, + "name": "component", + "value": "Toggle", }, - }, - "name": "component", - "value": "Toggle", - }, - ], - "source": " + ], + "source": " import React from 'react'; import { Toggle } from './Toggle'; @@ -77,9 +84,17 @@ Object { ); }; ", + "stories": Array [ + "components-toggle--all-toggles", + ], + "title": "Components/Toggle", + }, + }, "stories": Object { - "allToggles": Object { + "components-toggle--all-toggles": Object { "arguments": Array [], + "id": "components-toggle--all-toggles", + "kind": "Components/Toggle", "loc": Object { "end": Object { "column": 1, @@ -113,6 +128,5 @@ Object { }", }, }, - "title": "Components/Toggle", } `; diff --git a/core/instrument/test/__snapshots__/get-csf-stories.test.js.snap b/core/instrument/test/__snapshots__/get-csf-stories.test.js.snap index d352c1552..baee42203 100644 --- a/core/instrument/test/__snapshots__/get-csf-stories.test.js.snap +++ b/core/instrument/test/__snapshots__/get-csf-stories.test.js.snap @@ -2,20 +2,16 @@ exports[`csf-story Named object export 1`] = ` Object { - "source": " - export const myStory = { - i: 1, - }; - ", + "components": Object {}, + "kinds": Object {}, "stories": Object {}, } `; exports[`csf-story No arguments 1`] = ` Object { - "source": " - export const myStory = () => {}; - ", + "components": Object {}, + "kinds": Object {}, "stories": Object { "myStory": Object { "arguments": Array [], @@ -38,18 +34,16 @@ Object { exports[`csf-story No story 1`] = ` Object { - "source": " - const i = 1; - ", + "components": Object {}, + "kinds": Object {}, "stories": Object {}, } `; exports[`csf-story Props argument 1`] = ` Object { - "source": " - export const myStory = props => {}; - ", + "components": Object {}, + "kinds": Object {}, "stories": Object { "myStory": Object { "arguments": Array [ @@ -87,9 +81,8 @@ Object { exports[`csf-story Three levels - alias 1`] = ` Object { - "source": " - export const myStory = ({ name: { first, last }, age }) => {}; - ", + "components": Object {}, + "kinds": Object {}, "stories": Object { "myStory": Object { "arguments": Array [ @@ -185,9 +178,8 @@ Object { exports[`csf-story Two arguments 1`] = ` Object { - "source": " - export const myStory = (props, context) => {}; - ", + "components": Object {}, + "kinds": Object {}, "stories": Object { "myStory": Object { "arguments": Array [ @@ -239,9 +231,8 @@ Object { exports[`csf-story Two levels - alias 1`] = ` Object { - "source": " - export const myStory = ({ name: MyNam, age }) => {}; - ", + "components": Object {}, + "kinds": Object {}, "stories": Object { "myStory": Object { "arguments": Array [ @@ -308,9 +299,8 @@ Object { exports[`csf-story Two levels sub arguments 1`] = ` Object { - "source": " - export const myStory = ({ name, age }) => {}; - ", + "components": Object {}, + "kinds": Object {}, "stories": Object { "myStory": Object { "arguments": Array [ @@ -377,9 +367,8 @@ Object { exports[`csf-story Typescript 1`] = ` Object { - "source": " - export const myStory = (props: Properties) => {}; - ", + "components": Object {}, + "kinds": Object {}, "stories": Object { "myStory": Object { "arguments": Array [ diff --git a/core/instrument/test/__snapshots__/mdx-component.test.js.snap b/core/instrument/test/__snapshots__/mdx-component.test.js.snap index 067d57f97..c841db9e5 100644 --- a/core/instrument/test/__snapshots__/mdx-component.test.js.snap +++ b/core/instrument/test/__snapshots__/mdx-component.test.js.snap @@ -2,211 +2,253 @@ exports[`mdx-component component parameter 1`] = ` Object { - "component": Object { - "from": "./Button", - "imported": "Button", - "loc": SourceLocation { - "end": Position { - "column": 34, - "line": 3, - }, - "start": Position { - "column": 0, - "line": 3, - }, - }, - "name": "Button", - }, - "parameters": Array [ - Object { - "loc": Object { - "end": Object { - "column": 27, - "line": 4, + "components": Object { + "Button": Object { + "from": "./Button", + "import": "import { Button } from \\"./Button\\"; +", + "imported": "Button", + "loc": SourceLocation { + "end": Position { + "column": 34, + "line": 3, }, - "start": Object { - "column": 6, - "line": 4, + "start": Position { + "column": 0, + "line": 3, }, }, - "name": "title", - "value": "Storybook/MDX", + "name": "Button", }, - Object { - "loc": Object { - "end": Object { - "column": 46, - "line": 4, - }, - "start": Object { - "column": 28, - "line": 4, + }, + "kinds": Object { + "Storybook/MDX": Object { + "component": "Button", + "parameters": Array [ + Object { + "loc": Object { + "end": Object { + "column": 27, + "line": 4, + }, + "start": Object { + "column": 6, + "line": 4, + }, + }, + "name": "title", + "value": "Storybook/MDX", }, - }, - "name": "component", - "value": Array [ Object { "loc": Object { "end": Object { - "column": 45, + "column": 46, "line": 4, }, "start": Object { - "column": 39, + "column": 28, "line": 4, }, }, - "name": "Button", - "value": "Button", + "name": "component", + "value": Array [ + Object { + "loc": Object { + "end": Object { + "column": 45, + "line": 4, + }, + "start": Object { + "column": 39, + "line": 4, + }, + }, + "name": "Button", + "value": "Button", + }, + ], }, ], - }, - ], - "source": " + "source": " import { Meta } from '@storybook/addon-docs/blocks'; import { Button } from './Button'; ", + "title": "Storybook/MDX", + }, + }, "stories": Object {}, - "title": "Storybook/MDX", } `; exports[`mdx-component named alias import 1`] = ` Object { - "component": Object { - "from": "./Button", - "imported": "Btn", - "loc": SourceLocation { - "end": Position { - "column": 41, - "line": 3, - }, - "start": Position { - "column": 0, - "line": 3, - }, - }, - "name": "Button", - }, - "parameters": Array [ - Object { - "loc": Object { - "end": Object { - "column": 27, - "line": 4, + "components": Object { + "Button": Object { + "from": "./Button", + "import": "import { Button } from \\"./Button\\"; +", + "imported": "Btn", + "loc": SourceLocation { + "end": Position { + "column": 41, + "line": 3, }, - "start": Object { - "column": 6, - "line": 4, + "start": Position { + "column": 0, + "line": 3, }, }, - "name": "title", - "value": "Storybook/MDX", + "name": "Button", }, - Object { - "loc": Object { - "end": Object { - "column": 46, - "line": 4, - }, - "start": Object { - "column": 28, - "line": 4, + }, + "kinds": Object { + "Storybook/MDX": Object { + "component": "Button", + "parameters": Array [ + Object { + "loc": Object { + "end": Object { + "column": 27, + "line": 4, + }, + "start": Object { + "column": 6, + "line": 4, + }, + }, + "name": "title", + "value": "Storybook/MDX", }, - }, - "name": "component", - "value": Array [ Object { "loc": Object { "end": Object { - "column": 45, + "column": 46, "line": 4, }, "start": Object { - "column": 39, + "column": 28, "line": 4, }, }, - "name": "Button", - "value": "Button", + "name": "component", + "value": Array [ + Object { + "loc": Object { + "end": Object { + "column": 45, + "line": 4, + }, + "start": Object { + "column": 39, + "line": 4, + }, + }, + "name": "Button", + "value": "Button", + }, + ], }, ], - }, - ], - "source": " + "source": " import { Meta } from '@storybook/addon-docs/blocks'; import { Btn as Button } from './Button'; ", + "title": "Storybook/MDX", + }, + }, "stories": Object {}, - "title": "Storybook/MDX", } `; exports[`mdx-component story import 1`] = ` Object { - "component": Object { - "from": "./Button", - "imported": "Btn", - "loc": SourceLocation { - "end": Position { - "column": 41, - "line": 3, - }, - "start": Position { - "column": 0, - "line": 3, - }, - }, - "name": "Button", - }, - "parameters": Array [ - Object { - "loc": Object { - "end": Object { - "column": 33, - "line": 22, + "components": Object { + "Button": Object { + "from": "./Button", + "import": "import { Button } from \\"./Button\\"; +", + "imported": "Btn", + "loc": SourceLocation { + "end": Position { + "column": 41, + "line": 3, }, - "start": Object { - "column": 12, - "line": 22, + "start": Position { + "column": 0, + "line": 3, }, }, - "name": "title", - "value": "Storybook/MDX", + "name": "Button", }, - Object { - "loc": Object { - "end": Object { - "column": 52, - "line": 22, - }, - "start": Object { + "Toggle": Object { + "from": "./Toggle", + "import": "import { Toggle } from \\"./Toggle\\"; +", + "imported": "Toggle", + "loc": SourceLocation { + "end": Position { "column": 34, - "line": 22, + "line": 4, + }, + "start": Position { + "column": 0, + "line": 4, }, }, - "name": "component", - "value": Array [ + "name": "Toggle", + }, + }, + "kinds": Object { + "Storybook/MDX": Object { + "component": "Button", + "parameters": Array [ Object { "loc": Object { "end": Object { - "column": 51, + "column": 33, "line": 22, }, "start": Object { - "column": 45, + "column": 12, "line": 22, }, }, - "name": "Button", - "value": "Button", + "name": "title", + "value": "Storybook/MDX", + }, + Object { + "loc": Object { + "end": Object { + "column": 52, + "line": 22, + }, + "start": Object { + "column": 34, + "line": 22, + }, + }, + "name": "component", + "value": Array [ + Object { + "loc": Object { + "end": Object { + "column": 51, + "line": 22, + }, + "start": Object { + "column": 45, + "line": 22, + }, + }, + "name": "Button", + "value": "Button", + }, + ], }, ], - }, - ], - "source": " + "source": " import { Meta, Story } from '@storybook/addon-docs/blocks'; import { Btn as Button } from './Button'; import { Toggle } from './Toggle'; @@ -215,23 +257,17 @@ import { Toggle } from './Toggle'; ", + "stories": Array [ + "storybook-mdx--my-story", + ], + "title": "Storybook/MDX", + }, + }, "stories": Object { - "my-story": Object { - "component": Object { - "from": "./Toggle", - "imported": "Toggle", - "loc": SourceLocation { - "end": Position { - "column": 34, - "line": 4, - }, - "start": Position { - "column": 0, - "line": 4, - }, - }, - "name": "Toggle", - }, + "storybook-mdx--my-story": Object { + "component": "Toggle", + "id": "storybook-mdx--my-story", + "kind": "Storybook/MDX", "loc": Object { "end": Object { "column": 50, @@ -291,6 +327,5 @@ import { Toggle } from './Toggle'; "source": "", }, }, - "title": "Storybook/MDX", } `; diff --git a/core/instrument/test/__snapshots__/mdx-story.test.js.snap b/core/instrument/test/__snapshots__/mdx-story.test.js.snap index 6fb832f7a..db1563cd0 100644 --- a/core/instrument/test/__snapshots__/mdx-story.test.js.snap +++ b/core/instrument/test/__snapshots__/mdx-story.test.js.snap @@ -2,67 +2,74 @@ exports[`mdx-stories Props argument 1`] = ` Object { - "component": Object { - "from": "../components/BaseButton", - "imported": "default", - "loc": SourceLocation { - "end": Position { - "column": 46, - "line": 3, - }, - "start": Position { - "column": 0, - "line": 3, - }, - }, - "name": "Button", - }, - "parameters": Array [ - Object { - "loc": Object { - "end": Object { - "column": 29, - "line": 22, + "components": Object { + "Button": Object { + "from": "../components/BaseButton", + "import": "import { Button } from \\"../components/BaseButton\\"; +", + "imported": "default", + "loc": SourceLocation { + "end": Position { + "column": 46, + "line": 3, }, - "start": Object { - "column": 8, - "line": 22, + "start": Position { + "column": 0, + "line": 3, }, }, - "name": "title", - "value": "Storybook/MDX", + "name": "Button", }, - Object { - "loc": Object { - "end": Object { - "column": 10, - "line": 25, - }, - "start": Object { - "column": 8, - "line": 23, - }, - }, - "name": "parameters", - "value": Array [ + }, + "kinds": Object { + "Storybook/MDX": Object { + "component": "Button", + "parameters": Array [ Object { "loc": Object { "end": Object { - "column": 27, - "line": 24, + "column": 29, + "line": 22, }, "start": Object { + "column": 8, + "line": 22, + }, + }, + "name": "title", + "value": "Storybook/MDX", + }, + Object { + "loc": Object { + "end": Object { "column": 10, - "line": 24, + "line": 25, + }, + "start": Object { + "column": 8, + "line": 23, }, }, - "name": "component", - "value": "Button", + "name": "parameters", + "value": Array [ + Object { + "loc": Object { + "end": Object { + "column": 27, + "line": 24, + }, + "start": Object { + "column": 10, + "line": 24, + }, + }, + "name": "component", + "value": "Button", + }, + ], }, ], - }, - ], - "source": " + "source": " import { Story, Meta } from '@storybook/addon-docs/blocks'; import Button from '../components/BaseButton'; @@ -74,8 +81,14 @@ import Button from '../components/BaseButton'; ", + "stories": Array [ + "storybook-mdx--story-with-props", + ], + "title": "Storybook/MDX", + }, + }, "stories": Object { - "story-with-props": Object { + "storybook-mdx--story-with-props": Object { "arguments": Array [ Object { "loc": Object { @@ -92,6 +105,8 @@ import Button from '../components/BaseButton'; "value": "props", }, ], + "id": "storybook-mdx--story-with-props", + "kind": "Storybook/MDX", "loc": Object { "end": Object { "column": 57, @@ -122,73 +137,79 @@ import Button from '../components/BaseButton'; "source": "props =>