Create reusable UI component library

オープン
#42 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

まだ誰も着手していません。

評価

難易度
5/5
見積もり時間
1週間以上
初心者へのやさしさ
20/100
issue の種類
機能追加
明瞭さ
明確に書かれている
活発さ
停滞
技術スタック
typescript
領域
frontend

調査の方向性

Start by reviewing the existing components/ui/ directory and PR block52/poker-vm#1678, since the listed components and exports are marked done there. The remaining scope named by the issue is Storybook or component documentation and migrating existing components, both explicitly deferred to future work.

索引モデルが issue の本文から書いたものです。

説明

architecture enhancement tech debt ux

Priority: MEDIUM

Problem

No true component library exists. Common UI patterns are implemented repeatedly without extraction.

Solution

Create components/ui/ directory with reusable primitives.

Progress (PR block52/poker-vm#1678)

Created Components
Component Status Description
Button Done 5 variants, 4 sizes, loading, icons
Input Done Label, error, helper text, icons
Select Done Options array, placeholder, error
Card Done 4 variants, header/footer
Panel Done Title, subtitle, header actions
Divider Done solid/gradient/dashed, text support
Alert Done 4 variants, icons, dismissible
Spinner Done 5 sizes, 3 variants
LoadingOverlay Done Full-page loading state
Directory Structure
components/ui/
├── Button.tsx
├── Input.tsx
├── Select.tsx
├── Card.tsx
├── Divider.tsx
├── Alert.tsx
├── Spinner.tsx
└── index.ts

Acceptance Criteria

  • Create components/ui/ directory structure
  • Extract Button component with variants
  • Extract Form input components (Input, Select)
  • Extract Spinner/Loading components
  • Create Card/Panel container components
  • Create Alert feedback component
  • Create Divider component
  • Export from index.ts for clean imports
  • Add Storybook or documentation for components (future)
  • Migrate existing components to use UI library (future PRs)

Related

  • Parent issue: block52/ui#45
  • PR: block52/poker-vm#1678
主要言語
TypeScript
スター
2
フォーク
5
平均マージ
22時間 35分
マージ済み PR(30日)
91

環境構築

このプロジェクトの環境構築ファイルはまだ確認していません。まず README を読み、一般的な手順ははじめてのコントリビューションガイドを参照してください。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

block52/ui のほかの issue

block52/ui の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。