Build Reusable Component Library

[FerdinandSu]

Description / 描述

English:
Create a reusable component library for WebLedger that can be used across different frontend implementations. This will help maintain consistency and reduce code duplication.

Components to create:

• EntryCard - Display entry information
• EntryForm - Create/edit entry form
• CategorySelector - Category dropdown/select
• TypeSelector - Type dropdown/select
• DateRangePicker - Date range selection
• AmountInput - Currency input with formatting
• EntryList - List with pagination and filtering
• StatCard - Statistics display card

Tech Stack:

• React or Vue 3 with TypeScript
• Vite for development and build
• Yarn PnP or pnpm
• Storybook for component documentation
• Vitest for unit testing
• CSS Modules or Tailwind for styling

中文:
为 WebLedger 创建一个可重用的组件库，可在不同的前端实现中使用。这将有助于保持一致性并减少代码重复。

Difficulty / 难度

Hard / 困难

Estimated Time / 预计时间

16-20 hours

⚠️ Important Requirements / 重要要求

• Use Vite + TypeScript
• Use yarn PnP or pnpm
• PR MUST include screenshots from Storybook

Acceptance Criteria / 验收标准

• All components written in TypeScript
• Use Vite + (yarn PnP or pnpm)
• Each component has Storybook stories
• Each component has unit tests (>80% coverage)
• Components are fully typed with proper interfaces
• Comprehensive documentation
• PR MUST include screenshots from Storybook
• Published as npm package (optional)

---

Before starting, please comment on this issue to let us know you're working on it!
开始前请在此 issue 下评论，让我们知道你正在处理它！

See CONTRIBUTING.md for contribution guidelines.