PackagesUIArchitecture
Composites
複数のElementsを組み合わせて完結したUI単位を提供する。
責務
Compositesは 複数のElementsを組み合わせて完結したUI単位 を提供する。
- 複数のElementsを統合し、特定のユースケースに対応するUIを構成する
- 子要素間の連携ロジック（フォーカストラップ、開閉状態の共有等）を管理する
- Radix UIの複合コンポーネント（Dialog, Popover等）をベースに構築する
- コンポーネント内部で完結する状態管理を行なう（外部への状態公開はコールバックPropsで行なう）
責務外
Compositesが行ってはならないことを定義する。
- ビジネスロジックを持たない — フォームのバリデーションルールやAPI通信はアプリケーション側の責務である
- ページレイアウトを規定しない — Compositeは画面内の一部分を構成する。ページ全体の構成はアプリケーション側で行なう
- データの取得・永続化を行なわない — データフェッチやストレージへの保存はCompositeの外で行なう
- 他のCompositesに依存しない — Composites同士の直接的な依存は禁止する
- Primitivesを直接使用しない — Elements経由でPrimitivesを利用する。Primitivesに直接依存すると、レイヤーの境界が曖昧になる
要件
| 要件 | 詳細 |
|---|---|
'use client' 宣言 | hooks・イベントハンドラ・ブラウザAPIを使用する場合のみ宣言する |
| フォーカス管理 | モーダル・ポップオーバーではフォーカストラップを実装する |
| キーボード操作 | Escape で閉じる、矢印キーでの移動等、WAI-ARIAパターンに準拠する |
| 開閉制御 | open / onOpenChange パターンで制御可能にする |
| コールバック提供 | 外部に状態変更を通知するコールバックPropsを提供する |
| アニメーション | 表示・非表示のトランジションをモーショントークンに基づいて実装する |