docyrus-app-ui-design

Docyrus アプリの UI デザイン

shadcn、diceui、animate-ui、docyrus-ui、reui の各ライブラリから厳選した159個のビルド済みコンポーネントを使って、Docyrus の React アプリケーション向けに洗練されたアクセシブルな UI コンポーネントを構築します。

コンポーネントライブラリの優先順位

主要なコンポーネントライブラリ（優先順）：

1. shadcn — 43個のコアコンポーネント（ボタン、フォーム、ダイアログ、テーブル、チャート）
2. diceui — 41個の高度なコンポーネント（データグリッド、カンバン、ファイルアップロード、カラーピッカー）
3. animate-ui — 21個のアニメーション付きコンポーネント（サイドバー、ダイアログ、カード、メニュー）
4. docyrus — 51個の Docyrus 固有コンポーネント（AwesomeDialog、AwesomeStats、データグリッド、ピボットグリッド、フォームフィールド、値レンダラー、編集可能なレコード詳細、ガント、スケジューリング、チャット、AI エージェント、料金設定、共有、メール作成、ログアクティビティフォーム、スキーマリピーター、ステッパー）
5. reui — 2個のユーティリティコンポーネント（ファイルアップロード、並べ替え）

利用可能なコンポーネントの合計：158個

重要なデザインルール

1. まず優先コンポーネントを必ず確認する — 新しいコンポーネントを実装する前に、優先コンポーネントのリファレンスを検索して、既存の該当コンポーネントがないか確認します。
2. ダッシュボードには AwesomeCard を使用する — ユーザーが別のカードデザインを明示的に指定しない限り、ダッシュボードの統計カードとメトリクスには @docyrus/ui-awesome-card を使用します。
3. レイアウトには animate-ui Sidebar を使用する — ユーザーが別のレイアウトを指定しない限り、アプリのナビゲーションには @animate-ui/sidebar を使用します。
4. チャートには Recharts を優先する — あらゆるデータ可視化のニーズに対し、Recharts を第一候補として使用します。shadcn の Chart コンポーネントは Recharts を基盤にしています。
5. アイコンライブラリの優先順位：
   • 第一候補：hugeicons
   • 第二候補：fontawesome light
   • 第三候補：lucide-icons
6. アイテム作成フォームには AwesomeDialog を使用する — すべてのアイテム作成・編集フォームに AwesomeDialog システムを使用します。フォームの複雑さに応じてコンテナタイプを選択します。
   • 小規模／シンプルなフォーム → container="sheet" と side="right"
   • 長い／複雑なフォーム → container="modal" または container="drawer"
7. アイテム詳細ページの方針 — アイテムの複雑さに応じて適切なコンテナを選択します。
   • 大きなアイテム（例：プロジェクト、ワークスペース）→ 全体のレイアウトを備えた専用の新しいページを作成します
   • 小さなアイテム（例：タスク、コメント、連絡先）→ 右側のドロワーとして、container="sheet" と side="right" を指定した AwesomeDialog を使用します
8. TanStack Form + Docyrus フォームシステムを必ず使用する — すべてのフォームで、Docyrus の DynamicFormField システムと @docyrus/ui-form-fields を使用した TanStack Form を使用する必要があります。プレーンな HTML フォームや React Hook Form を直接使用してはいけません。
9. インライン編集には EditableRecordDetail を使用する — アイテムの詳細ビューを表示する際は、EditableRecordDetail と EditableRecordDetailField を使用して、ユーザーがフォーム全体を開かずにフィールドをインラインで編集できるようにします。変更されたフィールドを強調表示し、Save／Cancel を備えたフローティング ActionBar を表示するため、必ず trackChanges を有効にしてください。詳細ページのヘッダーには 「Edit All」 ボタンを追加し、フォーム全体を使った編集に切り替えられるようにします。
10. 編集可能なコンポーネントでは必ず trackChanges を有効にする — EditableRecordDetail またはセル編集機能付きの DataGrid を使用する際は、必ず trackChanges プロパティを渡します。これにより、変更されたセル／フィールドを強調表示し、保留中の変更数を表示して、フローティング ActionBar から Save／Cancel を実行できるようになります。

クイックスタートのパターン

AwesomeDialog を使ったアイテム作成フォーム（小規模なフォーム → シート）

import {
  AwesomeDialog, AwesomeDialogHeader, AwesomeDialogBody, AwesomeDialogFooter
} from '@docyrus/ui/components/awesome-dialog'

<AwesomeDialog open={open} onOpenChange={setOpen} container="sheet" side="right" size="default">
  <AwesomeDialogHeader title="Create Task" icon="far-plus" />
  <AwesomeDialogBody>
    <form.Field name="title">{(field) => <TextFormField field={field} label="Title" />}</form.Field>
    <form.Field name="status">{(field) => <SelectFormField field={field} label="Status" />}</form.Field>
  </AwesomeDialogBody>
  <AwesomeDialogFooter>
    <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
    <Button onClick={handleSubmit}>Create</Button>
  </AwesomeDialogFooter>
</AwesomeDialog>

AwesomeDialog を使ったアイテム作成フォーム（長いフォーム → モーダル）

<AwesomeDialog open={open} onOpenChange={setOpen} container="modal" size="lg" fullscreenable>
  <AwesomeDialogHeader title="Create Project" icon="far-folder-plus" />
  <AwesomeDialogBody>
    {/* Long form with many fields — body scrolls, header/footer stay fixed */}
  </AwesomeDialogBody>
  <AwesomeDialogFooter>
    <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
    <Button onClick={handleSubmit}>Create Project</Button>
  </AwesomeDialogFooter>
</AwesomeDialog>

AwesomeDialog でのアイテム詳細表示（小さなアイテム → 右側のドロワー）

<AwesomeDialog open={open} onOpenChange={setOpen} container="sheet" side="right" size="lg" fullscreenable>
  <AwesomeDialogHeader
    title="Task Detail"
    description="Review and edit task fields inline"
    headerButtons={<Button variant="outline" size="sm" onClick={switchToFullForm}>Edit All</Button>}
  />
  <AwesomeDialogBody>
    <EditableRecordDetail fields={fields} record={record} onSave={handleSave} trackChanges>
      <EditableRecordDetailField slug="title" />
      <EditableRecordDetailField slug="status" />
      <EditableRecordDetailField slug="assignee" />
      <EditableRecordDetailField slug="due_date" />
    </EditableRecordDetail>
  </AwesomeDialogBody>
</AwesomeDialog>

EditableRecordDetail を使ったインライン編集

import {
  EditableRecordDetail, EditableRecordDetailField
} from '@docyrus/ui/components/editable-record-detail'

<EditableRecordDetail
  fields={fields}
  record={record}
  onSave={handleSave}
  onCancel={handleCancel}
  trackChanges  // Always enable — highlights changed fields and shows floating ActionBar with Save/Cancel
>
  <div className="space-y-3">
    <EditableRecordDetailField slug="company_name" />
    <EditableRecordDetailField slug="status" />
    <EditableRecordDetailField slug="priority" />
    <EditableRecordDetailField slug="email" />
  </div>
</EditableRecordDetail>
{/* With trackChanges: changed fields get amber highlight, ActionBar shows "N fields changed" with Save/Cancel */}

AwesomeCard を使ったダッシュボード

import { AwesomeCard } from '@/components/ui/awesome-card'
import { HugeIcon } from '@/components/ui/icons'

<AwesomeCard
  title="Total Revenue"
  value="$124,500"
  icon={<HugeIcon name="dollar-circle" />}
  trend={{ value: 12.5, direction: 'up' }}
/>

animate-ui Sidebar を使ったアプリレイアウト

import { Sidebar, SidebarContent, SidebarHeader } from '@/components/ui/sidebar'

<Sidebar>
  <SidebarHeader>
    <AppLogo />
  </SidebarHeader>
  <SidebarContent>
    <NavItems />
  </SidebarContent>
</Sidebar>

diceui を使ったデータテーブル

import { DataTable } from '@/components/ui/data-table'

<DataTable
  columns={columns}
  data={projects}
  enableFiltering
  enableSorting
  enablePagination
/>

shadcn + Recharts を使ったチャート

import { ChartContainer, ChartTooltip } from '@/components/ui/chart'
import { LineChart, Line, XAxis, YAxis } from 'recharts'

<ChartContainer>
  <LineChart data={chartData}>
    <XAxis dataKey="month" />
    <YAxis />
    <ChartTooltip />
    <Line type="monotone" dataKey="revenue" />
  </LineChart>
</ChartContainer>

CreateRecordDialog を使ったクイックレコード作成

import { CreateRecordDialog } from '@docyrus/ui/components/create-record-dialog'

<CreateRecordDialog
  headerIcon={<PlusIcon />}
  headerLabel="New Task"
  headerFields={[
    { key: 'project', label: 'Project', options: projectOptions }
  ]}
  subjectPlaceholder="Task name..."
  descriptionPlaceholder="Add description..."
  footerFields={[
    { key: 'assignee', label: 'Assignee', options: userOptions },
    { key: 'priority', label: 'Priority', options: priorityOptions }
  ]}
  enableCreateMore
  onSubmit={handleSubmit}
  isPending={isPending}
>
  <Button variant="outline" size="sm"><PlusIcon /> New Task</Button>
</CreateRecordDialog>

TeamChatChannel を使ったチームチャット

import { TeamChatChannel } from '@docyrus/ui/components/team-chat-channel'

<TeamChatChannel
  posts={posts}
  currentUser={currentUser}
  users={users}
  channelName="General"
  onCreatePost={handleCreatePost}
  onDeletePost={handleDeletePost}
  onToggleReaction={handleToggleReaction}
  onUploadFile={handleUploadFile}
  onLoadReplies={handleLoadReplies}
  maxHeight={600}
/>

リソーススケジューラー

import { ResourceSchedulerPanel } from '@docyrus/ui/components/resource-scheduler-panel'

<ResourceSchedulerPanel
  resources={resources}
  events={events}
  onEventClick={handleEventClick}
  onEventMove={handleEventMove}
  onSlotClick={handleSlotClick}
  showTodayIndicator
  height={500}
/>

AwesomeStats を使ったダッシュボード統計

import { AwesomeStats } from '@docyrus/ui/components/awesome-stats'

const stats = [
  {
    id: 'revenue',
    title: 'Total Revenue',
    value: 124500,
    format: { style: 'currency', currency: 'USD', notation: 'compact' },
    icon: 'fal chart-line',
    color: 'blue',
    comparison: { previousValue: 110000 },
    miniChart: { type: 'sparkline', data: [80, 95, 110, 105, 120, 125] }
  },
  // ... more stats
]

// Grid layout (dashboard)
<AwesomeStats items={stats} layout="grid" columns={4} />

// Tabs layout (single card with animated transitions)
<AwesomeStats items={stats} layout="tabs" />

// With AwesomeCard styling
<AwesomeStats items={stats} layout="grid" cardVariant="awesome" />

分析用ピボットグリッド

import { usePivotGrid, PivotGridView, PivotGridToolbar } from '@docyrus/ui/components/pivot-grid'

const { pivotState, ...pivotProps } = usePivotGrid({
  data: salesData,
  dimensions: [
    { id: 'region', label: 'Region', getValue: (row) => row.region },
    { id: 'product', label: 'Product', getValue: (row) => row.product },
  ],
  measures: [
    { id: 'revenue', label: 'Revenue', aggregate: 'sum', getValue: (row) => row.revenue, formatValue: (v) => `$${v.toLocaleString()}` },
  ],
})

<PivotGridToolbar {...pivotProps} />
<PivotGridView {...pivotProps} />

アクティビティ記録フォーム（CRM）

import { LogActivityForm } from '@docyrus/ui/components/log-activity-form'

<LogActivityForm
  defaultActivityType="call"
  mentionUsers={users}
  events={calendarEvents}
  statusOptions={statusOptions}
  onSubmit={handleSubmit}
  isSubmitting={isPending}
/>

DocyrusAgent を使用した AI エージェント

import { DocyrusAgent } from '@docyrus/ui/components/docyrus-agent'

<DocyrusAgent
  mode="chat"
  agent={{ name: 'Assistant', description: 'AI helper' }}
  messages={messages}
  chatStatus={status}
  onSendMessage={handleSendMessage}
  onStopGeneration={handleStop}
  allowAttachments
  suggestions={['Summarize this', 'Create a report']}
/>

価格設定エンジン

import { PricingEnginePanel } from '@docyrus/ui/components/pricing-engine-panel'

<PricingEnginePanel
  title="Quote #1234"
  enableVat
  enableLineDiscount
  enableGlobalDiscount
  defaultVatRate={20}
  vatRates={[0, 10, 20]}
  productCatalog={products}
  onSave={handleSave}
  onTotalsChange={handleTotalsChange}
/>

豊富な選択肢から選べる Mega Select

import { MegaSelect } from '@docyrus/ui/components/mega-select'

<MegaSelect
  items={templateItems}
  categories={categories}
  columns={3}
  size="large"
  searchable
  onChoose={(id, item) => handleChoose(item)}
/>

コンポーネント選択戦略

ユーザーから UI コンポーネントを求められた場合：

1. リファレンスを検索する — references/preferred-components-catalog.md で、名前、カテゴリ、機能から既存のコンポーネントを確認します
2. ユースケースに合わせる — 複数の選択肢がある場合は、次を優先します：
   • 基本的／一般的なコンポーネントには shadcn
   • 高度／専門的なコンポーネントには diceui
   • アニメーション／トランジションが必要なコンポーネントには animate-ui
   • Docyrus 固有のデータ処理には docyrus
3. コンポーネントをインストールする — カタログに記載されているレジストリのインストールコマンドを使用します
4. ドキュメントを参照する — 詳細な使い方について、コンポーネントのドキュメントファイルを案内します

インストールパターン

コンポーネントは shadcn レジストリパターンに従います。Docyrus コンポーネントでは @docyrus/cli を使用します：

# shadcn components
pnpm dlx shadcn@latest add button

# diceui components
pnpm dlx shadcn@latest add @diceui/data-table

# animate-ui components
pnpm dlx shadcn@latest add @animate-ui/sidebar

# docyrus components (use @docyrus/cli)
pnpm dlx @docyrus/cli add @docyrus/ui-awesome-card

# reui components
pnpm dlx shadcn@latest add @reui/file-upload-default

一般的なユースケース

ユースケース	推奨コンポーネント	ライブラリ
アイテム作成フォーム	AwesomeDialog（シート／モーダル／ドロワー）	docyrus
レコードのクイック作成	CreateRecordDialog	docyrus
アイテム詳細（小）	AwesomeDialog（右側のシート）	docyrus
アイテム詳細（大）	専用ページ	—
レコードのインライン編集	EditableRecordDetail	docyrus
ダッシュボードカード	AwesomeCard	docyrus
アプリのナビゲーション	Sidebar	animate-ui
データテーブル	DataTable	diceui
編集可能なグリッド	Data Grid	docyrus
グリッドの保存済みビュー	DataGridViewSelect	docyrus
フォーム	Form Fields + TanStack Form	docyrus
アイテムの豊富な選択肢	MegaSelect	docyrus
ラジオカード選択	RadioGroup（カードバリアント）	docyrus
ファイルアップロード	File Upload	diceui
グラフ	Chart + Recharts	shadcn
確認ダイアログ	Alert Dialog	animate-ui
日付ピッカー	Date Time Picker	docyrus
カラーピッカー	Color Picker	diceui
カンバンボード	Kanban	docyrus
ガントチャート	Gantt	docyrus
リソースのスケジュール管理	ResourceSchedulerPanel	docyrus
予約受付	TimeSlotScheduler	docyrus
タイムライン	Timeline	diceui
チームチャット	TeamChatChannel	docyrus
メール作成	EmailComposer	docyrus
Markdown 編集	SimpleMarkdownEditor	docyrus
連絡先のアクティビティ	ContactActivityPanel	docyrus
AI エージェントのインターフェース	DocyrusAgent	docyrus
価格設定／見積もり	PricingEnginePanel	docyrus
レコード共有	RecordSharing	docyrus
通知	NotificationStack	docyrus
検索	SearchInput	docyrus
位置情報入力	PlaceAutocomplete	docyrus
地図表示	Map	docyrus
ツリー階層	TreeView	docyrus
ダッシュボード統計	AwesomeStats	docyrus
ピボットテーブル／分析	PivotGrid	docyrus
日付範囲の選択	DateTimeRangePicker	docyrus
アクティビティ記録（CRM）	LogActivityForm	docyrus
動的な繰り返し行	SchemaRepeater	docyrus
マルチステップウィザード	Stepper	docyrus

リファレンス

コンポーネントの詳細については、次のファイルをお読みください：

• references/preferred-components-catalog.md — 説明、インストールコマンド、ドキュメントパスを含む、全 160 コンポーネントの完全なカタログ（docyrus のドキュメントは https://alpha-ui.docy.app/docs/web/components/<name>/llms.txt）
• references/component-selection-guide.md — 各ユースケースに適したコンポーネントを選ぶための決定木とガイドライン
• references/icon-usage-guide.md — hugeicons、fontawesome、lucide のアイコンライブラリ統合パターンと使用例

Docyrus UI ガイドのドキュメント

詳細なガイダンスについては、以下の llms.txt エンドポイントを取得してください。

• コンポーネントの概要 — React、TypeScript、Tailwind CSS v4、CVA バリアントで構築された、本番環境向けの UI コンポーネント
• インストール — プロジェクトへの Docyrus UI コンポーネントのインストール方法とセットアップ方法
• テーマ設定 — CSS 変数とテーマジェネレーターを使った外観のカスタマイズ
• ディストリビューション — Docyrus UI の Web コンポーネントを支えるコンポーネントディストリビューションとコアライブラリ
• 例とレシピ — 一般的な UI シナリオ向けの、実用的な複数コンポーネントのパターンとレシピ
• トラブルシューティング — Docyrus UI の Web コンポーネント使用時によくある問題と解決策
• リリース — Docyrus UI の Web コンポーネントの最新リリースと更新情報

docyrus-app-dev との連携

このスキルは、フルスタックアプリの開発において docyrus-app-dev と連携します。

• docyrus-app-dev はデータ取得、コレクション、クエリ、認証を担当します
• docyrus-app-ui-design はコンポーネントの選択、UI デザイン、レイアウトを担当します

機能を構築する際は、次の手順で進めます。

1. docyrus-app-dev を使ってデータクエリとミューテーションを設定します
2. docyrus-app-ui-design を使って UI コンポーネントを選択し、実装します
3. これらを組み合わせて、完全で洗練された機能を構築します