Jelajahi Sumber

docs(story-014.001): 新增故事014.001 - 创建Taro共享UI组件包

- 创建故事014.001详细文档
- 包含创建mini-shared-ui-components包的详细任务
- 支持史诗014的实现
- 遵循项目故事模板标准

🤖 Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
yourname 1 bulan lalu
induk
melakukan
41b7b28474
1 mengubah file dengan 133 tambahan dan 0 penghapusan
  1. 133 0
      docs/stories/014.001.mini-shared-ui-components.md

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

@@ -0,0 +1,133 @@
+# Story 014.001: Create Taro Shared UI Components Package
+
+## Status
+Draft
+
+## Story
+**As a** mini app developer,
+**I want** to migrate the existing UI components from the mini project to a dedicated shared UI package,
+**so that** the components can be reused, independently tested, and maintained more easily.
+
+## Acceptance Criteria
+1. `mini-shared-ui-components`包创建成功,可通过workspace引用
+2. 所有12个UI组件成功迁移,功能正常
+3. 包可以独立构建和测试
+4. mini项目构建成功,无类型错误
+5. 现有页面功能正常,无视觉或功能回归
+6. 组件单元测试覆盖率达标
+
+## Tasks / Subtasks
+- [ ] Task 1: Create new package `mini-ui-packages/mini-shared-ui-components` (AC: 1)
+  - [ ] Configure package.json with Taro dependencies
+  - [ ] Set up TypeScript configuration
+  - [ ] Configure build and test scripts
+  - [ ] Create exports mapping and index file
+- [ ] Task 2: Migrate existing UI components from `mini/src/components/ui/` (AC: 2)
+  - [ ] Migrate avatar-upload.tsx component
+  - [ ] Migrate button.tsx component
+  - [ ] Migrate card.tsx component
+  - [ ] Migrate dialog.tsx component
+  - [ ] Migrate form.tsx component
+  - [ ] Migrate image.tsx component
+  - [ ] Migrate input.tsx component
+  - [ ] Migrate label.tsx component
+  - [ ] Migrate navbar.tsx component
+  - [ ] Migrate page-container.tsx component
+  - [ ] Migrate tab-bar.tsx component
+  - [ ] Migrate user-status-bar.tsx component
+  - [ ] Adapt components to Taro API (Button, View, Text, etc.)
+  - [ ] Preserve existing class-variance-authority variant system
+  - [ ] Ensure style compatibility with weapp-tailwindcss
+- [ ] Task 3: Create independent test suite (AC: 3, 6)
+  - [ ] Set up Jest test environment for Taro components
+  - [ ] Write component unit tests
+  - [ ] Verify component behavior in Taro environment
+  - [ ] Ensure test coverage meets standards
+- [ ] Task 4: Update mini project dependencies (AC: 4, 5)
+  - [ ] Add reference to new package in mini's package.json
+  - [ ] Replace existing component imports with package imports
+  - [ ] Verify build and runtime functionality
+  - [ ] Run type check to ensure no TypeScript errors
+
+## Dev Notes
+
+### Previous Story Insights
+No previous stories in Epic 014.
+
+### Data Models
+No specific data models required for UI component package. [Source: architecture/data-model-schema-changes.md#现有数据模型状态]
+
+### API Specifications
+No API endpoints required for UI component package. [Source: architecture/api-design-integration.md#api集成策略]
+
+### Component Specifications
+- **Existing UI Components**: 12 custom UI components located in `mini/src/components/ui/` [Source: architecture/source-tree.md#实际项目结构]
+- **Component Types**: avatar-upload, button, card, dialog, form, image, input, label, navbar, page-container, tab-bar, user-status-bar
+- **Taro Framework**: Components must adapt to Taro component API (Button, View, Text, etc.) [Source: architecture/tech-stack.md#现有技术栈维护]
+- **Styling**: Use Tailwind CSS with weapp-tailwindcss adaptation for mini programs [Source: architecture/tech-stack.md#现有技术栈维护]
+- **Variant System**: Preserve existing class-variance-authority variant system for component styling
+
+### File Locations
+- **Source Components**: `mini/src/components/ui/` [Source: architecture/source-tree.md#实际项目结构]
+- **New Package Location**: `mini-ui-packages/mini-shared-ui-components/` (new directory at project root)
+- **Package Structure**:
+  - `mini-ui-packages/mini-shared-ui-components/package.json`
+  - `mini-ui-packages/mini-shared-ui-components/tsconfig.json`
+  - `mini-ui-packages/mini-shared-ui-components/src/` (component source)
+  - `mini-ui-packages/mini-shared-ui-components/tests/` (test files)
+- **Project Structure**: Monorepo with pnpm workspace [Source: architecture/source-tree.md#集成指南]
+
+### Testing Requirements
+- **Test Framework**: Jest (mini project uses Jest) [Source: architecture/coding-standards.md#现有标准合规性]
+- **Test Location**: `tests/` folder parallel to source code [Source: architecture/coding-standards.md#增强特定标准]
+- **Coverage Target**: Core business logic > 80% [Source: architecture/coding-standards.md#增强特定标准]
+- **Test Types**: Unit tests for components
+- **UI Package Standards**: Must follow UI package development standards [Source: architecture/coding-standards.md#ui包开发提示]
+
+### Technical Constraints
+- **Taro Version**: 4.1.4
+- **React Version**: 18 (mini project) vs React 19 in other projects [Source: architecture/tech-stack.md#现有技术栈维护]
+- **Package Management**: pnpm workspace [Source: architecture/source-tree.md#集成指南]
+- **TypeScript**: Strict mode enabled [Source: architecture/coding-standards.md#现有标准合规性]
+- **Build System**: Workspace package references, no separate build step required
+
+### Project Structure Notes
+- Current project uses monorepo structure with `packages/` directory for shared packages [Source: architecture/source-tree.md#实际项目结构]
+- Epic specifies creating `mini-ui-packages/` directory for organizing all mini-related UI packages
+- This aligns with the modular architecture pattern established in the project
+- Need to ensure the new directory follows existing workspace configuration patterns
+
+## Testing
+
+### Testing Standards
+- **Test File Location**: `tests/` folder parallel to source code [Source: architecture/coding-standards.md#增强特定标准]
+- **Test Standards**: Follow existing testing patterns in mini project (Jest)
+- **Testing Frameworks**: Jest for mini project components [Source: architecture/coding-standards.md#现有标准合规性]
+- **Specific Requirements**:
+  - Component unit tests for all migrated UI components
+  - Test coverage reporting
+  - Integration with existing mini project test suite
+  - Follow UI package testing standards [Source: architecture/ui-package-standards.md#测试规范]
+
+## Change Log
+| Date | Version | Description | Author |
+|------|---------|-------------|--------|
+| 2025-12-19 | 1.0 | Initial story creation | Scrum Master Bob |
+
+## Dev Agent Record
+*This section is populated by the development agent during implementation*
+
+### Agent Model Used
+{{agent_model_name_version}}
+
+### Debug Log References
+*Reference any debug logs or traces generated during development*
+
+### Completion Notes List
+*Notes about the completion of tasks and any issues encountered*
+
+### File List
+*List all files created, modified, or affected during story implementation*
+
+## QA Results
+*Results from QA Agent QA review of the completed story implementation*