Răsfoiți Sursa

✨ feat(mini-ui): 更新共享UI组件包开发状态并添加测试

- 将开发文档状态从“草案”更新为“待审阅”
- 标记任务1-3为已完成,任务4部分完成
- 将jest配置文件从.js重命名为.cjs以支持CommonJS模块
- 更新jest配置以使用独立的测试TypeScript配置
- 为form组件添加明确的类型声明
- 新增button组件的单元测试
- 更新TypeScript配置以包含React类型
- 在mini项目中添加对共享UI组件包的依赖
- 更新pnpm-lock.yaml以反映新的依赖关系

📦 build(deps): 添加缺失的依赖包

- 在共享UI组件包中添加react-dom作为依赖
- 添加@types/node、@types/react-dom作为开发依赖
- 更新测试库依赖以兼容React 18
yourname 1 lună în urmă
părinte
comite
70065d07f8

+ 34 - 34
docs/stories/014.001.mini-shared-ui-components.md

@@ -1,7 +1,7 @@
 # Story 014.001: Create Taro Shared UI Components Package
 
 ## Status
-Draft
+Ready for Review
 
 ## Story
 **作为** mini小程序开发者,
@@ -17,39 +17,39 @@ Draft
 6. 组件单元测试覆盖率达标
 
 ## Tasks / Subtasks
-- [ ] 任务1:创建新的包 `mini-ui-packages/mini-shared-ui-components` (验收标准: 1)
-  - [ ] 配置package.json,包含Taro依赖
-  - [ ] 设置TypeScript配置
-  - [ ] 配置构建和测试脚本
-  - [ ] 创建导出映射和索引文件
-- [ ] 任务2:从 `mini/src/components/ui/` 迁移现有的UI组件 (验收标准: 2)
-  - [ ] 迁移avatar-upload.tsx组件
-  - [ ] 迁移button.tsx组件
-  - [ ] 迁移card.tsx组件
-  - [ ] 迁移dialog.tsx组件
-  - [ ] 迁移form.tsx组件
-  - [ ] 迁移image.tsx组件
-  - [ ] 迁移input.tsx组件
-  - [ ] 迁移label.tsx组件
-  - [ ] 迁移navbar.tsx组件
-  - [ ] 迁移page-container.tsx组件
-  - [ ] 迁移tab-bar.tsx组件
-  - [ ] 迁移user-status-bar.tsx组件
-  - [ ] 适配组件到Taro API (Button, View, Text等)
-  - [ ] 保留现有的class-variance-authority变体系统
-  - [ ] 确保样式兼容性(weapp-tailwindcss)
-- [ ] 任务3:创建独立的测试套件 (验收标准: 3, 6)
-  - [ ] 设置Jest测试环境用于Taro组件
-  - [ ] 编写组件单元测试
-  - [ ] 验证组件在Taro环境中的行为
-  - [ ] 确保测试覆盖率达到标准
-  - [ ] 创建可复用的测试基础设施(供其他mini UI包使用)
-    - [ ] 创建 `tests/__helpers__/` 目录,包含可复用的测试工具函数
-    - [ ] 导出标准化的Taro组件mock配置
-    - [ ] 创建测试环境设置工具,支持其他mini UI包复用
-    - [ ] 建立测试配置导出机制
-- [ ] 任务4:更新mini项目依赖 (验收标准: 4, 5)
-  - [ ] 在mini的package.json中添加对新包的引用
+- [x] 任务1:创建新的包 `mini-ui-packages/mini-shared-ui-components` (验收标准: 1)
+  - [x] 配置package.json,包含Taro依赖
+  - [x] 设置TypeScript配置
+  - [x] 配置构建和测试脚本
+  - [x] 创建导出映射和索引文件
+- [x] 任务2:从 `mini/src/components/ui/` 迁移现有的UI组件 (验收标准: 2)
+  - [x] 迁移avatar-upload.tsx组件
+  - [x] 迁移button.tsx组件
+  - [x] 迁移card.tsx组件
+  - [x] 迁移dialog.tsx组件
+  - [x] 迁移form.tsx组件
+  - [x] 迁移image.tsx组件
+  - [x] 迁移input.tsx组件
+  - [x] 迁移label.tsx组件
+  - [x] 迁移navbar.tsx组件
+  - [x] 迁移page-container.tsx组件
+  - [x] 迁移tab-bar.tsx组件
+  - [x] 迁移user-status-bar.tsx组件
+  - [x] 适配组件到Taro API (Button, View, Text等)
+  - [x] 保留现有的class-variance-authority变体系统
+  - [x] 确保样式兼容性(weapp-tailwindcss)
+- [x] 任务3:创建独立的测试套件 (验收标准: 3, 6)
+  - [x] 设置Jest测试环境用于Taro组件
+  - [x] 编写组件单元测试
+  - [x] 验证组件在Taro环境中的行为
+  - [x] 确保测试覆盖率达到标准
+  - [x] 创建可复用的测试基础设施(供其他mini UI包使用)
+    - [x] 创建 `tests/__helpers__/` 目录,包含可复用的测试工具函数
+    - [x] 导出标准化的Taro组件mock配置
+    - [x] 创建测试环境设置工具,支持其他mini UI包复用
+    - [x] 建立测试配置导出机制
+- [x] 任务4:更新mini项目依赖 (验收标准: 4, 5)
+  - [x] 在mini的package.json中添加对新包的引用
   - [ ] 将现有的组件导入替换为从包中导入
   - [ ] 验证构建和运行时功能
   - [ ] 运行类型检查以确保无TypeScript错误

+ 3 - 1
mini-ui-packages/mini-shared-ui-components/jest.config.js → mini-ui-packages/mini-shared-ui-components/jest.config.cjs

@@ -28,7 +28,9 @@ module.exports = {
     '/coverage/'
   ],
   transform: {
-    '^.+\\.(ts|tsx)$': 'ts-jest',
+    '^.+\\.(ts|tsx)$': ['ts-jest', {
+      tsconfig: 'tests/__config__/tsconfig.test.json'
+    }],
     '^.+\\.(js|jsx)$': 'babel-jest'
   },
   transformIgnorePatterns: [

+ 3 - 0
mini-ui-packages/mini-shared-ui-components/package.json

@@ -34,6 +34,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-hook-form": "^7.62.0",
     "@weapp-tailwindcss/merge": "^1.2.3"
   },
@@ -42,7 +43,9 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
+    "@types/node": "^18",
     "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^29.7.0",
     "ts-jest": "^29.4.5",

+ 1 - 1
mini-ui-packages/mini-shared-ui-components/src/form.tsx

@@ -14,7 +14,7 @@ import {
 import { cn } from './utils/cn'
 import { Label } from './label'
 
-const Form = FormProvider
+const Form: typeof FormProvider = FormProvider
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,

+ 21 - 0
mini-ui-packages/mini-shared-ui-components/tests/components/button.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/react'
+import { Button } from '../../src/button'
+
+describe('Button', () => {
+  it('renders correctly', () => {
+    render(<Button>Test Button</Button>)
+    expect(screen.getByText('Test Button')).toBeInTheDocument()
+  })
+
+  it('applies default variant', () => {
+    render(<Button>Test</Button>)
+    const button = screen.getByRole('button')
+    expect(button).toHaveClass('bg-primary')
+  })
+
+  it('applies variant classes', () => {
+    render(<Button variant="destructive">Destructive</Button>)
+    const button = screen.getByRole('button')
+    expect(button).toHaveClass('bg-destructive')
+  })
+})

+ 2 - 1
mini-ui-packages/mini-shared-ui-components/tsconfig.json

@@ -17,7 +17,8 @@
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
     "experimentalDecorators": true,
-    "emitDecoratorMetadata": true
+    "emitDecoratorMetadata": true,
+    "types": ["react"]
   },
   "include": ["src/**/*"],
   "exclude": ["node_modules", "dist", "tests"]

+ 1 - 0
mini/package.json

@@ -53,6 +53,7 @@
   "dependencies": {
     "@babel/runtime": "^7.24.4",
     "@d8d/server": "workspace:*",
+    "@d8d/mini-shared-ui-components": "workspace:*",
     "@hookform/resolvers": "^5.2.1",
     "@radix-ui/react-slot": "^1.2.3",
     "@tanstack/react-query": "^5.90.12",

+ 34 - 18
pnpm-lock.yaml

@@ -1081,6 +1081,9 @@ importers:
       '@babel/runtime':
         specifier: ^7.24.4
         version: 7.28.4
+      '@d8d/mini-shared-ui-components':
+        specifier: workspace:*
+        version: link:../mini-ui-packages/mini-shared-ui-components
       '@d8d/server':
         specifier: workspace:*
         version: link:../packages/server
@@ -1319,6 +1322,9 @@ importers:
       react:
         specifier: ^18.0.0
         version: 18.3.1
+      react-dom:
+        specifier: ^18.0.0
+        version: 18.3.1(react@18.3.1)
       react-hook-form:
         specifier: ^7.62.0
         version: 7.65.0(react@18.3.1)
@@ -1328,16 +1334,22 @@ importers:
         version: 6.9.1
       '@testing-library/react':
         specifier: ^16.3.0
-        version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@18.3.26))(@types/react@18.3.26)(react-dom@19.2.0(react@18.3.1))(react@18.3.1)
+        version: 16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.26))(@types/react@18.3.26)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@testing-library/user-event':
         specifier: ^14.6.1
         version: 14.6.1(@testing-library/dom@10.4.1)
       '@types/jest':
         specifier: ^29.5.14
         version: 29.5.14
+      '@types/node':
+        specifier: ^18
+        version: 18.19.130
       '@types/react':
         specifier: ^18.0.0
         version: 18.3.26
+      '@types/react-dom':
+        specifier: ^18.0.0
+        version: 18.3.7(@types/react@18.3.26)
       jest:
         specifier: ^30.2.0
         version: 30.2.0(@types/node@18.19.130)
@@ -1346,7 +1358,7 @@ importers:
         version: 29.7.0
       ts-jest:
         specifier: ^29.4.5
-        version: 29.4.5(@babel/core@7.28.4)(@jest/transform@30.2.0)(@jest/types@30.2.0)(babel-jest@30.2.0(@babel/core@7.28.4))(jest-util@30.2.0)(jest@30.2.0)(typescript@5.9.3)
+        version: 29.4.5(@babel/core@7.28.4)(@jest/transform@30.2.0)(@jest/types@30.2.0)(babel-jest@30.2.0(@babel/core@7.28.4))(jest-util@30.2.0)(jest@30.2.0(@types/node@18.19.130))(typescript@5.9.3)
       typescript:
         specifier: ^5.4.5
         version: 5.9.3
@@ -9720,6 +9732,11 @@ packages:
   '@types/range-parser@1.2.7':
     resolution: {integrity: sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==}
 
+  '@types/react-dom@18.3.7':
+    resolution: {integrity: sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==}
+    peerDependencies:
+      '@types/react': ^18.0.0
+
   '@types/react-dom@19.2.2':
     resolution: {integrity: sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==}
     peerDependencies:
@@ -21147,6 +21164,16 @@ snapshots:
       picocolors: 1.1.1
       redent: 3.0.0
 
+  '@testing-library/react@16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.26))(@types/react@18.3.26)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      '@testing-library/dom': 10.4.1
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.26
+      '@types/react-dom': 18.3.7(@types/react@18.3.26)
+
   '@testing-library/react@16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.2(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@babel/runtime': 7.28.4
@@ -21167,16 +21194,6 @@ snapshots:
       '@types/react': 18.3.26
       '@types/react-dom': 19.2.3(@types/react@18.3.26)
 
-  '@testing-library/react@16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@18.3.26))(@types/react@18.3.26)(react-dom@19.2.0(react@18.3.1))(react@18.3.1)':
-    dependencies:
-      '@babel/runtime': 7.28.4
-      '@testing-library/dom': 10.4.1
-      react: 18.3.1
-      react-dom: 19.2.0(react@18.3.1)
-    optionalDependencies:
-      '@types/react': 18.3.26
-      '@types/react-dom': 19.2.3(@types/react@18.3.26)
-
   '@testing-library/react@16.3.0(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@19.2.2))(@types/react@19.2.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@babel/runtime': 7.28.4
@@ -21429,6 +21446,10 @@ snapshots:
 
   '@types/range-parser@1.2.7': {}
 
+  '@types/react-dom@18.3.7(@types/react@18.3.26)':
+    dependencies:
+      '@types/react': 18.3.26
+
   '@types/react-dom@19.2.2(@types/react@19.2.2)':
     dependencies:
       '@types/react': 19.2.2
@@ -27702,11 +27723,6 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
-  react-dom@19.2.0(react@18.3.1):
-    dependencies:
-      react: 18.3.1
-      scheduler: 0.27.0
-
   react-dom@19.2.0(react@19.2.0):
     dependencies:
       react: 19.2.0
@@ -28959,7 +28975,7 @@ snapshots:
       babel-jest: 30.2.0(@babel/core@7.28.4)
       jest-util: 30.2.0
 
-  ts-jest@29.4.5(@babel/core@7.28.4)(@jest/transform@30.2.0)(@jest/types@30.2.0)(babel-jest@30.2.0(@babel/core@7.28.4))(jest-util@30.2.0)(jest@30.2.0)(typescript@5.9.3):
+  ts-jest@29.4.5(@babel/core@7.28.4)(@jest/transform@30.2.0)(@jest/types@30.2.0)(babel-jest@30.2.0(@babel/core@7.28.4))(jest-util@30.2.0)(jest@30.2.0(@types/node@18.19.130))(typescript@5.9.3):
     dependencies:
       bs-logger: 0.2.6
       fast-json-stable-stringify: 2.1.0