mini-starter/docs/stories/014.001.mini-shared-ui-components.md

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