feat: bind templates to stories

ccontrols · Nov 15, 2020 · a4dfb9f · a4dfb9f
1 parent d930dde
commit a4dfb9f
Show file tree

Hide file tree

Showing 16 changed files with 466 additions and 83 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -139,7 +139,7 @@
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "cwd": "${workspaceFolder}/core/instrument",
       "args": [
-        "esm-doc",
+        "esm-stories",
       ],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",

diff --git a/core/core/src/document.ts b/core/core/src/document.ts
@@ -187,7 +187,7 @@ export type Example<Props = unknown> = {
     any,
     any
   > | null;
-  bind: (props: any) => Example<Props>;
+  bind: (props?: Story<Props>) => Example<Props>;
 } & Omit<Story<Props>, 'controls'> & {
     controls?: ExampleControls;
   };
@@ -250,7 +250,7 @@ export type Document<Props = unknown> = {
   /**
    *  documentation file description
    */
-  description?: string;
+  description?: string | JSX.Element;
   /**
    * link to an image for the document, will be used for SEO
    */

diff --git a/core/instrument/src/babel/esm-stories.ts b/core/instrument/src/babel/esm-stories.ts
@@ -18,7 +18,7 @@ export const extractCSFStories = (
   { source, filePath }: { source: string; filePath: string },
 ): ParseStorieReturnType => {
   const globals: Stories = {};
-  const localStories: Stories = {};
+  const localFunctions: Stories = {};
 
   const extractFunction = (path: any, declaration: any): Story | undefined => {
     if (declaration.init) {
@@ -44,6 +44,25 @@ export const extractCSFStories = (
             ast,
           );
         }
+        case 'CallExpression': {
+          //template.bind
+          if (declaration.init.callee?.property?.name === 'bind') {
+            const callee = declaration.init.callee?.object;
+            if (callee?.name) {
+              const template = localFunctions[callee.name];
+              if (template) {
+                const name = declaration.id.name;
+                const story: Story = {
+                  loc: template.loc,
+                  name,
+                  id: name,
+                  arguments: template.arguments,
+                };
+                return story;
+              }
+            }
+          }
+        }
       }
     } else if (declaration.type === 'FunctionDeclaration') {
       const name = declaration.id.name;
@@ -134,7 +153,7 @@ export const extractCSFStories = (
           if (!store.stories[name]) {
             const story = extractFunction(path, declaration);
             if (story && story.name) {
-              localStories[story.name] = story;
+              localFunctions[story.name] = story;
             }
           }
         }
@@ -144,11 +163,11 @@ export const extractCSFStories = (
       const { node } = path;
       const localName = node.local.name;
       const exportedName = node.exported.name;
-      const story = localStories[localName];
+      const story = localFunctions[localName];
       if (story) {
         const global = globals[localName];
         if (global) {
-          localStories[localName] = {
+          localFunctions[localName] = {
             ...story,
             ...global,
           };