feat: auto create argTypes from jsdoc

Author: shijistar

.gitignore

@@ -8,3 +8,4 @@ run
 .DS_Store
 .cache
 .eslintcache
+debug-storybook.log

.storybook/main.ts

@@ -7,6 +7,9 @@ const config: StorybookConfig = {
     name: '@storybook/react-vite',
     options: {},
   },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
 };
 
 export default config;

.storybook/preview.tsx

@@ -4,7 +4,7 @@ import type { Preview, ReactRenderer } from '@storybook/react-vite';
 import { App as AntdApp, ConfigProvider as AntdConfigProvider, theme } from 'antd';
 import enUS from 'antd/es/locale/en_US';
 import zhCN from 'antd/es/locale/zh_CN';
-import type { StoryContext } from 'storybook/internal/csf';
+import type { StoryContext, StoryContextForEnhancers } from 'storybook/internal/csf';
 import { themes } from 'storybook/theming';
 import ConfigProvider from '../src/components/ConfigProvider';
 import storyI18n from './locales';
@@ -85,6 +85,7 @@ const preview: Preview = {
       );
     },
   ],
+  argTypesEnhancers: [jsdocArgTypesEnhancer],
 };
 
 function stripExampleBlock(input = '') {
@@ -96,4 +97,33 @@ function stripExampleBlock(input = '') {
   );
 }
 
+function jsdocArgTypesEnhancer(context: StoryContextForEnhancers) {
+  const component = context.component;
+  const docProps = component?.__docgenInfo?.props;
+  if (!docProps) return context.argTypes;
+
+  const next = { ...(context.argTypes || {}) };
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Object.entries(docProps).forEach(([propName, propInfo]: [string, any]) => {
+    next[propName] = {
+      ...(next[propName] || {}),
+      // control: ?
+      // The handwritten description will not be overwritten.
+      description: next[propName]?.description ?? propInfo?.description ?? '',
+      table: {
+        ...(next[propName]?.table || {}),
+        type: next[propName]?.table?.type ?? {
+          summary: propInfo?.type?.name || '',
+        },
+        defaultValue:
+          next[propName]?.table?.defaultValue ??
+          (propInfo?.defaultValue?.value ? { summary: String(propInfo.defaultValue.value) } : undefined),
+      },
+    };
+  });
+  console.log(next);
+  return next;
+}
+
 export default preview;

.storybook/stories/BreakLines.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import BreakLines from '../../src/components/BreakLines';
+import BreakLines, { type BreakLinesProps } from '../../src/components/BreakLines';
 
 const meta: Meta<typeof BreakLines> = {
   title: 'Components/BreakLines',
@@ -10,49 +10,49 @@ const meta: Meta<typeof BreakLines> = {
     EOL: '\n',
     tagName: 'div',
     className: '',
-  },
+  } satisfies Partial<BreakLinesProps>,
   argTypes: {
-    value: {
-      control: 'text',
-      description: `- **EN:** Text content
-- **CN:** 文本内容`,
-      table: {
-        defaultValue: { summary: '第一行\\n第二行\\n第三行（demo）' },
-      },
-    },
-    enabled: {
-      control: 'boolean',
-      description: `- **EN:** Whether the line break conversion is enabled.
-- **CN:** 是否启用换行转换。`,
-      table: {
-        defaultValue: { summary: 'true' },
-      },
-    },
-    EOL: {
-      control: 'text',
-      description: `- **EN:** The end-of-line character to use for splitting lines.
-- **CN:** 用于分割行的行结束字符。`,
-      table: {
-        defaultValue: { summary: '\\n' },
-      },
-    },
-    tagName: {
-      control: 'select',
-      options: [false, 'span', 'div', 'i', 'pre'],
-      description: `- **EN:** The HTML tag to use for rendering the content.
-- **CN:** 用于渲染内容的 HTML 标签。`,
-      table: {
-        defaultValue: { summary: 'false（组件默认） / div（demo）' },
-      },
-    },
-    className: {
-      control: 'text',
-      description: `- **EN:** The CSS class name of the dom node, if \`tagName\` is set to false, this property is invalid.
-- **CN:** dom 节点的 css 类名，如果 \`tagName\` 设置为 false，则此属性无效。`,
-      table: {
-        defaultValue: { summary: '""（demo）' },
-      },
-    },
+    //     value: {
+    //       control: 'text',
+    //       description: `- **EN:** Text content
+    // - **CN:** 文本内容`,
+    //       table: {
+    //         defaultValue: { summary: '第一行\\n第二行\\n第三行（demo）' },
+    //       },
+    //     },
+    //     enabled: {
+    //       control: 'boolean',
+    //       description: `- **EN:** Whether the line break conversion is enabled.
+    // - **CN:** 是否启用换行转换。`,
+    //       table: {
+    //         defaultValue: { summary: 'true' },
+    //       },
+    //     },
+    //     EOL: {
+    //       control: 'text',
+    //       description: `- **EN:** The end-of-line character to use for splitting lines.
+    // - **CN:** 用于分割行的行结束字符。`,
+    //       table: {
+    //         defaultValue: { summary: '\\n' },
+    //       },
+    //     },
+    //     tagName: {
+    //       control: 'select',
+    //       options: [false, 'span', 'div', 'i', 'pre'],
+    //       description: `- **EN:** The HTML tag to use for rendering the content.
+    // - **CN:** 用于渲染内容的 HTML 标签。`,
+    //       table: {
+    //         defaultValue: { summary: 'false（组件默认） / div（demo）' },
+    //       },
+    //     },
+    //     className: {
+    //       control: 'text',
+    //       description: `- **EN:** The CSS class name of the dom node, if \`tagName\` is set to false, this property is invalid.
+    // - **CN:** dom 节点的 css 类名，如果 \`tagName\` 设置为 false，则此属性无效。`,
+    //       table: {
+    //         defaultValue: { summary: '""（demo）' },
+    //       },
+    //     },
   },
 };