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