開発者向けガイド

CodeConnect Design Systemは、モダンで一貫性のあるUIを素早く構築するためのコンポーネントライブラリです。このガイドでは、デザインシステムを使い始めるための基本的な情報を提供します。

クイックスタート

1. インストール

プロジェクトにデザインシステムをインストールします:

# pnpm
pnpm add @codeconnect-llc/design-system

# npm
npm install @codeconnect-llc/design-system

# yarn
yarn add @codeconnect-llc/design-system

2. スタイルのインポート

アプリケーションのルートファイル（app/root.tsx や _app.tsx）でスタイルをインポート:

import '@codeconnect-llc/design-system/styles'

3. Tailwind CSS 4 の設定

メインCSSファイル（app.css など）で @import と @theme を使ってカスタマイズ:

@import "tailwindcss";
@import "@codeconnect-llc/design-system/styles";

@theme {
  /* デザインシステムのトークンを上書き可能 */
  --color-brand-base: #1c71b9;
  --color-brand-hover: #155a94;
}

注意: Tailwind CSS 4では tailwind.config.ts ではなく、CSSファイル内で @theme ディレクティブを使って設定します。

4. 最初のコンポーネントを使う

主な機能

技術スタック

CodeConnect Design Systemは以下の技術で構築されています:

• React 19 - 最新のReactエコシステム
• TypeScript - 型安全な開発
• Tailwind CSS 4 - CSS変数ベースのスタイリング
• Radix UI - アクセシブルなHeadless UIプリミティブ
• class-variance-authority - バリアント管理
• style-dictionary - デザイントークン管理
• Storybook 8 - コンポーネントドキュメント

コンポーネントカテゴリ

レイアウト

基本的なレイアウトプリミティブ:

• Box - 基本的なボックスコンテナ
• Stack - 垂直・水平スタック

アクション

ユーザーアクションを促すコンポーネント:

• Button - クリック可能なボタン

フォーム

フォーム入力コンポーネント:

• Input - テキスト入力
• Textarea - 複数行テキスト入力
• Select - ドロップダウン選択
• Checkbox - チェックボックス
• RadioGroup - ラジオボタン
• Switch - トグルスイッチ
• FormControl - フォームフィールドラッパー

表示

コンテンツ表示コンポーネント:

• Card - コンテンツカード
• Typography - テキストスタイル
• Badge - ステータスバッジ
• Divider - セクション区切り

フィードバック

フィードバックと通知:

• Alert - アラートメッセージ
• Toast - 一時的な通知
• Tooltip - 補足情報

オーバーレイ

オーバーレイコンポーネント:

• Dialog - モーダルダイアログ