React Spectrum S2（Spectrum 2）

React Spectrum S2は、React向けのAdobeのSpectrum 2デザインシステム実装です。アクセシブルで適応性の高い、高品質なUIコンポーネントのコレクションを提供します。

ドキュメント構成

references/ ディレクトリには、以下のように整理された詳細なドキュメントが含まれています。

ガイド

• Collections: 多くのコンポーネントはアイテムのコレクションを表示し、キーボードナビゲーションと選択などの機能を提供します。React SpectrumのコンポーショナルAPIを使用してコレクションを読み込んでレンダリングする方法を学びます。
• Forms: HTMLフォームとの統合、データの検証と送信、およびフォームライブラリでのReact Spectrumの使用方法を学びます。
• Getting started: ## インストール
• Spectrum 2へのマイグレーション: React Spectrum v3からSpectrum 2への移行方法を学びます。
• Selection: 多くのコレクションコンポーネントは、クリックまたはタップ、またはキーボードを使用してアイテムを選択することができます。選択イベントの処理方法、プログラムで選択を制御する方法、および選択を表すために使用されるデータ構造を学びます。
• Style Macro: マクロは、Spectrum 2に準拠するプロパティごとに制限された値のセットをサポートします。
• Styling: マクロを使用してSpectrum トークンをコンポーネントに直接適用し、型安全なオートコンプリートを活用する方法を学びます。
• AIでの作業: React Spectrum MCPサーバー、エージェントスキル、その他を使用してAIでの構築を支援する方法を学びます。

コンポーネント

• Accordion: アコーディオンは複数のアコーディオンアイテム用のコンテナです。
• ActionBar: アクションバーは、ユーザーが複数のアイテムに対して同時にアクションを実行する必要があるシングルおよびバルク選択パターンに使用されます。
• ActionButton: ActionButtonを使用すると、ユーザーはアクションを実行できます。
• ActionButtonGroup: ActionButtonGroupは関連するActionButtonのグループです。
• ActionMenu: ActionMenuは、ActionButtonをメニューと組み合わせ、シンプルな「その他のアクション」ユースケースに対応します。
• Avatar: アバターは、ユーザーや組織などのエンティティのサムネイル表現です。
• AvatarGroup: アバターグループは、互いに関連する複数のアバターのグループです。
• Badge: バッジは色分類されたメタデータの少量を表示するために使用され、ユーザーの注意を引くのに理想的です。
• Breadcrumbs: パンくずは、アプリケーション内のユーザーの位置の階層とナビゲーションコンテキストを表示します。
• Button: ボタンを使用すると、ユーザーはアクションを実行できます。
• ButtonGroup: ButtonGroupは、関連するアクションを持つボタンのグループのオーバーフローを処理します。
• Calendar: カレンダーは1つ以上の月の日付のグリッドを表示し、ユーザーが単一の日付を選択できます。
• Card: カードはユーザーが選択またはナビゲートできるオブジェクトを要約します。
• CardView: CardViewは関連オブジェクトのグループを表示し、選択とバルクアクションをサポートします。
• Checkbox: チェックボックスを使用すると、ユーザーはアイテムのリストから複数のアイテムを選択できます。
• CheckboxGroup: CheckboxGroupを使用すると、ユーザーはリストから1つ以上の選択肢を選択できます。
• ColorArea: ColorAreaを使用すると、ユーザーは2次元グラデーション背景に対してRGB、HSL、またはHSB色値の2つのチャネルを調整できます。
• ColorField: カラーフィールドを使用すると、ユーザーは16進数色または個別の色チャネル値を編集できます。
• ColorSlider: ColorSliderを使用すると、ユーザーは色値の個別のチャネルを調整できます。
• ColorSwatch: ColorSwatchは選択された色のプレビューを表示します。
• ColorSwatchPicker: ColorSwatchPickerは色見本のリストを表示し、ユーザーがそのうちの1つを選択できます。
• ColorWheel: ColorWheelを使用すると、ユーザーは円形トラック上のHSLまたはHSB色値の色相を調整できます。
• ComboBox: ComboBoxを使用すると、スペースが限定されている場合にユーザーが折りたたみ可能なオプションリストから単一のオプションを選択できます。
• ContextualHelp: コンテキストヘルプは、隣接するコンポーネントまたは全体ビューの状態に関する追加情報をユーザーに表示します。
• DateField: DateFieldを使用すると、ユーザーはキーボードを使用して日付と時刻の値を入力および編集できます。
• DatePicker: DatePickerはDateFieldとカレンダーポップオーバーを組み合わせ、ユーザーが日付と時刻の値を入力または選択できます。
• DateRangePicker: DateRangePickerは2つのDateFieldとRangeCalendarポップオーバーを組み合わせ、ユーザーが...
• Dialog: ダイアログは、ユーザーインターフェース上に表示される、コンテキスト情報、タスク、またはワークフローを含むウィンドウです。
• Disclosure: ディスクロージャーはコンテンツの折りたたみ可能なセクションです。ヘッダーとヘッドライン、トリガーボタン、およびコンテンツを含むパネルで構成されています。
• Divider: ディバイダーはレイアウトに明確さをもたらし、近接したコンテンツをグループ化および分割します。
• DropZone: ドロップゾーンは、1つ以上のオブジェクトをドラッグアンドドロップできるエリアです。
• Form: フォームを使用すると、ユーザーはデータを入力して送信でき、フォームフィールドの配置とスタイルを提供します。
• Icons: React Spectrumは から インポートできるオープンソースアイコンのセットを提供します。
• IllustratedMessage: IllustratedMessageはイラストとメッセージを表示します（通常は...）
• Illustrations: React Spectrumは から インポートできるイラストのコレクションを提供します。
• Image: スケルトンローディングとカスタムエラー状態をサポートする画像。
• InlineAlert: インラインアラートはビュー内のオブジェクトに関連付けられた非モーダルメッセージを表示します。
• Link: リンクを使用すると、ユーザーは別の位置にナビゲートできます。
• LinkButton: LinkButtonはリンクの機能とボタンの外観を組み合わせます。ユーザーが別のページにナビゲートできるようにするのに便利です。
• ListView: ListViewはインタラクティブなアイテムのリストを表示し、ユーザーがナビゲート、選択、またはアクションを実行できます。
• mcp
• Menu: メニューはユーザーが選択できるアクションまたはオプションのリストを表示します。
• Meter: メーターは数量または達成度の視覚的表現です。
• NumberField: NumberFieldを使用すると、ユーザーはキーボードで数値を入力するか、ステップボタンで増減できます。
• Picker: Pickerを使用すると、スペースが限定されている場合にユーザーが折りたたみ可能なオプションリストから単一のオプションを選択できます。
• Popover: ポップオーバーはトリガーに相対的に位置付けられたオーバーレイ要素です。
• ProgressBar: ProgressBarsはシステム操作の進捗（ダウンロード、アップロード、処理など）を視覚的に表示します。
• ProgressCircle: ProgressCirclesはダウンロード、アップロード、処理などのシステム操作の進捗を視覚的に表示します。
• Provider: ProviderはすべてのReact Spectrumコンポーネント用のコンテナです。
• RadioGroup: ラジオグループを使用すると、ユーザーは相互に排他的なオプションのリストから単一のオプションを選択できます。
• RangeCalendar: RangeCalendarは1つ以上の月の日付のグリッドを表示し、ユーザーが連続した日付範囲を選択できます。
• RangeSlider: RangeSliderを使用すると、ユーザーは範囲のサブセットを迅速に選択できます。範囲の上限と下限が不変の場合に使用します。
• SearchField: SearchFieldは検索向けに設計されたテキストフィールドです。
• SegmentedControl: SegmentedControlはビュー切り替え用の相互に排他的なボタンのグループです。
• SelectBoxGroup: SelectBoxGroupを使用すると、ユーザーはリストから1つ以上のオプションを選択できます。
• Skeleton: Skeletonはコンテンツをラップしてプレースホルダーとしてレンダリングします。
• Slider: Sliderを使用すると、ユーザーは範囲内の値を迅速に選択できます。範囲の上限と下限が不変の場合に使用します。
• StatusLight: ステータスライトは、データ可視化に一般的に見られるカテゴリとラベルの色分類に使用されます。
• Switch: スイッチを使用すると、ユーザーは個別のオプションをオンまたはオフにできます。
• TableView: テーブルは情報を表示するためのコンテナです。ユーザーが大量のデータを迅速にスキャン、ソート、比較、およびアクションを実行できます。
• Tabs: タブはコンテンツを複数のセクションに整理し、ユーザーがそれらの間をナビゲートできます。タブセットの下のコンテンツは関連していて、一貫性のあるユニットを形成する必要があります。
• TagGroup: タグを使用すると、ユーザーはコンテンツを分類できます。キーワードまたは人を表すことができ、アイテムまたは検索リクエストを説明するためにグループ化されます。
• TextArea: テキストエリアを使用すると、ユーザーは複数行のテキストを入力できます。
• TextField: TextFieldはユーザーがカスタムテキストを入力できるテキスト入力です。
• TimeField: TimeFieldを使用すると、ユーザーはキーボードを使用して時刻値を入力および編集できます。
• Toast: ToastContainerはアプリケーション内のキューに入ったトーストをレンダリングします。配置...
• ToggleButton: ToggleButtonを使用すると、ユーザーは選択をオンまたはオフにトグルできます（例：...）
• ToggleButtonGroup: ToggleButtonGroupはシングルまたはマルチプル選択を備えた関連するToggleButtonsのグループです。
• Tooltip: Tooltipコンテンツの表示コンテナ。配置に依存して方向性のある矢印があります。
• TreeView: ツリービューは、ユーザーがネストされた階層情報をナビゲートする方法を提供します。

テスト

• CheckboxGroupのテスト
• ComboBoxのテスト
• Dialogのテスト
• ListViewのテスト
• Menuのテスト
• Pickerのテスト
• RadioGroupのテスト
• TableViewのテスト
• Tabsのテスト
• TreeViewのテスト