|
|
@@ -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*
|