@vrugd/ui 0.1.1 → 0.1.3

package/README.md

@@ -0,0 +1,249 @@
+# @vrugd/ui
+
+![Version](https://img.shields.io/badge/version-0.1.0-blue.svg?style=flat-square)
+![License](https://img.shields.io/badge/license-MIT-green.svg?style=flat-square)
+![Bun](https://img.shields.io/badge/bun-1.3.x-black.svg?style=flat-square&logo=bun)
+
+> **Apple-ish UIKit for Next.js**
+>
+> Appleの公式サイトに見られるような、**静寂で洗練されたUI**を、Next.js (App Router) で即座に再現するためのデザインシステム兼UIキットです。
+
+---
+
+## ✨ Features
+
+**「Appleっぽさ」を部品化する**
+角丸、影、余白、そしてガラス表現（Blur）――。これらをバラバラに実装するのではなく、統一された「トークン」として管理し、積み上げることで美しいUIを構築します。
+
+* **🍎 Apple-ish Design**
+    * 大きめで統一された角丸 (`--r-*`)
+    * 繊細なレイヤー構造と柔らかい影
+    * 美しいGlass morphism / blur表現
+* **🎨 Design Tokens**
+    * CSS Variables による一元管理 (`--accent`, `--border`, `--shadow`, etc.)
+    * ダークモード対応を見越した設計
+* **⚡️ Next.js Ready**
+    * **App Router** 完全対応
+    * **Server Component** 指向（基本はCSS + React）
+    * Tailwind Utility を前提とした軽量設計
+* **📦 Monorepo Friendly**
+    * Bun + Turborepo 構成
+    * `@vrugd/ui` パッケージとして分離済み
+
+---
+
+## 📂 Repository Structure
+
+```text
+repo-root/
+├── apps/
+│   └── web/                 # Next.js App Router (Demo App)
+└── packages/
+    └── ui/                  # @vrugd/ui (Component Library)
+
+```
+
+---
+
+## 🚀 Quick Start
+
+### Requirements
+
+* **Bun**: `1.3.x`
+* **Node.js**: `18+` (Recommended: `20+`)
+
+### 1. Install & Run
+
+ルートディレクトリで以下を実行してください。
+
+```bash
+# Install dependencies
+bun install
+
+# Start development server (Demo app)
+bunx turbo dev --filter=web
+
+```
+
+起動後、[http://localhost:3000](https://www.google.com/search?q=http://localhost:3000) にアクセスするとデモが表示されます。
+
+---
+
+## 📖 Usage
+
+Next.js (App Router) アプリケーションで `@vrugd/ui` を使用する手順です。
+
+### 1. Install Dependency
+
+ワークスペース内のパッケージとして依存関係に追加します。
+
+**`apps/web/package.json`**
+
+```json
+{
+  "dependencies": {
+    "@vrugd/ui": "workspace:*"
+  }
+}
+
+```
+
+### 2. Import Global Styles
+
+UIキットの基本スタイル（Design Tokens & Base styles）を読み込みます。
+
+**`apps/web/app/globals.css`**
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* @vrugd/ui global styles & tokens */
+@import "../../../packages/ui/src/styles/globals.css";
+
+```
+
+### 3. Tailwind Configuration
+
+UIパッケージ内のクラスをTailwindが検知できるようにパスを通します。
+
+**`apps/web/tailwind.config.ts`**
+
+```ts
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./app/**/*.{ts,tsx}",
+    // UIパッケージ内のコンポーネントをスキャン対象に追加
+    "../../packages/ui/src/**/*.{ts,tsx}"
+  ],
+  // ...
+};
+
+export default config;
+
+```
+
+### 4. Use Components
+
+コンポーネントをインポートして配置します。
+
+**`apps/web/app/page.tsx`**
+
+```tsx
+import * as React from "react";
+import { Button, Card, Hero, Navbar, Section, Text } from "@vrugd/ui";
+
+export default function Page() {
+  return (
+    <main>
+      <Navbar
+        brand={<span className="font-semibold">UIKit</span>}
+        items={[
+          { label: "Overview", href: "#overview" },
+          { label: "Components", href: "#components" }
+        ]}
+        right={
+          <div className="flex items-center gap-2">
+            <Button variant="soft">Docs</Button>
+            <Button>Get started</Button>
+          </div>
+        }
+      />
+
+      <Hero
+        eyebrow="Next.js App Router"
+        title="AppleっぽいUIを “部品化” して積み上げる"
+        description="トークン（色/影/角丸/ガラス）を中心に、一貫したルールで提供します。"
+        actions={
+          <>
+            <Button>Install</Button>
+            <Button variant="ghost">View components</Button>
+          </>
+        }
+      />
+
+      <Section id="overview">
+        <div className="grid gap-4 md:grid-cols-3">
+          <Card tone="elevated" className="p-6">
+            <div className="text-[13px] text-[rgb(var(--muted))]">Design tokens</div>
+            <div className="mt-2 font-semibold">一貫した“Apple感”</div>
+            <Text className="mt-2" tone="muted">
+              角丸・影・ガラス・タイポ・余白をトークン化して統一。
+            </Text>
+          </Card>
+        </div>
+      </Section>
+    </main>
+  );
+}
+
+```
+
+---
+
+## 🎨 Design Tokens
+
+デザインは `packages/ui/src/styles/tokens.css` 内の **CSS Variables** によって制御されています。これらを変更するだけで、全体のルック＆フィールを調整可能です。
+
+```css
+:root {
+  /* Colors (RGB format for opacity manipulation) */
+  --accent: 10 132 255;       /* Blue */
+  --border: 228 228 231;      /* Gray */
+
+  /* Radius */
+  --r-sm: 12px;
+  --r-md: 16px;
+  --r-lg: 22px;
+
+  /* Shadows (Layered shadows) */
+  --shadow-sm: 0 1px 0 rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.06);
+}
+
+```
+
+---
+
+## 🧩 Components
+
+現在提供されている主要コンポーネント：
+
+| Name | Description |
+| --- | --- |
+| **Navbar** | 半透明（Glass）効果を持つナビゲーションバー |
+| **Hero** | 大きな見出しとCTAを持つイントロダクションエリア |
+| **Card** | `elevated`, `outlined`, `soft` などのトーンを持つカード |
+| **Button** | インタラクティブなボタン要素 |
+| **Glass** | 背景ぼかし効果を持つコンテナ |
+| **Text** | タイポグラフィルールを適用したテキストラッパー |
+
+---
+
+## 🛠 Development Notes
+
+**TypeScript Support**
+Next.js が TypeScript を検知した場合、依存関係の追加が必要になることがあります。
+
+```bash
+bun add -d --cwd apps/web @types/node @types/react @types/react-dom
+
+```
+
+---
+
+## 🗺 Roadmap
+
+* [ ] 🌗 **Dark mode toggle / Theme switch**
+* [ ] ✍️ **Typography components** (`H1`, `H2`, `Lead`)
+* [ ] 🎬 **Motion layer** (Framer Motion optional)
+* [ ] 📐 **Layout primitives** (Grid, Stack)
+* [ ] 📦 **Publish-ready build** (`dist/` output + type declarations)
+
+---
+
+## License
+
+MIT (TBD)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vrugd/ui",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",
@@ -15,6 +15,7 @@
     "@types/node": "^25.0.10",
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
+    "npm-check-updates": "^19.3.1",
     "tsup": "^8.5.1",
     "typescript": "^5.5.0"
   },