SuperAPI AI 工具集

v9-component

测试与质量

查看项目

更新于 10-16 06:47

技能介绍

用途:在 Fluent UI 仓库中按 v9 规范脚手架生成新组件,自动产出组件、类型、hook、样式、render、index barrel 与一致性测试等必需文件。

主要能力:提供 react-component 生成器向已有包添加组件;react-library 生成器创建新 v9 包;另有 recipe-generator、prepare-initial-release、bundle-size-configuration、cypress-component-configuration 等生成器。

使用方式:向已有包添加组件运行 yarn nx g @fluentui/workspace-plugin:react-component --name $ARGUMENTS --project <project-name>;新建包先运行 yarn create-package 或 yarn nx g @fluentui/workspace-plugin:react-library --name <package-name> --owner "<team>",再添加组件。脚手架后需对照 docs/architecture/component-patterns.md 补充逻辑,在 use${ARGUMENTS}Styles.styles.ts 中用 @griffel/react 的 makeStyles 与 @fluentui/react-theme 的 tokens 编写样式,必要时补默认 story,并在新增导出后运行 yarn nx run <project>:generate-api 更新 API 文档。

关键规则:使用 ForwardRefComponent 与 React.forwardRef,不用 React.FC;使用设计令牌而非硬编码颜色/间距/字体;mergeClasses() 中用户 className 必须放最后;导出 hook 加 _unstable 后缀;访问 window/document/navigator 前用 canUseDOM() 守卫;不得依赖其他 Tier 3 组件包。

适用场景:Fluent UI 仓库内新增或扩展 v9 组件。限制:依赖该仓库的 Nx 工作区与生成器,具体参数与团队归属需按仓库实际配置填写。