feat: category pages - tags, authors

ccontrols · Jun 12, 2020 · 5ced78b · 5ced78b
1 parent 9718fee
commit 5ced78b
Show file tree

Hide file tree

Showing 43 changed files with 1,888 additions and 1,273 deletions.
diff --git a/core/config/test/__snapshots__/config-folder.test.ts.snap b/core/config/test/__snapshots__/config-folder.test.ts.snap
@@ -22,6 +22,7 @@ Object {
     ],
   },
   "configPath": "/Users/atanasster/component-controls/core/config/test/fixtures",
+  "optionsFilePath": undefined,
 }
 `;
 
@@ -47,5 +48,6 @@ Object {
     ],
   },
   "configPath": "/Users/atanasster/component-controls/core/config/test/fixtures",
+  "optionsFilePath": undefined,
 }
 `;
diff --git a/core/instrument/src/babel/mdx-stories.ts b/core/instrument/src/babel/mdx-stories.ts
@@ -1,4 +1,3 @@
-import generate from '@babel/generator';
 import {
   Story,
   StoriesDoc,
@@ -10,70 +9,29 @@ import camelCase from 'camelcase';
 import { File } from '@babel/types';
 import traverse from '@babel/traverse';
 import { extractFunctionParameters } from './extract-function-parameters';
-import jsStringEscape from 'js-string-escape';
 import { followStoryImport } from './follow-imports';
 import { extractAttributes } from './extract-attributes';
 import { sourceLocation } from '../misc/source-location';
-import {
-  ParseStorieReturnType,
-  InstrumentOptions,
-  MDXExportType,
-} from '../types';
+import { ParseStorieReturnType, InstrumentOptions } from '../types';
 
 import { componentsFromParams } from '../misc/component-attributes';
 
-const serialzeProp = (prop: any): string => {
-  if (prop instanceof Date) {
-    return `"${prop.toString()}"`;
-  }
-  if (Array.isArray(prop)) {
-    return JSON.stringify(prop.map(p => serialzeProp(p)));
-  }
-  if (typeof prop === 'object') {
-    return JSON.stringify(
-      Object.keys(prop).reduce(
-        (acc, key) => ({ ...acc, [key]: serialzeProp(prop[key]) }),
-        {},
-      ),
-    );
-  }
-  if (typeof prop === 'string') {
-    return `"${jsStringEscape(prop)}"`;
-  }
-  return prop;
-};
-
 export const extractMDXStories = (props: any) => (
   ast: File,
   _options: Required<InstrumentOptions>,
   { source, filePath }: { source: string; filePath: string },
 ): ParseStorieReturnType => {
-  const collectAttributes = (
-    node: any,
-    exports?: MDXExportType,
-  ): StoryParameters => {
+  const collectAttributes = (node: any): StoryParameters => {
     return node.attributes.reduce((acc: StoryParameters, attribute: any) => {
-      if (exports) {
-        const { code } = generate(
-          attribute.value.expression || attribute.value,
-          {
-            retainFunctionParens: true,
-            retainLines: true,
-          },
-        );
-        const codeTrim = code.trim();
-        if (!exports.story) {
-          exports.story = {};
-        }
-        exports.story[attribute.name?.name] = codeTrim;
-      }
-
       if (attribute.value.type === 'StringLiteral') {
-        return { ...acc, [attribute.name?.name]: attribute.value?.value };
+        return {
+          ...acc,
+          [attribute.name.name]: attribute.value.value,
+        };
       } else if (attribute.value.type === 'JSXExpressionContainer') {
         return {
           ...acc,
-          [attribute.name?.name]: extractAttributes(attribute.value.expression),
+          [attribute.name.name]: extractAttributes(attribute.value.expression),
         };
       }
       return acc;
@@ -103,13 +61,7 @@ export const extractMDXStories = (props: any) => (
 
   if (props) {
     store.exports.default = {
-      story: Object.keys(props).reduce((acc: object, key: string) => {
-        const prop = props[key];
-        return {
-          ...acc,
-          [key]: serialzeProp(prop),
-        };
-      }, {}),
+      story: props,
     };
   }
   const { transformMDX } = _options.mdx;
@@ -129,8 +81,8 @@ export const extractMDXStories = (props: any) => (
       ) {
         switch (node.name.name) {
           case 'Story': {
-            const exports = transformMDX ? {} : undefined;
-            const attributes = collectAttributes(node, exports);
+            const attributes = collectAttributes(node);
+            const exports = transformMDX ? { story: attributes } : undefined;
             const { name } = attributes;
             if (typeof name === 'string') {
               if (store.stories[name]) {
@@ -147,6 +99,7 @@ export const extractMDXStories = (props: any) => (
                 name,
                 id,
               };
+
               if (
                 expression &&
                 (expression.expression.type === 'CallExpression' ||
@@ -213,8 +166,8 @@ export const extractMDXStories = (props: any) => (
             break;
           }
           case 'Meta': {
-            const exports = transformMDX ? {} : undefined;
-            const attributes = collectAttributes(node, exports);
+            const attributes = collectAttributes(node);
+            const exports = transformMDX ? { story: attributes } : undefined;
             const { title } = attributes;
             if (title) {
               const doc: StoriesDoc = {

diff --git a/core/instrument/src/index.ts b/core/instrument/src/index.ts
@@ -158,7 +158,6 @@ export const parseStories = async (
   } = mergedOptions.mdx;
   if (test && filePath.match(test)) {
     const { data, content } = matter(source);
-    debugger;
     const mdxParsed = await mdx(content, {
       filepath: filePath,
       ...otherMDXOptions,

diff --git a/core/instrument/src/misc/mdx-exports.ts b/core/instrument/src/misc/mdx-exports.ts
@@ -1,12 +1,7 @@
 import { MDXExportType, MDXExportTypes } from '../types';
 
 const mdxPropertiesExport = (exportType: MDXExportType): string | undefined => {
-  return exportType && exportType.story
-    ? `${Object.keys(exportType.story)
-        //@ts-ignore
-        .map(name => `${name}: ${exportType.story[name]}`)
-        .join(',\n')}`
-    : undefined;
+  return exportType ? JSON.stringify(exportType.story, null, 2) : undefined;
 };
 
 const mdxFunctionExport = (
@@ -25,8 +20,10 @@ export const extractStoryExports = (exports?: MDXExportTypes): string => {
       let defaultExportCode = '';
       if (exports.default) {
         const expCode = mdxPropertiesExport(exports.default);
-        defaultExportCode = `export default { ${
-          expCode ? `${expCode},` : ''
+        defaultExportCode = `
+
+        export default { ${
+          expCode ? `...${expCode},` : ''
         } MDXPage: MDXContent };`;
       }
 
@@ -39,10 +36,10 @@ export const extractStoryExports = (exports?: MDXExportTypes): string => {
             storiesExports.push(expFn);
           }
           const expCode = mdxPropertiesExport(exports[exportStory]);
+          debugger;
           if (expCode) {
-            storiesExports.push(`${exportStory}.story = {
-                ${expCode}
-             }`);
+            storiesExports.push(`${exportStory}.story = ${expCode}
+             `);
           }
         }
       }

diff --git a/core/instrument/test/__snapshots__/csf-components.test.ts.snap b/core/instrument/test/__snapshots__/csf-components.test.ts.snap
@@ -18,14 +18,12 @@ Object {
       "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js",
     },
   },
-  "docs": Object {
-    "Story": Object {
-      "component": "Button",
-      "components": Object {
-        "Button": "ceea0565a65f75c8c7b6b355d6d335ac",
-      },
-      "title": "Story",
+  "doc": Object {
+    "component": "Button",
+    "components": Object {
+      "Button": "ceea0565a65f75c8c7b6b355d6d335ac",
     },
+    "title": "Story",
   },
   "packages": Object {},
   "stories": Object {},
@@ -70,14 +68,12 @@ Object {
       "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js",
     },
   },
-  "docs": Object {
-    "Story": Object {
-      "components": Object {
-        "ArrowButton": "dc262d21cd7820523c7e0bacca461e87",
-        "Button": "2f4bd34d15be236674abaf6e894afe6e",
-      },
-      "title": "Story",
+  "doc": Object {
+    "components": Object {
+      "ArrowButton": "dc262d21cd7820523c7e0bacca461e87",
+      "Button": "2f4bd34d15be236674abaf6e894afe6e",
     },
+    "title": "Story",
   },
   "packages": Object {},
   "stories": Object {
@@ -151,18 +147,16 @@ Object {
       "request": "/Users/atanasster/component-controls/core/instrument/test/fixtures/components/button-default-arrow-func.js",
     },
   },
-  "docs": Object {
-    "Story": Object {
-      "component": "ArrowButton",
-      "components": Object {
-        "ArrowButton": "dc262d21cd7820523c7e0bacca461e87",
-        "Button": "2f4bd34d15be236674abaf6e894afe6e",
-      },
-      "subcomponents": Object {
-        "Button": "Button",
-      },
-      "title": "Story",
+  "doc": Object {
+    "component": "ArrowButton",
+    "components": Object {
+      "ArrowButton": "dc262d21cd7820523c7e0bacca461e87",
+      "Button": "2f4bd34d15be236674abaf6e894afe6e",
+    },
+    "subcomponents": Object {
+      "Button": "Button",
     },
+    "title": "Story",
   },
   "packages": Object {},
   "stories": Object {},