feat: mdx docs page

ccontrols · Apr 14, 2020 · f7512b5 · f7512b5
1 parent af8abf0
commit f7512b5
Show file tree

Hide file tree

Showing 13 changed files with 110 additions and 260 deletions.
diff --git a/core/instrument/src/index.ts b/core/instrument/src/index.ts
@@ -56,8 +56,8 @@ const parseSource = async (
   filePath: string,
   options: Required<InstrumentOptions>,
 ): Promise<ParseStorieReturnType> => {
-  const prettify = async (c: string): Promise<string> => {
-    if (options.prettier !== false) {
+  const prettify = async (c?: string): Promise<string> => {
+    if (c && options.prettier !== false) {
       const { resolveConfigOptions, ...otherOptions } = options.prettier || {};
       let allPrettierOptions:
         | prettier.Options
@@ -76,7 +76,7 @@ const parseSource = async (
         ...allPrettierOptions,
       });
     } else {
-      return c;
+      return c || '';
     }
   };
   const source = await prettify(code);
@@ -131,10 +131,10 @@ const parseSource = async (
       kind.repository = repository;
     }
   }
-  Object.keys(store.stories).forEach((key: string) => {
+  for (const key of Object.keys(store.stories)) {
     const story: Story = store.stories[key];
-    story.source = getASTSource(source, story.loc);
-  });
+    story.source = await prettify(getASTSource(source, story.loc));
+  }
   return store;
 };
 
@@ -202,6 +202,7 @@ export const parseStories = async (
     const exportsSource = extractStoryExports(exports);
     let transformed = source;
     if (transformMDX && exportsSource) {
+      debugger;
       transformed = `${renderer}\n${code}\n${exportsSource}`;
     }
     return {

diff --git a/core/instrument/src/misc/mdx-exports.ts b/core/instrument/src/misc/mdx-exports.ts
@@ -26,7 +26,7 @@ export const extractStoryExports = (exports?: ExportTypes): string => {
       if (exports.default && exports.default.story) {
         const expCode = mdxPropertiesExport(exports.default);
         if (expCode) {
-          defaultExportCode = `export default { ${expCode} };`;
+          defaultExportCode = `export default { ${expCode}, MDXPage: () => <MDXContent /> };`;
         }
       }
 

diff --git a/core/specification/src/stories.ts b/core/specification/src/stories.ts
@@ -216,6 +216,11 @@ export interface StoriesKind {
    */
   controls?: ComponentControls;
 
+  /**
+   * for MDX pages, this is an MDXContent function, to be rendered inside a MDXProvider
+   */
+  MDXPage?: any;
+
   [name: string]: any;
 }
 

diff --git a/examples/docz/.docz/app/db.json b/examples/docz/.docz/app/db.json
@@ -1,6 +1,6 @@
 {
   "config": {
-    "title": "Component Controls Docz Example",
+    "title": "Component Controls Docz",
     "description": "My awesome app using docz",
     "menu": [],
     "version": "0.6.0",
@@ -40,207 +40,5 @@
         ]
       }
     }
-  ],
-  "props": [
-    {
-      "key": "../storybook-6/src/components/Button.tsx",
-      "value": [
-        {
-          "description": "Button with react Typescript properties",
-          "displayName": "Button",
-          "methods": [],
-          "props": {
-            "disabled": {
-              "defaultValue": null,
-              "description": "Boolean indicating whether the button should render as disabled",
-              "name": "disabled",
-              "required": false,
-              "type": {
-                "name": "boolean | undefined"
-              }
-            },
-            "label": {
-              "defaultValue": null,
-              "description": "button label.",
-              "name": "label",
-              "required": false,
-              "type": {
-                "name": "string | undefined"
-              }
-            },
-            "onClick": {
-              "defaultValue": null,
-              "description": "onClick handler",
-              "name": "onClick",
-              "required": true,
-              "type": {
-                "name": "() => void"
-              }
-            },
-            "style": {
-              "defaultValue": null,
-              "description": "Custom styles",
-              "name": "style",
-              "required": true,
-              "type": {
-                "name": "object"
-              }
-            },
-            "backgroundColor": {
-              "defaultValue": null,
-              "description": "Background color",
-              "name": "backgroundColor",
-              "required": true,
-              "type": {
-                "name": "string"
-              }
-            },
-            "color": {
-              "defaultValue": null,
-              "description": "Text color, default black",
-              "name": "color",
-              "required": true,
-              "type": {
-                "name": "string"
-              }
-            },
-            "type": {
-              "defaultValue": null,
-              "description": "Button type",
-              "name": "type",
-              "required": true,
-              "type": {
-                "name": "\"button\" | \"reset\" | \"submit\""
-              }
-            },
-            "padding": {
-              "defaultValue": null,
-              "description": "Numeric  field type",
-              "name": "padding",
-              "required": true,
-              "type": {
-                "name": "number"
-              }
-            }
-          }
-        }
-      ]
-    },
-    {
-      "key": "../storybook-6/src/components/PropTypesButton.js",
-      "value": [
-        {
-          "description": "Button with react PropTypes",
-          "displayName": "Button",
-          "methods": [],
-          "actualName": "Button",
-          "props": {
-            "disabled": {
-              "type": {
-                "name": "bool"
-              },
-              "required": false,
-              "description": "Boolean indicating whether the button should render as disabled",
-              "defaultValue": {
-                "value": "false",
-                "computed": false
-              }
-            },
-            "label": {
-              "type": {
-                "name": "string"
-              },
-              "required": false,
-              "description": "button label.",
-              "defaultValue": {
-                "value": "'default'",
-                "computed": false
-              }
-            },
-            "onClick": {
-              "type": {
-                "name": "func"
-              },
-              "required": false,
-              "description": "onClick handler",
-              "defaultValue": {
-                "value": "() => {}",
-                "computed": false
-              }
-            },
-            "style": {
-              "type": {
-                "name": "shape",
-                "value": {}
-              },
-              "required": false,
-              "description": "Custom styles",
-              "defaultValue": {
-                "value": "{}",
-                "computed": false
-              }
-            },
-            "backgroundColor": {
-              "type": {
-                "name": "string"
-              },
-              "required": false,
-              "description": "Background color",
-              "defaultValue": {
-                "value": "'#fefefe'",
-                "computed": false
-              }
-            },
-            "color": {
-              "type": {
-                "name": "string"
-              },
-              "required": false,
-              "description": "Text color, default black",
-              "defaultValue": {
-                "value": "'black'",
-                "computed": false
-              }
-            },
-            "type": {
-              "type": {
-                "name": "enum",
-                "value": [
-                  {
-                    "value": "'button'",
-                    "computed": false
-                  },
-                  {
-                    "value": "'reset'",
-                    "computed": false
-                  },
-                  {
-                    "value": "'submit'",
-                    "computed": false
-                  }
-                ]
-              },
-              "required": false,
-              "description": "Button type",
-              "defaultValue": {
-                "value": "'button'",
-                "computed": false
-              }
-            },
-            "padding": {
-              "type": {
-                "name": "number"
-              },
-              "required": false,
-              "description": "Numeric  field type",
-              "defaultValue": {
-                "value": "5",
-                "computed": false
-              }
-            }
-          }
-        }
-      ]
-    }
   ]
 }
diff --git a/examples/docz/.docz/gatsby-config.js b/examples/docz/.docz/gatsby-config.js
@@ -19,7 +19,7 @@ const config = {
   pathPrefix: '/',
 
   siteMetadata: {
-    title: 'Component Controls Docz Example',
+    title: 'Component Controls Docz',
     description: 'My awesome app using docz',
   },
   plugins: [
@@ -65,7 +65,7 @@ const config = {
         eb: 'master',
         'edit-branch': 'master',
         config: '',
-        title: 'Component Controls Docz Example',
+        title: 'Component Controls Docz',
         description: 'My awesome app using docz',
         host: 'localhost',
         port: 3000,

diff --git a/examples/stories/src/stories/smart-controls.stories.mdx b/examples/stories/src/stories/smart-controls.stories.mdx
@@ -1,42 +1,31 @@
-import {
-  Story,
-  Preview,
-  Props,
-  Source as DocsSource,
-  Meta,  
-} from '@storybook/addon-docs/blocks';
-import { BlockContextProvider, ControlsTable, ComponentSource, StorySource } from '@component-controls/storybook';
+import { Meta, PropsTable, Playground, Story, BlockContextProvider, ControlsTable, ComponentSource, StorySource } from '@component-controls/storybook';
 import { Button } from '../components/Button';
 
 
 <Meta title="Storybook/MDX" parameters={{component: Button}} />
 
 # Smart controls
-<BlockContextProvider>
-  <ComponentSource of={Button} title='Component source' />
-</BlockContextProvider>  
+<ComponentSource of={Button} title='Component source' />
 
 <Story id="." />
 
-<BlockContextProvider>
-  <StorySource id="." />
-</BlockContextProvider>
+<StorySource id="." />
 
-<Props of={Button} />
+<PropsTable of={Button} />
 
 
-<Preview>
+<Playground>
   <Story name="smart story">
     {(props) => (
       <Button label="default" {...props}/>
     )}  
   </Story>
-</Preview>
+</Playground>
 
 
 # Small story with custom controls
 
-<Preview>
+<Playground>
   <Story name="small story" 
     controls={{
       text: {type: 'text', value: 'Hello'},
@@ -46,17 +35,15 @@ import { Button } from '../components/Button';
       <Button label={text}/>
     )}  
   </Story>
-</Preview>
+</Playground>
 
-<BlockContextProvider>
-  <ControlsTable name="small story" />
-</BlockContextProvider>  
 
+<ControlsTable name="small story" />
 # Story with no parameters == no smart controls
 
-<Preview>
+<Playground>
   <Story name="no controls">
       <Button label="Hello"/>
       <Button label="Second button"/>
   </Story>
-</Preview>
+</Playground>
diff --git a/integrations/storybook/src/blocks/Meta.tsx b/integrations/storybook/src/blocks/Meta.tsx
@@ -0,0 +1,9 @@
+import { FC } from 'react';
+
+interface MetaProps {
+  [key: string]: any;
+}
+/**
+ * empty component for storybook addon-docs compatibility
+ */
+export const Meta: FC<MetaProps> = () => null;
diff --git a/integrations/storybook/src/blocks/index.ts b/integrations/storybook/src/blocks/index.ts
@@ -1,6 +1,7 @@
 export * from './ComponentSource';
 export * from './ControlsTable';
 export * from './Description';
+export * from './Meta';
 export * from './Playground';
 export * from './PropsTable';
 export * from './Stories';