From 4a9fc915d18f306dff08b08ab902610c7ccc2ee6 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Sat, 29 Oct 2022 20:56:14 +0800
Subject: [PATCH 1/9] CSF plugin: Turn story comments into docs desciptions

---
 code/lib/csf-tools/package.json          |   1 -
 code/lib/csf-tools/src/CsfFile.ts        |   3 +
 code/lib/csf-tools/src/enrichCsf.test.ts | 116 +++++++++++++++++++++++
 code/lib/csf-tools/src/enrichCsf.ts      |  55 +++++++++--
 4 files changed, 166 insertions(+), 9 deletions(-)

diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json
index a27688c6b75d..77c7862f08a7 100644
--- a/code/lib/csf-tools/package.json
+++ b/code/lib/csf-tools/package.json
@@ -51,7 +51,6 @@
   "devDependencies": {
     "@babel/generator": "^7.12.11",
     "@babel/parser": "^7.12.11",
-    "@babel/template": "^7.12.11",
     "@babel/traverse": "^7.12.11",
     "@types/fs-extra": "^9.0.6",
     "js-yaml": "^3.14.1",
diff --git a/code/lib/csf-tools/src/CsfFile.ts b/code/lib/csf-tools/src/CsfFile.ts
index 458713ea0d41..af2ff4365d0f 100644
--- a/code/lib/csf-tools/src/CsfFile.ts
+++ b/code/lib/csf-tools/src/CsfFile.ts
@@ -156,6 +156,8 @@ export class CsfFile {
 
   _storyExports: Record<string, t.VariableDeclarator | t.FunctionDeclaration> = {};
 
+  _storyStatements: Record<string, t.ExportNamedDeclaration> = {};
+
   _storyAnnotations: Record<string, Record<string, t.Node>> = {};
 
   _templates: Record<string, t.Expression> = {};
@@ -283,6 +285,7 @@ export class CsfFile {
                   return;
                 }
                 self._storyExports[exportName] = decl;
+                self._storyStatements[exportName] = node;
                 let name = storyNameFromExport(exportName);
                 if (self._storyAnnotations[exportName]) {
                   logger.warn(
diff --git a/code/lib/csf-tools/src/enrichCsf.test.ts b/code/lib/csf-tools/src/enrichCsf.test.ts
index f2e7988f9453..07b89aab3d0b 100644
--- a/code/lib/csf-tools/src/enrichCsf.test.ts
+++ b/code/lib/csf-tools/src/enrichCsf.test.ts
@@ -125,6 +125,122 @@ describe('enrichCsf', () => {
       `);
     });
   });
+
+  describe('descriptions', () => {
+    it('skips inline comments', () => {
+      expect(
+        enrich(dedent`
+          export default {
+           title: 'Button',
+          }
+          // The most basic button
+          export const Basic = () => <Button />
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Button'
+        };
+        // The most basic button
+        export const Basic = () => <Button />;
+        Basic.parameters = {
+          storySource: {
+            source: "() => <Button />"
+          },
+          ...Basic.parameters
+        };
+      `);
+    });
+
+    it('skips blocks without jsdoc', () => {
+      expect(
+        enrich(dedent`
+          export default {
+           title: 'Button',
+          }
+          /* The most basic button */
+          export const Basic = () => <Button />
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Button'
+        };
+        /* The most basic button */
+        export const Basic = () => <Button />;
+        Basic.parameters = {
+          storySource: {
+            source: "() => <Button />"
+          },
+          ...Basic.parameters
+        };
+      `);
+    });
+
+    it('JSDoc single-line', () => {
+      expect(
+        enrich(dedent`
+          export default {
+           title: 'Button',
+          }
+          /** The most basic button */
+          export const Basic = () => <Button />
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Button'
+        };
+        /** The most basic button */
+        export const Basic = () => <Button />;
+        Basic.parameters = {
+          storySource: {
+            source: "() => <Button />"
+          },
+          docs: {
+            description: {
+              story: "The most basic button"
+            }
+          },
+          ...Basic.parameters
+        };
+      `);
+    });
+
+    it('JSDoc multi-line', () => {
+      expect(
+        enrich(dedent`
+          export default {
+           title: 'Button',
+          }
+          /**
+           * The most basic button
+           * 
+           * In a block!
+           */
+          export const Basic = () => <Button />
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Button'
+        };
+        /**
+         * The most basic button
+         * 
+         * In a block!
+         */
+        export const Basic = () => <Button />;
+        Basic.parameters = {
+          storySource: {
+            source: "() => <Button />"
+          },
+          docs: {
+            description: {
+              story: "The most basic button\\n\\nIn a block!"
+            }
+          },
+          ...Basic.parameters
+        };
+      `);
+    });
+  });
 });
 
 const source = (csfExport: string) => {
diff --git a/code/lib/csf-tools/src/enrichCsf.ts b/code/lib/csf-tools/src/enrichCsf.ts
index 0d1e7c1d579a..3171f7758b3b 100644
--- a/code/lib/csf-tools/src/enrichCsf.ts
+++ b/code/lib/csf-tools/src/enrichCsf.ts
@@ -2,20 +2,42 @@
 import * as t from '@babel/types';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import * as generate from '@babel/generator';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import * as template from '@babel/template';
 import type { CsfFile } from './CsfFile';
 
 export const enrichCsf = (csf: CsfFile) => {
   Object.keys(csf._storyExports).forEach((key) => {
     const storyExport = csf.getStoryExport(key);
     const source = extractSource(storyExport);
-    const addParameter = template.default(`
-       %%key%%.parameters = { storySource: { source: %%source%% }, ...%%key%%.parameters };
-    `)({
-      key: t.identifier(key),
-      source: t.stringLiteral(source),
-    }) as t.Statement;
+    const description = extractDescription(csf._storyStatements[key]);
+    const parameters = [];
+    // storySource: { source: %%source%% },
+    parameters.push(
+      t.objectProperty(
+        t.identifier('storySource'),
+        t.objectExpression([t.objectProperty(t.identifier('source'), t.stringLiteral(source))])
+      )
+    );
+    // docs: { description: { story: %%description%% } },
+    if (description) {
+      parameters.push(
+        t.objectProperty(
+          t.identifier('docs'),
+          t.objectExpression([
+            t.objectProperty(
+              t.identifier('description'),
+              t.objectExpression([
+                t.objectProperty(t.identifier('story'), t.stringLiteral(description)),
+              ])
+            ),
+          ])
+        )
+      );
+    }
+    const originalParameters = t.memberExpression(t.identifier(key), t.identifier('parameters'));
+    parameters.push(t.spreadElement(originalParameters));
+    const addParameter = t.expressionStatement(
+      t.assignmentExpression('=', originalParameters, t.objectExpression(parameters))
+    );
     csf._ast.program.body.push(addParameter);
   });
 };
@@ -25,3 +47,20 @@ export const extractSource = (node: t.Node) => {
   const { code } = generate.default(src, {});
   return code;
 };
+
+export const extractDescription = (node?: t.Node) => {
+  if (node?.leadingComments) {
+    const comments = node.leadingComments
+      .map((comment) => {
+        if (comment.type === 'CommentLine' || !comment.value.startsWith('*')) return null;
+        return comment.value
+          .split('\n')
+          .map((line) => line.replace(/^(\s+)?(\*+)?(\s+)?/, ''))
+          .join('\n')
+          .trim();
+      })
+      .filter(Boolean);
+    return comments.join('\n');
+  }
+  return '';
+};

From 2c4c25d69268d88e51d5264e9cfec622a6fbe15a Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Sat, 29 Oct 2022 21:24:13 +0800
Subject: [PATCH 2/9] Added some testcases

---
 .../docs/template/stories/docspage/basic.stories.ts      | 9 +++++++++
 code/ui/blocks/src/controls/Boolean.stories.tsx          | 4 ++++
 code/yarn.lock                                           | 3 +--
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/code/addons/docs/template/stories/docspage/basic.stories.ts b/code/addons/docs/template/stories/docspage/basic.stories.ts
index 46d78074ecf8..58a24a2eb472 100644
--- a/code/addons/docs/template/stories/docspage/basic.stories.ts
+++ b/code/addons/docs/template/stories/docspage/basic.stories.ts
@@ -7,15 +7,24 @@ export default {
   parameters: { chromatic: { disable: true } },
 };
 
+/**
+ * A basic button
+ */
 export const Basic = {
   args: { label: 'Basic' },
 };
 
+/**
+ * Won't show up in DocsPage
+ */
 export const Disabled = {
   args: { label: 'Disabled in DocsPage' },
   parameters: { docs: { disable: true } },
 };
 
+/**
+ * Another button, just to show multiple stories
+ */
 export const Another = {
   args: { label: 'Another' },
 };
diff --git a/code/ui/blocks/src/controls/Boolean.stories.tsx b/code/ui/blocks/src/controls/Boolean.stories.tsx
index 2e1288bde82f..b88cd3def47e 100644
--- a/code/ui/blocks/src/controls/Boolean.stories.tsx
+++ b/code/ui/blocks/src/controls/Boolean.stories.tsx
@@ -4,6 +4,7 @@ import { BooleanControl } from './Boolean';
 export default {
   title: 'Controls/Boolean',
   component: BooleanControl,
+  tags: ['docsPage'],
 };
 
 const Template = (initialValue?: boolean) => {
@@ -20,4 +21,7 @@ export const True = () => Template(true);
 
 export const False = () => Template(false);
 
+/**
+ * When no value is set on the control
+ */
 export const Undefined = () => Template(undefined);
diff --git a/code/yarn.lock b/code/yarn.lock
index bb449b90aa3e..7fb324ed3adc 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -2119,7 +2119,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/template@npm:^7.12.11, @babel/template@npm:^7.16.7, @babel/template@npm:^7.18.10, @babel/template@npm:^7.3.3, @babel/template@npm:^7.4.0, @babel/template@npm:^7.7.0, @babel/template@npm:^7.8.6":
+"@babel/template@npm:^7.16.7, @babel/template@npm:^7.18.10, @babel/template@npm:^7.3.3, @babel/template@npm:^7.4.0, @babel/template@npm:^7.7.0, @babel/template@npm:^7.8.6":
   version: 7.18.10
   resolution: "@babel/template@npm:7.18.10"
   dependencies:
@@ -6644,7 +6644,6 @@ __metadata:
   dependencies:
     "@babel/generator": ^7.12.11
     "@babel/parser": ^7.12.11
-    "@babel/template": ^7.12.11
     "@babel/traverse": ^7.12.11
     "@babel/types": ^7.12.11
     "@storybook/csf": next

From 87b2781a530141952763949268bf7edf559d80d1 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Sun, 30 Oct 2022 17:19:35 +0800
Subject: [PATCH 3/9] Turn this into a loader

So that it runs on code that still contains comments
---
 code/lib/csf-plugin/src/index.ts | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/code/lib/csf-plugin/src/index.ts b/code/lib/csf-plugin/src/index.ts
index a69492ea13d8..1cd57cd53111 100644
--- a/code/lib/csf-plugin/src/index.ts
+++ b/code/lib/csf-plugin/src/index.ts
@@ -1,21 +1,24 @@
 import { createUnplugin } from 'unplugin';
+import fs from 'fs';
 import { loadCsf, enrichCsf, formatCsf } from '@storybook/csf-tools';
 
 export interface CsfPluginOptions {
   source?: boolean;
+  description?: boolean;
 }
 
 const STORIES_REGEX = /\.(story|stories)\.[tj]sx?$/;
 
 const logger = console;
 
-export const unplugin = createUnplugin((options: CsfPluginOptions) => {
+export const unplugin = createUnplugin<CsfPluginOptions>((options) => {
   return {
     name: 'unplugin-csf',
-    transformInclude(id) {
+    loadInclude(id) {
       return STORIES_REGEX.test(id);
     },
-    transform(code) {
+    load(fname) {
+      const code = fs.readFileSync(fname, 'utf-8');
       try {
         const csf = loadCsf(code, { makeTitle: (userTitle) => userTitle || 'default' }).parse();
         enrichCsf(csf);

From 6bbe7f3cd8b73fabf65501d645f63fca79ea2768 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Sun, 30 Oct 2022 17:25:01 +0800
Subject: [PATCH 4/9] Preserve indentation & cleanup

---
 code/lib/csf-tools/src/enrichCsf.test.ts | 37 ++++++++++++++++++++++++
 code/lib/csf-tools/src/enrichCsf.ts      | 25 ++++++++--------
 2 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/code/lib/csf-tools/src/enrichCsf.test.ts b/code/lib/csf-tools/src/enrichCsf.test.ts
index 07b89aab3d0b..4ba874716149 100644
--- a/code/lib/csf-tools/src/enrichCsf.test.ts
+++ b/code/lib/csf-tools/src/enrichCsf.test.ts
@@ -240,6 +240,43 @@ describe('enrichCsf', () => {
         };
       `);
     });
+
+    it('preserves indentation', () => {
+      expect(
+        enrich(dedent`
+          export default {
+           title: 'Button',
+          }
+          /**
+           * - A bullet list
+           *   - A sub-bullet
+           * - A second bullet
+           */
+          export const Basic = () => <Button />
+        `)
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Button'
+        };
+        /**
+         * - A bullet list
+         *   - A sub-bullet
+         * - A second bullet
+         */
+        export const Basic = () => <Button />;
+        Basic.parameters = {
+          storySource: {
+            source: "() => <Button />"
+          },
+          docs: {
+            description: {
+              story: "- A bullet list\\n  - A sub-bullet\\n- A second bullet"
+            }
+          },
+          ...Basic.parameters
+        };
+      `);
+    });
   });
 });
 
diff --git a/code/lib/csf-tools/src/enrichCsf.ts b/code/lib/csf-tools/src/enrichCsf.ts
index 3171f7758b3b..ff9fd43ff8e7 100644
--- a/code/lib/csf-tools/src/enrichCsf.ts
+++ b/code/lib/csf-tools/src/enrichCsf.ts
@@ -49,18 +49,19 @@ export const extractSource = (node: t.Node) => {
 };
 
 export const extractDescription = (node?: t.Node) => {
-  if (node?.leadingComments) {
-    const comments = node.leadingComments
-      .map((comment) => {
-        if (comment.type === 'CommentLine' || !comment.value.startsWith('*')) return null;
-        return comment.value
+  if (!node?.leadingComments) return '';
+  const comments = node.leadingComments
+    .map((comment) => {
+      if (comment.type === 'CommentLine' || !comment.value.startsWith('*')) return null;
+      return (
+        comment.value
           .split('\n')
-          .map((line) => line.replace(/^(\s+)?(\*+)?(\s+)?/, ''))
+          // remove leading *'s and spaces from the beginning of each line
+          .map((line) => line.replace(/^(\s+)?(\*+)?(\s)?/, ''))
           .join('\n')
-          .trim();
-      })
-      .filter(Boolean);
-    return comments.join('\n');
-  }
-  return '';
+          .trim()
+      );
+    })
+    .filter(Boolean);
+  return comments.join('\n');
 };

From d0cddf51d33d28a83e34c4f602c72e6b9c9f8484 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Mon, 31 Oct 2022 23:58:41 +0800
Subject: [PATCH 5/9] Fix csf-plugin to load "pre" & async for perf

---
 code/lib/csf-plugin/src/index.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/code/lib/csf-plugin/src/index.ts b/code/lib/csf-plugin/src/index.ts
index 1cd57cd53111..2fbf7bd94cd5 100644
--- a/code/lib/csf-plugin/src/index.ts
+++ b/code/lib/csf-plugin/src/index.ts
@@ -1,5 +1,5 @@
 import { createUnplugin } from 'unplugin';
-import fs from 'fs';
+import fs from 'fs/promises';
 import { loadCsf, enrichCsf, formatCsf } from '@storybook/csf-tools';
 
 export interface CsfPluginOptions {
@@ -14,11 +14,12 @@ const logger = console;
 export const unplugin = createUnplugin<CsfPluginOptions>((options) => {
   return {
     name: 'unplugin-csf',
+    enforce: 'pre',
     loadInclude(id) {
       return STORIES_REGEX.test(id);
     },
-    load(fname) {
-      const code = fs.readFileSync(fname, 'utf-8');
+    async load(fname) {
+      const code = await fs.readFile(fname, 'utf-8');
       try {
         const csf = loadCsf(code, { makeTitle: (userTitle) => userTitle || 'default' }).parse();
         enrichCsf(csf);

From ec5dc1c821faab2887f9c5cdf1672e077ee92314 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Mon, 31 Oct 2022 23:59:49 +0800
Subject: [PATCH 6/9] CSF-tools: Fix parameters merge for enrichCsf

---
 code/lib/csf-tools/src/enrichCsf.test.ts | 82 ++++++++++++++----------
 code/lib/csf-tools/src/enrichCsf.ts      | 33 +++++++++-
 2 files changed, 79 insertions(+), 36 deletions(-)

diff --git a/code/lib/csf-tools/src/enrichCsf.test.ts b/code/lib/csf-tools/src/enrichCsf.test.ts
index 4ba874716149..ba1ff84e8068 100644
--- a/code/lib/csf-tools/src/enrichCsf.test.ts
+++ b/code/lib/csf-tools/src/enrichCsf.test.ts
@@ -34,10 +34,11 @@ describe('enrichCsf', () => {
         };
         export const Basic = () => <Button />;
         Basic.parameters = {
+          ...Basic.parameters,
           storySource: {
-            source: "() => <Button />"
-          },
-          ...Basic.parameters
+            source: "() => <Button />",
+            ...Basic.parameters?.storySource
+          }
         };
       `);
     });
@@ -61,10 +62,11 @@ describe('enrichCsf', () => {
           foo: 'bar'
         };
         Basic.parameters = {
+          ...Basic.parameters,
           storySource: {
-            source: "args => <Button {...args} />"
-          },
-          ...Basic.parameters
+            source: "args => <Button {...args} />",
+            ...Basic.parameters?.storySource
+          }
         };
       `);
     });
@@ -88,10 +90,11 @@ describe('enrichCsf', () => {
           }
         };
         Basic.parameters = {
+          ...Basic.parameters,
           storySource: {
-            source: "{\\n  parameters: {\\n    foo: 'bar'\\n  }\\n}"
-          },
-          ...Basic.parameters
+            source: "{\\n  parameters: {\\n    foo: 'bar'\\n  }\\n}",
+            ...Basic.parameters?.storySource
+          }
         };
       `);
     });
@@ -111,16 +114,18 @@ describe('enrichCsf', () => {
         export const A = {};
         export const B = {};
         A.parameters = {
+          ...A.parameters,
           storySource: {
-            source: "{}"
-          },
-          ...A.parameters
+            source: "{}",
+            ...A.parameters?.storySource
+          }
         };
         B.parameters = {
+          ...B.parameters,
           storySource: {
-            source: "{}"
-          },
-          ...B.parameters
+            source: "{}",
+            ...B.parameters?.storySource
+          }
         };
       `);
     });
@@ -143,10 +148,11 @@ describe('enrichCsf', () => {
         // The most basic button
         export const Basic = () => <Button />;
         Basic.parameters = {
+          ...Basic.parameters,
           storySource: {
-            source: "() => <Button />"
-          },
-          ...Basic.parameters
+            source: "() => <Button />",
+            ...Basic.parameters?.storySource
+          }
         };
       `);
     });
@@ -167,10 +173,11 @@ describe('enrichCsf', () => {
         /* The most basic button */
         export const Basic = () => <Button />;
         Basic.parameters = {
+          ...Basic.parameters,
           storySource: {
-            source: "() => <Button />"
-          },
-          ...Basic.parameters
+            source: "() => <Button />",
+            ...Basic.parameters?.storySource
+          }
         };
       `);
     });
@@ -191,15 +198,18 @@ describe('enrichCsf', () => {
         /** The most basic button */
         export const Basic = () => <Button />;
         Basic.parameters = {
+          ...Basic.parameters,
           storySource: {
-            source: "() => <Button />"
+            source: "() => <Button />",
+            ...Basic.parameters?.storySource
           },
           docs: {
+            ...Basic.parameters?.docs,
             description: {
-              story: "The most basic button"
+              story: "The most basic button",
+              ...Basic.parameters?.docs?.description
             }
-          },
-          ...Basic.parameters
+          }
         };
       `);
     });
@@ -228,15 +238,18 @@ describe('enrichCsf', () => {
          */
         export const Basic = () => <Button />;
         Basic.parameters = {
+          ...Basic.parameters,
           storySource: {
-            source: "() => <Button />"
+            source: "() => <Button />",
+            ...Basic.parameters?.storySource
           },
           docs: {
+            ...Basic.parameters?.docs,
             description: {
-              story: "The most basic button\\n\\nIn a block!"
+              story: "The most basic button\\n\\nIn a block!",
+              ...Basic.parameters?.docs?.description
             }
-          },
-          ...Basic.parameters
+          }
         };
       `);
     });
@@ -265,15 +278,18 @@ describe('enrichCsf', () => {
          */
         export const Basic = () => <Button />;
         Basic.parameters = {
+          ...Basic.parameters,
           storySource: {
-            source: "() => <Button />"
+            source: "() => <Button />",
+            ...Basic.parameters?.storySource
           },
           docs: {
+            ...Basic.parameters?.docs,
             description: {
-              story: "- A bullet list\\n  - A sub-bullet\\n- A second bullet"
+              story: "- A bullet list\\n  - A sub-bullet\\n- A second bullet",
+              ...Basic.parameters?.docs?.description
             }
-          },
-          ...Basic.parameters
+          }
         };
       `);
     });
diff --git a/code/lib/csf-tools/src/enrichCsf.ts b/code/lib/csf-tools/src/enrichCsf.ts
index ff9fd43ff8e7..c5e05f9585c7 100644
--- a/code/lib/csf-tools/src/enrichCsf.ts
+++ b/code/lib/csf-tools/src/enrichCsf.ts
@@ -11,30 +11,57 @@ export const enrichCsf = (csf: CsfFile) => {
     const description = extractDescription(csf._storyStatements[key]);
     const parameters = [];
     // storySource: { source: %%source%% },
+    const originalParameters = t.memberExpression(t.identifier(key), t.identifier('parameters'));
+    parameters.push(t.spreadElement(originalParameters));
+
+    const optionalStorySource = t.optionalMemberExpression(
+      originalParameters,
+      t.identifier('storySource'),
+      false,
+      true
+    );
+
     parameters.push(
       t.objectProperty(
         t.identifier('storySource'),
-        t.objectExpression([t.objectProperty(t.identifier('source'), t.stringLiteral(source))])
+        t.objectExpression([
+          t.objectProperty(t.identifier('source'), t.stringLiteral(source)),
+          t.spreadElement(optionalStorySource),
+        ])
       )
     );
     // docs: { description: { story: %%description%% } },
     if (description) {
+      const optionalDocs = t.optionalMemberExpression(
+        originalParameters,
+        t.identifier('docs'),
+        false,
+        true
+      );
+
+      const optionalDescription = t.optionalMemberExpression(
+        optionalDocs,
+        t.identifier('description'),
+        false,
+        true
+      );
+
       parameters.push(
         t.objectProperty(
           t.identifier('docs'),
           t.objectExpression([
+            t.spreadElement(optionalDocs),
             t.objectProperty(
               t.identifier('description'),
               t.objectExpression([
                 t.objectProperty(t.identifier('story'), t.stringLiteral(description)),
+                t.spreadElement(optionalDescription),
               ])
             ),
           ])
         )
       );
     }
-    const originalParameters = t.memberExpression(t.identifier(key), t.identifier('parameters'));
-    parameters.push(t.spreadElement(originalParameters));
     const addParameter = t.expressionStatement(
       t.assignmentExpression('=', originalParameters, t.objectExpression(parameters))
     );

From ffc95536ada2ccd913da0539aea742ba22ee0a67 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Tue, 1 Nov 2022 00:12:52 +0800
Subject: [PATCH 7/9] CsfPlugin: Fix options handling, add tests

---
 code/lib/csf-plugin/src/index.ts         |  6 +-
 code/lib/csf-tools/src/enrichCsf.test.ts | 87 +++++++++++++++++++++++-
 code/lib/csf-tools/src/enrichCsf.ts      | 57 +++++++++-------
 3 files changed, 121 insertions(+), 29 deletions(-)

diff --git a/code/lib/csf-plugin/src/index.ts b/code/lib/csf-plugin/src/index.ts
index 2fbf7bd94cd5..037f156abf4b 100644
--- a/code/lib/csf-plugin/src/index.ts
+++ b/code/lib/csf-plugin/src/index.ts
@@ -1,11 +1,9 @@
 import { createUnplugin } from 'unplugin';
 import fs from 'fs/promises';
 import { loadCsf, enrichCsf, formatCsf } from '@storybook/csf-tools';
+import type { EnrichCsfOptions } from '@storybook/csf-tools';
 
-export interface CsfPluginOptions {
-  source?: boolean;
-  description?: boolean;
-}
+export type CsfPluginOptions = EnrichCsfOptions;
 
 const STORIES_REGEX = /\.(story|stories)\.[tj]sx?$/;
 
diff --git a/code/lib/csf-tools/src/enrichCsf.test.ts b/code/lib/csf-tools/src/enrichCsf.test.ts
index ba1ff84e8068..a0bb3af2db25 100644
--- a/code/lib/csf-tools/src/enrichCsf.test.ts
+++ b/code/lib/csf-tools/src/enrichCsf.test.ts
@@ -4,17 +4,18 @@
 import { dedent } from 'ts-dedent';
 import { loadCsf, formatCsf } from './CsfFile';
 import { enrichCsf, extractSource } from './enrichCsf';
+import type { EnrichCsfOptions } from './enrichCsf';
 
 expect.addSnapshotSerializer({
   print: (val: any) => val,
   test: (val) => true,
 });
 
-const enrich = (code: string) => {
+const enrich = (code: string, options?: EnrichCsfOptions) => {
   // we don't actually care about the title
 
   const csf = loadCsf(code, { makeTitle: (userTitle) => userTitle || 'default' }).parse();
-  enrichCsf(csf);
+  enrichCsf(csf, options);
   return formatCsf(csf);
 };
 
@@ -294,6 +295,88 @@ describe('enrichCsf', () => {
       `);
     });
   });
+
+  describe('options', () => {
+    it('disableSource', () => {
+      expect(
+        enrich(
+          dedent`
+          export default {
+           title: 'Button',
+          }
+          /** The most basic button */
+          export const Basic = () => <Button />
+        `,
+          { disableSource: true }
+        )
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Button'
+        };
+        /** The most basic button */
+        export const Basic = () => <Button />;
+        Basic.parameters = {
+          ...Basic.parameters,
+          docs: {
+            ...Basic.parameters?.docs,
+            description: {
+              story: "The most basic button",
+              ...Basic.parameters?.docs?.description
+            }
+          }
+        };
+      `);
+    });
+
+    it('disableDescription', () => {
+      expect(
+        enrich(
+          dedent`
+          export default {
+           title: 'Button',
+          }
+          /** The most basic button */
+          export const Basic = () => <Button />
+        `,
+          { disableDescription: true }
+        )
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Button'
+        };
+        /** The most basic button */
+        export const Basic = () => <Button />;
+        Basic.parameters = {
+          ...Basic.parameters,
+          storySource: {
+            source: "() => <Button />",
+            ...Basic.parameters?.storySource
+          }
+        };
+      `);
+    });
+
+    it('disable all', () => {
+      expect(
+        enrich(
+          dedent`
+          export default {
+           title: 'Button',
+          }
+          /** The most basic button */
+          export const Basic = () => <Button />
+        `,
+          { disableSource: true, disableDescription: true }
+        )
+      ).toMatchInlineSnapshot(`
+        export default {
+          title: 'Button'
+        };
+        /** The most basic button */
+        export const Basic = () => <Button />;
+      `);
+    });
+  });
 });
 
 const source = (csfExport: string) => {
diff --git a/code/lib/csf-tools/src/enrichCsf.ts b/code/lib/csf-tools/src/enrichCsf.ts
index c5e05f9585c7..bdfec5546ed4 100644
--- a/code/lib/csf-tools/src/enrichCsf.ts
+++ b/code/lib/csf-tools/src/enrichCsf.ts
@@ -4,32 +4,41 @@ import * as t from '@babel/types';
 import * as generate from '@babel/generator';
 import type { CsfFile } from './CsfFile';
 
-export const enrichCsf = (csf: CsfFile) => {
-  Object.keys(csf._storyExports).forEach((key) => {
+export interface EnrichCsfOptions {
+  disableSource?: boolean;
+  disableDescription?: boolean;
+}
+
+export const enrichCsf = (csf: CsfFile, options?: EnrichCsfOptions) => {
+  const enablesSource = Object.keys(csf._storyExports).forEach((key) => {
     const storyExport = csf.getStoryExport(key);
-    const source = extractSource(storyExport);
-    const description = extractDescription(csf._storyStatements[key]);
+    const source = !options?.disableSource && extractSource(storyExport);
+    const description =
+      !options?.disableDescription && extractDescription(csf._storyStatements[key]);
     const parameters = [];
     // storySource: { source: %%source%% },
     const originalParameters = t.memberExpression(t.identifier(key), t.identifier('parameters'));
     parameters.push(t.spreadElement(originalParameters));
 
-    const optionalStorySource = t.optionalMemberExpression(
-      originalParameters,
-      t.identifier('storySource'),
-      false,
-      true
-    );
-
-    parameters.push(
-      t.objectProperty(
+    if (source) {
+      const optionalStorySource = t.optionalMemberExpression(
+        originalParameters,
         t.identifier('storySource'),
-        t.objectExpression([
-          t.objectProperty(t.identifier('source'), t.stringLiteral(source)),
-          t.spreadElement(optionalStorySource),
-        ])
-      )
-    );
+        false,
+        true
+      );
+
+      parameters.push(
+        t.objectProperty(
+          t.identifier('storySource'),
+          t.objectExpression([
+            t.objectProperty(t.identifier('source'), t.stringLiteral(source)),
+            t.spreadElement(optionalStorySource),
+          ])
+        )
+      );
+    }
+
     // docs: { description: { story: %%description%% } },
     if (description) {
       const optionalDocs = t.optionalMemberExpression(
@@ -62,10 +71,12 @@ export const enrichCsf = (csf: CsfFile) => {
         )
       );
     }
-    const addParameter = t.expressionStatement(
-      t.assignmentExpression('=', originalParameters, t.objectExpression(parameters))
-    );
-    csf._ast.program.body.push(addParameter);
+    if (parameters.length > 1) {
+      const addParameter = t.expressionStatement(
+        t.assignmentExpression('=', originalParameters, t.objectExpression(parameters))
+      );
+      csf._ast.program.body.push(addParameter);
+    }
   });
 };
 

From 789a21b686c38b3d9845af43d5516f677a662078 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Tue, 1 Nov 2022 00:27:57 +0800
Subject: [PATCH 8/9] Fix typo [ci skip]

---
 code/lib/csf-tools/src/enrichCsf.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/lib/csf-tools/src/enrichCsf.ts b/code/lib/csf-tools/src/enrichCsf.ts
index bdfec5546ed4..264ae33a4cca 100644
--- a/code/lib/csf-tools/src/enrichCsf.ts
+++ b/code/lib/csf-tools/src/enrichCsf.ts
@@ -10,7 +10,7 @@ export interface EnrichCsfOptions {
 }
 
 export const enrichCsf = (csf: CsfFile, options?: EnrichCsfOptions) => {
-  const enablesSource = Object.keys(csf._storyExports).forEach((key) => {
+  Object.keys(csf._storyExports).forEach((key) => {
     const storyExport = csf.getStoryExport(key);
     const source = !options?.disableSource && extractSource(storyExport);
     const description =

From 5954bd8a3372b9a36ffb90c4dbd66b5bde608dcc Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Tue, 1 Nov 2022 11:29:25 +0800
Subject: [PATCH 9/9] Fix comment [ci skip]

---
 code/lib/csf-tools/src/enrichCsf.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/lib/csf-tools/src/enrichCsf.ts b/code/lib/csf-tools/src/enrichCsf.ts
index 264ae33a4cca..bdeae40825dd 100644
--- a/code/lib/csf-tools/src/enrichCsf.ts
+++ b/code/lib/csf-tools/src/enrichCsf.ts
@@ -16,10 +16,10 @@ export const enrichCsf = (csf: CsfFile, options?: EnrichCsfOptions) => {
     const description =
       !options?.disableDescription && extractDescription(csf._storyStatements[key]);
     const parameters = [];
-    // storySource: { source: %%source%% },
     const originalParameters = t.memberExpression(t.identifier(key), t.identifier('parameters'));
     parameters.push(t.spreadElement(originalParameters));
 
+    // storySource: { source: %%source%% },
     if (source) {
       const optionalStorySource = t.optionalMemberExpression(
         originalParameters,