Merge pull request #19684 from storybookjs/shilman/csf-plugin-docgen-…

…description CSF-tools: Turn story comments into docs descriptions
storybookjs · Nov 1, 2022 · 75f1cb6 · 75f1cb6
2 parents 7d740f9 + 5954bd8
commit 75f1cb6
Show file tree

Hide file tree

Showing 8 changed files with 382 additions and 36 deletions.
diff --git 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/lib/csf-plugin/src/index.ts b/code/lib/csf-plugin/src/index.ts
@@ -1,21 +1,23 @@
 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;
-}
+export type CsfPluginOptions = EnrichCsfOptions;
 
 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) {
+    enforce: 'pre',
+    loadInclude(id) {
       return STORIES_REGEX.test(id);
     },
-    transform(code) {
+    async load(fname) {
+      const code = await fs.readFile(fname, 'utf-8');
       try {
         const csf = loadCsf(code, { makeTitle: (userTitle) => userTitle || 'default' }).parse();
         enrichCsf(csf);

diff --git 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
@@ -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(