Gamble Hub UIコンポーネントライブラリ

1）目標と原則

理由：機能の提供を迅速化し、一貫したUXを提供し、サポートを簡素化します。

• 意味論と中立性。このコンポーネントは、ビジネスロジックで縫うことなくUIの問題を解決します。
• 。 。ロール、フォーカスリング、アリア属性、コントラストはコンポーネントに縫い付けられます。
• i18n-first。線の長さ、数値フォーマット、RTL-ボックス外を考慮します。
• Temization。トークンを通してライト/ダークテーマとブランドアクセント。
• スケーラビリティ。ユニフォームAPI、マイナーリリースの安定性、メジャーでの移行。

2）根拠： デザイントークン（基礎）

json
{
"color": {
"text": { "default": "{palette. neutral. 900}", "muted": "{palette. neutral. 600}", "inverse": "{palette. neutral. 0}" },
"surface": { "default": "{palette. neutral. 0}", "elevated": "{palette. neutral. 50}", "brand": "{palette. brand. 50}" },
"accent": { "primary": "{palette. brand. 600}", "success": "{palette. green. 600}", "warning": "{palette. amber. 600}", "error": "{palette. red. 600}" }
},
"space": { "xs": 4, "sm": 8, "md": 12, "lg": 16, "xl": 24 },
"radius": { "sm": 8, "md": 12, "lg": 16, "full": 999 },
"elevation": { "0": "none", "1": "0 1px 2px rgba(0,0,0,.08)", "2": "0 4px 12px rgba(0,0,0,.12)" },
"motion": { "fast": "120ms", "base": "200ms" },
"opacity": { "disabled": 0. 45, "muted": 0. 7 }
}

ルール：セマンティックトークン（例：カラーだよ。アクセント。success'）はコンポーネントによって使用されます。パレット-内部。

3）コンポーネントカテゴリ

1.（プリミティブ）：ボタン、アイコン、タイポグラフィ、リンク、バッジ、ディバイダー、アバター。
2.Формы：入力、PasswordInput、 NumberInput、 Select、 Combobox、 DatePicker、 Checkbox、 Radio、 Switch、 Slider、 Textarea、 FileUpload。
3.ナビゲーション：AppBar、タブ、ブレッドクラム、ペジネーション、引き出し/サイドバー、ステッパー。
4.Фидбек：アラート、インラインエラー、ツールチップ、トースト、スナックバー、モーダル、ポップオーバー、スケルトン、進行状況、ステータスドット。
5.データとテーブル：テーブル、データリスト、カード、アコーディオン、タグ、空の状態。

• ゲームタイル（ゲームカード）
• プロバイダバッジ
• JackpotTicker
• LiveBadge（ライブテーブル/ショー）
• LobbyFilters（プロバイダ/ジャンル/制限）
• ボーナスバナー/ボーナスカード
• ミッションプログレス/アチーブメントバッジ
• トーナメントリーダーボード
• WalletCard/BalanceWidget
• PaymentMethodカード
• DepositForm/出金フォーム
• KYCStatusBadge/KYChecklist
• ResponsibleGamingBanner/LimitsControl
• AgeGate/SessionTimer/RiskAlert
• SystemStatus/MaintenanceBanner

4）コンポーネントページ： 必須コンテンツ

利用目的および利用する場合・利用しない場合。
構成とバリエーション。寸法、状態、修飾子。
API。支柱、でき事、スロット、制御された/制御されないモード。
。 。役割、焦点、アリア接続、ライブ領域。
i18n。長さ、フォーマット、ローカライズ可能な署名。
マイクロコピーだ。推奨テキスト（CTA、ヒント、エラー）。
コード例。典型的なケース、エッジケース（エラー、ロード、空）。
テストします。視覚的なmatrix/unit/interaction/A11y。
アンチサンプル。頻繁な使用エラー。

5）主要な部品： 速いSpecs

5.1ボタン

バリアント： 'primary | secondary | ghost | destructive'寸法：'sm | md | lg'

状態： ノーマル、ホバー、フォーカス表示、アクティブ、ロード、無効

A11y： 可視フォーカスリング、'loading'の'aria-busy'、 toggleの'aria-pressed'

Microcopy： action+object（変更を保存、検証）

アンチサンプル： 「OK」

5.2入力/フィールド

材料： ラベル、フィールド、ヘルパー、エラー、接頭辞/接尾辞

A11y： 'aria-invalid'、 'aria-describedby'、 'for/id'

エラーパターン： 何が間違っているか+修正する方法（「+380形式で番号を入力してください……」）

スロット： 'prefix'（アイコン）、'suffix'（ボタン"show password'）

5.3選択/コンボボックス

機能： リスト検索、キーボード、長いリスト仮想化

A11y： 'role=「combobox」、' aria-expanded'、'aria-activedescendant'

空白の結果： "何も見つかりませんでした。リクエストを変更する"

5.4モーダル/引き出し

ルール： トラップフォーカス、ESC/オーバーレイクローズ、リターンフォーカスをイニシエータに

使用法： 支払の確認、リベートの規則、KYCのステップ

5.5トースト/スナックバー

時間： 2-4 sの流れの妨害無し

ライブ領域： "aria-live="礼儀""成功""失敗"

例： "支払いは受け付けています。残高が更新されました"

5.6空の状態

テンプレート： context+value+CTA+secondary CTA

例： "最初のゲームを追加すると、選択したゲームがここに表示されます。［お気に入りに追加］"

6） iGamingコンポーネント： 詳細とAPI

6.1ゲームタイル

目的：ロビー/カタログのゲームカード。
構成：カバー、プロバイダー、タグ（新しい/ホット/ジャックポット/ライブ）、RTP（卸売）、クイックアクション。

ts
<GameTile title="Lightning Roulette"
provider="Evolution"
tags={["Live","Popular"]}
isJackpot={true}
onPlay={...}
onFavToggle={...}
/>

状態：ホバー（高速開始）、スケルトン、利用不可（地域/時間）。
A11y： alt-text、 keyboard start、 'aria-label=「Play Lightning Roulette」'。

6.2ロビーフィルター

目的：ロビーフィルタ（ジャンル、プロバイダ、制限、ボラティリティ）。
機能：保存されたプリセット、フィルタのリセット、結果カウンタ。
Microcopy： 「Filters'、」 Reset filters'、 「Found： 128」。

6.3ボーナスバナー/ボーナスカード

オプション：歓迎、リロード、キャッシュバック、フリースピン、トーナメント。
フィールド：ヘッダー、条件、有効期間、CTA（「ボーナスを有効にする」）。
A11y：条件への参照は'aria-describby'→条件の詳細を読むことができます。
アンチパターン：キーの制約を非表示にします。

6.4ジャックポットティッカー

目的：ジャックポットの自動更新実行量。
API：データソース、更新期間、通貨フォーマット。
A11y： 'role=「status」、スクリーンリーダーの可読性に違反しないでください。

6.5トーナメントリーダーボード

構成：位置テーブル、ポイント、賞品、タイマー、自身の位置。
特徴：ページネーション/仮想化、ラインの固定。
A11y： 'th'/'scope'、読み取り可能な列、矢印ナビゲーション。

6.6 WalletCard/BalanceWidget

フィールド：残高、ブロックされた資金、ボーナス残高、通貨。

アクション： 「トップアップ」「表示」「履歴」

セキュリティ：非表示/金額、共用エリアでのマスキング。

6.7 PaymentMethodCard

フィールド：プロバイダロゴ、制限、手数料、ETA、地域の可用性。
状態：利用できません（地域/ステータス）、プロセスでは、警告を制限します。

マイクロコピー： "1。5％の手数料はプロバイダによって保留されます"、"支払い-最大15分"

6.8 DepositForm/出金フォーム

パターン：インライン検証、金額制限、同じメソッドルールプロンプト。
A11y：エラーの宣言（'assertive'）、フォーカスを最初のエラーに切り替えます。
サービスフィールド：「資金源」、「目的」、AMLが必要な場合。

6.9 KYCStatusBadge/KYCChecklist

状態：'none | basic | extended | refered | pending'。

テキスト： 「2分~かかります」、「まぶしさのない写真、コーナーとテキストが表示されます。」

CTA： "検証を受ける"、セカンダリ："なぜこれが重要なのですか？».

6.10 LimitsControl/ResponsibleGamingBanner

目的：預金/レート/時間、休憩、自己排除の限界。
А11у/Tone：助けへの参照の中立、圧力無し。

7）レイアウトパターン（レシピ）

登録/ACC： Stepper+Form+InlineError+PageAlert+SuccessToast。
PaymentMethodCard+AmountInput+LimitsHint+ConfirmModal+StatusToast。
検索バー+ロビーフィルター+ゲームグリッド（ゲームタイル）+ページネーション+空の状態。
トーナメントリーダーボード+ミッションプログレス+ボーナスバナー。
責任：ResponsibleGamingBanner+LimitsControl+FAQ-link。

8）アクセシビリティ（A11y）

目に見える焦点は常に（暗いテーマを含む）。
すべてのインタラクティブ要素を介したキーボードナビゲーション。
'aria-live=トースト/ステータスのための「丁寧/アサーティブ」。
コントラストはWCAG 2より低くはありません。1 AA。
アイコンのテキストだけが意味のキャリアではありません。
RTLモード、320 pxチェックと読みやすさを大声で。

9）ローカライズとフォーマット

すべてのユーザー文字列はi18nキーを介しています。

ui. button. save = Save wallet. deposit. success = Payment accepted. Balance updated.
kyc. photo. hint = Photo without glare, corners and text are visible.
filters. reset = Reset filters

日付/通貨の書式設定-文字列ではなくユーティリティを使用します。
言語のトーン-トーンマップを介して（中立/支持/公式）。

10）性能および質

仮想化（ゲーム、テーブル）を一覧表示します。
イラストの遅延読み込み、ページごとのコードスプライシング。
バンドルサイズ：UIパッケージバジェット、重い依存関係はありません。
スピード知覚のための骨格、スピナー-最小。
テスト：単位、視覚的なスナップショット、相互作用、A11y、重要な流れのためのE2E。

11）バージョン管理とリリース

SemVer：パッチ-バグ；マイナー-非破壊的。メジャー-移行と。
リリースノート：トークン/API/動作、スクリーンショットの前後。
廃止：ドックマーキング、コードモッド、リンタールール。
ストーリーブック/プレイグラウンド：ライブの例、アクセシビリティパネル、RTLトグル。

12）コントリビュート

新しいコンポーネントのRFC：問題→オプション→選択した決定→A11y→i18n→API→リスク。
PRチェックリスト：ドック、ストーリー、テスト、ビジュアルスナップショット、コントラスト、i18n、 ダーク/RTL。
Doneの定義：component+documentation+tests+パターン例。

13） MVPセットとロードマップ

• ボタン、入力、選択、チェックボックス、ラジオ、スイッチ、モーダル、トースト、ツールチップ、進捗状況、スケルトン、カード、空の状態、タブ、ページネーション、ブレッドクラム、テーブル、ゲームタイル、ロビーフィルター、ボーナスバナー、WalletCard、 PaymentMethodCard、 DepositForm、 KYCStatusBadge。

トーナメントリーダーボード、JackpotTicker、 MissionProgress、 LimitsControl、 SystemStatus、引き出し/サイドバー、DatePicker、 Combobox、 FileUpload。

14）マイクロコピーの例（完成したインサート）

CTA： 「Save changes」「、Get verified」「、Add a payment method」

エラー： "無効な日付形式。DDを使用します。MM。 YYYY。"、"ファイルが大きすぎる（最大10 MB）"

成功： "支払いが受け入れられました。バランスを更新しました。"、完了しました！確認されたドキュメント"

空の状態： "By "{query}"何も見つかりませんでした。フィルタをリセットするか、クエリをリファインする"

15）アンチパターン

UIコンポーネント内のビジネスロジック（オーバーユースを破る）。
目に見えない焦点や色にのみ意味の依存。
コンポーネントコードに埋め込まれた文字列（i18nなし）。
意味の違反（'div'のボタン、'ul/ol/li'のないリスト）。
明確なルールのないバリアント（'ButtonPrimaryBlueBig2'）。

16）チェックリスト

• 目的、バリエーション、APIについて説明します。
• A11y：ロール、フォーカス、アリア属性、コントラスト。
• i18n：すべての行がレンダリングされ、長い言語とRTLがチェックされます。
• ストーリー/デモ：ノーマル、ダウンロード、エラー、空白。
• テスト：unit+visual+interaction+A11y。
• ビジネスロジックがなく、UI/挙動のみ。

• コンポーネントとフォーカス順序のスキームがあります。
• マイクロコピーとエラー/成功テキストが定義されています。
• 測定された主な指標（ステップ変換、エラー率、完了までの時間）。

17）コンポーネントのドキュメントスケルトン（テンプレート）

名前と目的

使用する/使用しない場合

オプションと状態

API（小道具、イベント、スロット）

アクセシビリティ（役割、キーボード、アリア、コントラスト）

i18n（キー、フォーマット、長さ、RTL）

マイクロコピー（例）

コードサンプル（標準およびエッジ）

テストマトリックス

アンチサンプル

合計

Gamble Hub UIは、単なるブロックの集合ではなく、トークン→コンポーネント→パターン→ドキュメント→メトリクスという規律です。このガイドに従って、チームはより速く機能を提供し、ユーザーは予測可能で手頃な価格のインターフェースを手に入れ、視覚的な負債のない製品スケールを提供します。必要に応じて、例とi18nキーでMVP-setによってドックの最初のページを収集します。