@fabrica_communications/design-system 0.1.0

package/README.md

@@ -0,0 +1,54 @@
+# Fabrica Design System
+
+Fabricaの共通UIコンポーネントとデザイントークンを提供するリポジトリです。
+
+## 利用対象
+- **デザインシステム担当**: 本リポジトリを更新・配布します。
+- **通常の開発者**: `fabrica-product-starter` を利用し、基本的に本リポジトリは触りません。
+
+## 必要バージョン
+- Node.js v22 以上
+- npm（pnpm / Yarn は使用しません）
+
+## 初期セットアップ
+```bash
+npm install
+npm run dev
+```
+
+## よく使うスクリプト
+- `npm run dev`: Next.js 開発サーバーを起動
+- `npm run build`: 本番ビルドを作成
+- `npm run lint`: Lint チェック
+- `npm run storybook`: Storybook を起動（ポート 6006）
+- `npm run watch:icons`: `public/icons/*.svg` の変更を監視して `icon-definitions.ts` を再生成
+- `npm run generate:icons`: アイコン定義の手動再生成
+
+## 公開と利用（npmjs）
+本体は `npm publish` で公開し、スターター側は `@fabrica_communications/design-system` をインストールします。
+
+## MCPサーバー（ローカル）
+MCPサーバーは `mcp-server/` にあります。ローカルでの起動は以下の通りです。
+
+```bash
+cd mcp-server
+npm install
+npm run build
+npm run mcp
+```
+
+## アイコン運用
+- 新しいSVGアイコンは `public/icons/` に配置してください。
+- 開発中は `npm run watch:icons` を常駐させることで、SVG追加・更新時に `src/components/ui/icon-definitions.ts` が自動更新されます。
+- 自動生成を忘れてコミットしないよう、PR作成前に差分がないか確認してください。
+
+## CSS / デザイントークン運用
+
+### フォント設定
+デフォルトフォントとして **Noto Sans JP** を使用しています。`next/font/google` を使用して最適化されており、`src/styles/globals.css` でフォールバックフォントとして「Hiragino Sans」「Hiragino Kaku Gothic ProN」「Helvetica Neue」を設定しています。
+
+### デザイントークン運用
+- Figmaからエクスポートしたデザイントークンを `tokens/` ディレクトリに配置します。
+- トークン配置後は `node scripts/remove-japanese-tokens.mjs` を実行して余分な日本語ラベルを削除します。
+- CSSビルドのため `npx style-dictionary build` を実行します（出力先: `src/styles/variables.css`）。
+- 最後に `node scripts/postprocess-design-tokens.mjs` を実行し、`variables.css` のrem値を1/10に調整しつつ、`--master-` などのカスタムプレフィックスを通常の `--` に統一します。

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@fabrica_communications/design-system",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint",
+    "generate:icons": "node scripts/generate-icons.mjs",
+    "watch:icons": "node --watch --watch-path=public/icons scripts/generate-icons.mjs",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "imports": {
+    "@/lib/*": "./src/lib/*.ts",
+    "@/components/*": "./src/components/*"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles.css": "./src/styles/globals.css"
+  },
+  "files": [
+    "src",
+    "tokens",
+    "README.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.6.0",
+    "lucide-react": "^0.546.0",
+    "next-themes": "^0.4.6",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.3.1",
+    "tw-animate-css": "^1.4.0"
+  },
+  "peerDependencies": {
+    "next": "^16.1.1",
+    "react": "19.2.0",
+    "react-dom": "19.2.0"
+  },
+  "devDependencies": {
+    "@mdx-js/loader": "^3.1.1",
+    "@next/mdx": "^16.1.1",
+    "@storybook/addon-a11y": "^10.1.11",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-onboarding": "^10.1.11",
+    "@storybook/nextjs-vite": "^10.1.11",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "baseline-browser-mapping": "^2.9.11",
+    "eslint": "^9",
+    "eslint-config-next": "16.0.1",
+    "eslint-plugin-storybook": "^0.12.0",
+    "next": "^16.1.1",
+    "prettier": "^3.8.1",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "shadcn": "^3.5.0",
+    "storybook": "^10.1.11",
+    "style-dictionary": "^5.1.1",
+    "tailwindcss": "^4",
+    "typescript": "^5",
+    "vite": "^7.3.0"
+  }
+}

package/src/app/components/page.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import ComponentsIntro from "../../../content/components/index.mdx";
+import ButtonDoc from "../../../content/components/button.mdx";
+import SwitchDoc from "../../../content/components/switch.mdx";
+
+export default function ComponentsPage() {
+  return (
+    <article className="space-y-10 p-6">
+      <ComponentsIntro />
+      <section>
+        <ButtonDoc />
+      </section>
+      <section>
+        <SwitchDoc />
+      </section>
+    </article>
+  );
+}

package/src/app/foundations/colors/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import Colors from "../../../../content/foundations/colors.mdx";
+
+export default function ColorsPage() {
+  return (
+    <article className="space-y-8 p-6">
+      <Colors />
+    </article>
+  );
+}

package/src/app/foundations/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import Foundations from "../../../content/foundations/index.mdx";
+
+export default function FoundationsPage() {
+  return (
+    <article className="space-y-8 p-6">
+      <Foundations />
+    </article>
+  );
+}

package/src/app/foundations/typography/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import Typography from "../../../../content/foundations/typography.mdx";
+
+export default function TypographyPage() {
+  return (
+    <article className="space-y-8 p-6">
+      <Typography />
+    </article>
+  );
+}

package/src/app/getting-started/page.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import GettingStarted from "../../../content/getting-started/index.mdx";
+
+export default function GettingStartedPage() {
+  return (
+    <article className="space-y-8 p-6">
+      <GettingStarted />
+    </article>
+  );
+}

package/src/app/globals.css

@@ -0,0 +1,3 @@
+/* Next appルートから読み込む入口。正本は src/styles に集約。 */
+@import "../styles/globals.css";
+

package/src/app/layout.tsx

@@ -0,0 +1,61 @@
+import type { Metadata } from 'next'
+import Link from 'next/link'
+import { Noto_Sans_JP } from 'next/font/google'
+import './globals.css'
+
+import { PageHeader } from '@/components/shared/page-header'
+import { PageTopButton } from '@/components/shared/page-top-button'
+import { Toaster } from '../components/ui/sonner'
+
+export const metadata: Metadata = {
+  title: 'サイトタイトル',
+  description: '説明文です。',
+}
+
+const notoSansJP = Noto_Sans_JP({
+  subsets: ['latin'],
+  weight: ['400', '700'],
+  display: 'swap',
+  variable: '--font-sans',
+})
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  const navItems = [
+    { href: '/getting-started', label: 'Getting Started' },
+    { href: '/foundations', label: 'Foundations' },
+    { href: '/components', label: 'Components' },
+  ]
+
+  return (
+    <html lang="ja">
+      <body className={`font-sans ${notoSansJP.variable}`}>
+        <PageHeader />
+        <div className="flex min-h-screen bg-(--usage-background)">
+          <aside className="w-64 shrink-0 border-r border-(--usage-border) bg-white px-4 py-6">
+            <div className="mb-4 text-xs font-semibold uppercase tracking-wide text-(--primitive-neutral-600)">
+              Docs
+            </div>
+            <nav className="space-y-2">
+              {navItems.map((item) => (
+                <Link
+                  key={item.href}
+                  href={item.href}
+                  className="block rounded-md px-2 py-1 text-sm font-medium text-(--body-text) hover:bg-(--usage-background)"
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </nav>
+          </aside>
+          <div className="flex-1">{children}</div>
+        </div>
+        <PageTopButton />
+        <Toaster />
+      </body>
+    </html>
+  )
+}