貢獻指南

設計原則 · Design Principles

• ✦Zero runtime dependencies — 所有元件只依賴 React。No external runtime deps — components rely on React only.
• ✦Taiwan-first — 解決台灣開發者日常遇到的在地化問題（民國紀年、統編、健保、車牌…）。Solve real problems Taiwan developers face.
• ✦Dark-first, CSS variable theming — 使用 var(--background) 等變數，支援明暗模式。
• ✦TypeScript-first — Export both the component and its types.
• ✦"use client" only when needed — Prefer server components where possible.

新增元件 · Adding a Component

1. 先在 /submit 提案，確認方向後再動工。Propose via /submit first to align on direction.
2. 在 components/taiwan/<ComponentName>/index.tsx 建立元件。
3. 在 lib/registry.ts 新增 metadata（slug、props 等）。
4. 在 lib/code-examples/<slug>.ts 提供三段範例（basic / fullProps / formIntegration）。
5. 在 app/components/[slug]/ComponentDemo.tsx 加入互動展示變體。
6. 執行 npm run build，確保無型別錯誤。
7. 開 PR，附上螢幕截圖與測試資料。

程式碼風格 · Code Style

"use client";

import { useState } from "react";

export interface MyComponentProps {
  value: string;
  onChange: (v: string) => void;
  disabled?: boolean;
}

export default function MyComponent({
  value,
  onChange,
  disabled = false,
}: MyComponentProps) {
  return (
    <input
      value={value}
      onChange={(e) => onChange(e.target.value)}
      disabled={disabled}
      className="w-full px-3 py-2 rounded-lg border border-[var(--input-border)] bg-[var(--input-bg)]"
    />
  );
}

回報問題 · Reporting Issues

發現 bug 或有新元件想法？前往 /submit 提交，或直接在 GitHub 開 issue。