能否通过TypeScript类型对Storybook controls进行自动分组？

实现思路 #

• 预先整理React HTMLAttributes 包含的所有原生DOM属性白名单
• 通过Storybook全局/单故事的argTypes配置，自动匹配属性归属，批量设置分组类别

具体实现步骤 #

1. 定义原生HTML属性白名单 #

// 可补充完整所有HTML原生属性，此处为简化示例
const HTML_NATIVE_ATTRS = new Set([
  'id', 'class', 'className', 'style', 'title', 'disabled', 'hidden',
  'onClick', 'onChange', 'onBlur', 'onFocus', 'placeholder', 'readOnly',
  // 可根据需要补充所有HTMLAttributes包含的属性
])

2. 全局配置自动分组（所有故事生效） #

在.storybook/preview.ts中添加配置：

import type { Preview } from '@storybook/react';

const preview: Preview = {
  parameters: {
    controls: {
      argTypes: {
        '*': {
          table: {
            category: {
              match: (propName: string) => {
                return HTML_NATIVE_ATTRS.has(propName) ? 'HTML原生属性' : '核心属性'
              }
            }
          }
        }
      }
    }
  }
};

export default preview;

3. 单故事独立配置（仅单个组件生效） #

如果不需要全局生效，只需要在对应组件的故事文件中配置即可：

import type { Meta, StoryObj } from '@storybook/react';
import { MyComponent } from './MyComponent';

const meta: Meta<typeof MyComponent> = {
  component: MyComponent,
  parameters: {
    controls: {
      argTypes: {
        '*': {
          table: {
            category: {
              match: (propName: string) => 
                HTML_NATIVE_ATTRS.has(propName) ? 'HTML原生属性' : '核心属性'
            }
          }
        }
      }
    }
  }
};

export default meta;
type Story = StoryObj<typeof MyComponent>;

优化提示 #

• 可以直接从@types/react导出的HTMLAttributes类型中提取所有属性名生成完整白名单，避免手动遗漏
• 如果需要进一步细分事件属性，可额外加判断逻辑，将on开头的事件属性单独分到「事件回调」分组

内容的提问来源于stack exchange，提问作者Félix Andersson