Design Tokens 與 Style Dictionary

• 設計 token 皆放於 tokens/ 目錄，格式為 JSON。
• 使用 Style Dictionary 統一管理與輸出。
• 相關說明請見 docs/tokens.md。

docs/

• 放置設計 token、Style Dictionary、元件開發等相關說明文件。

產生 Tailwind 設定

npx style-dictionary build --platform tailwind

產生於 build/tailwind/tailwind-tokens.js，可用於自動化 Tailwind 設定。

Storybook & Ladle

• Ladle：主要元件開發、互動測試環境，啟動：

  pnpm ladle

• Storybook：專注於元件文件（docs），啟動：

  pnpm storybook:docs

@oosa-life/ui-kit

概述

本專案是一個 React UI 元件庫，使用 TypeScript 開發，並透過 Changesets 管理版本與自動化 npm publish 流程。

安裝

pnpm add @oosa-life/ui-kit

使用方式

本專案發佈到 npm 的內容為 dist 目錄下的檔案，包含：

• dist/index.js：CommonJS 格式
• dist/index.esm.js：ESM 格式
• dist/index.d.ts：TypeScript 型別定義
• docs/：說明文件目錄

範例

import { Button } from '@oosa-life/ui-kit';

function App() {
  return <Button label="Click me" />;
}

開發

安裝依賴

pnpm install

開發伺服器

pnpm run ladle

測試

pnpm run test

發佈

本專案使用 Changesets 管理版本與自動化 npm publish 流程，詳情請參考 Changeset Workflow。

注意事項

• 實際發佈到 npm 的內容為 dist 目錄下的檔案，請確保 dist 目錄已正確建置。
• 如需自動產生 changelog 或有多 package monorepo 需求，可再調整設定。

其他

• 所有元件皆為 tree-shakable，支援 ESM/CJS。
• 若需更多元件與 props，請參考 Storybook 文件。