Gamble Hub UI Komponentenbibliothek

1) Ziele und Grundsätze

Warum: Beschleunigen Sie die Lieferung von fitch, sorgen Sie für konsistente UX und vereinfachen Sie den Support.

• Semantik und Neutralität. Die Komponente löst das UI-Problem, ohne die Geschäftslogik zu vernähen.
• A11y-by-default. Rollen, Fokusringe, Aria-Attribute und Kontrast - in die Komponenten eingenäht.
• i18n-first. Zeilenlängen, Zahlenformate, RTL - wir berücksichtigen aus der Box heraus.
• Temization. Helle/dunkle Themen und Markenakzente durch Token.
• Skalierbarkeit. Einheitliche APIs, Stabilität von Moll-Releases, Migration bei Major.

2) Grundlagen: Design-Token (Stiftung)

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 }
}

Regeln: Semantische Token (z.B. 'color. accent. success') von den Komponenten verwendet werden; Die Palette ist intern.

3) Bauteilkategorien

1. Базовые (Primitives): Button, Icon, Typography, Link, Badge, Divider, Avatar.
2. Формы: Input, PasswordInput, NumberInput, Select, Combobox, DatePicker, Checkbox, Radio, Switch, Slider, Textarea, FileUpload.
3. Navigation: AppBar, Tabs, Breadcrumbs, Pagination, Drawer/Sidebar, Stepper.
4. Фидбек: Alert, InlineError, Tooltip, Toast, Snackbar, Modal, Popover, Skeleton, Progress, StatusDot.
5. Daten und Tabellen: Table, DataList, Card, Akkordeon, Tag, EmptyState.

• GameTile (Spielkarte)
• ProviderBadge
• JackpotTicker
• LiveBadge (Live-Tisch/Show)
• LobbyFilters (Anbieter/Genre/Limit)
• BonusBanner / BonusCard
• MissionProgress / AchievementBadge
• TournamentLeaderboard
• WalletCard / BalanceWidget
• PaymentMethodCard
• DepositForm / WithdrawalForm
• KYCStatusBadge / KYCChecklist
• ResponsibleGamingBanner / LimitsControl
• AgeGate / SessionTimer / RiskAlert
• SystemStatus / MaintenanceBanner

4) Komponentenseite: Pflichtinhalt

Zweck und wann zu verwenden/nicht zu verwenden.
Zusammensetzung und Optionen. Größen, Zustände, Modifikatoren.
API. Props, Ereignisse, Slots, kontrollierte/unkontrollierte Modi.
A11y. Rollen, Fokus, Aria-Verbindungen, Live-Regionen.
i18n. Längen, Formate, lokalisierbare Signaturen.
Microcopy. Empfohlene Texte (CTA, Hinweise, Fehler).
Beispiele für Code. Typische Fälle, Edge-Fälle (Fehler, Download, leer).
Tests. Matrix visuell/Einheit/Interaktion/A11y.
Anti-Beispiele. Häufige Nutzungsfehler.

5) Schlüsselkomponenten: schnelle Spezifikationen

5. 1 Button

Optionen: „primary | secondary | ghost | destructive“ Abmessungen: „sm | md | lg“

Zustände: normal, hover, focus-visible, aktiv, loading, disabled

A11y: sichtbarer Fokusring, 'aria-busy' bei 'loading', 'aria-pressed' für toggle

Microcopy: Aktion + Objekt („Änderungen speichern“, „Verifizierung bestehen“)

Anti-Beispiel: „OK“

5. 2 Input / Field

Inhaltsstoffe: Label, field, helper, error, prefix/suffix

A11y: `aria-invalid`, `aria-describedby`, связка `for/id`

Fehlermuster: Was ist falsch + wie zu beheben („Geben Sie die Nummer im Format + 380“...)

Slots: 'prefix' (Symbol), 'suffix' (Schaltfläche' Passwort anzeigen')

5. 3 Select / Combobox

Features: Listensuche, Tastatur, lange Listen virtualisieren

A11y: `role="combobox"`, `aria-expanded`, `aria-activedescendant`

Leere Ergebnisse: "Nichts gefunden. Ändern Sie die Abfrage"

5. 4 Modal / Drawer

Regeln: Trap-Fokus, Abschluss nach ESC/Overlay, Fokus zurück zum Initiator

Verwendung: Zahlungsbestätigungen, Bonusregeln, KYC-Schritte

5. 5 Toast / Snackbar

Zeit: 2-4 s, keine Durchflusssperre

Live-Regionen: 'aria-live =' polite' für Erfolge, 'assertive' für Fehler

Beispiele: "Zahlung akzeptiert. Die Bilanz wurde aktualisiert"

5. 6 EmptyState

Vorlage: Kontext + Wert + CTA + sekundäre CTA

Beispiel: "Hier werden ausgewählte Spiele angezeigt, wenn Sie das erste hinzufügen. [Favoriten hinzufügen"

6) iGaming-Komponenten: Spezifität und API

6. 1 GameTile

Zweck: Spielkarte in der Lobby/Katalog.
Zusammensetzung: Cover, Anbieter, Tags (Neu/Heiß/Jackpot/Live), RTP (opz.) , schnelles Handeln.

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

Zustände: hover (Schnellstart), Skelett, nicht verfügbar (Region/Zeit).
A11y: Alt-Text, Tastaturstart, 'aria-label = „Lightning Roulette spielen“.

6. 2 LobbyFilters

Zweck: Lobby-Filter (Genre, Anbieter, Limits, Volatilität).
Fichy: gespeicherte Voreinstellungen, Filter zurücksetzen, Ergebniszähler.
Microcopy: „Filter“, „Filter zurücksetzen“, „Gefunden: 128“.

6. 3 BonusBanner / BonusCard

Optionen: Begrüßung, Reload, Cashback, Freispiele, Turnier.
Felder: Titel, Bedingungen, Gültigkeit, CTA („Bonus aktivieren“).
A11y: Verweise auf Bedingungen sind lesbar, 'aria-describedby' → Details der Bedingungen.
Anti-Muster: Die wichtigsten Einschränkungen ausblenden.

6. 4 JackpotTicker

Zweck: Laufender Jackpot-Betrag mit Auto-Update.
API: Datenquelle, Aktualisierungszeitraum, Währungsformat.
A11y: 'role =' status', nicht stören die Lesbarkeit des screenrider.

6. 5 TournamentLeaderboard

Zusammensetzung: Positionstabelle, Punkte, Preise, Timer, eigene Position.
Fichi: Paginierung/Virtualisierung, Festigung der eigenen Linie.
A11y: 'th '/' scope', lesbare Spalten, Navigation mit Pfeilen.

6. 6 WalletCard / BalanceWidget

Felder: Guthaben, Sperrgelder, Bonusguthaben, Währung.
Aktionen: „Auffüllen“, „Zurückziehen“, „Verlauf“.
Sicherheit: Betrag ausblenden/anzeigen, Maskierung in öffentlichen Bereichen.

6. 7 PaymentMethodCard

Felder: Anbieterlogo, Limits, Provisionen, ETA, regionale Verfügbarkeit.
Status: nicht verfügbar (Region/Status), in Bearbeitung, Warnung vor Limits.
Microcopy: „1,5% Provision wird vom Anbieter einbehalten“, „Auszahlung - bis zu 15 Minuten“.

6. 8 DepositForm / WithdrawalForm

Muster: Inline-Validierung, Summenlimits, gleiche Methodenregel durch Hinweise.
A11y: Deklaration von Fehlern („assertive“), Übersetzung des Fokus auf den ersten Fehler.
Servicefelder: „Geldquelle“, „Zuordnung“, falls AML erforderlich.

6. 9 KYCStatusBadge / KYCChecklist

Staaten: „none | basic | extended | rejected | pending“.
Texte: „Es dauert ~ 2 Minuten“, „Foto ohne Blendung, sichtbare Ecken und Text“.
CTA: "Verifizierung bestehen", sekundär: "Warum ist das wichtig? ».

6. 10 LimitsControl / ResponsibleGamingBanner

Zweck: Einzahlungs-/Wett-/Zeitlimits, Pausen, Selbstausschluss.
A11u/Ton: neutral, ohne Druck, mit Bezug auf die Hilfe.

7) Layoutmuster (Rezepte)

Anmeldung/CUS: Stepper + Form + InlineError + PageAlert + SuccessToast.
Депозит: PaymentMethodCard + AmountInput + LimitsHint + ConfirmModal + StatusToast.
Лобби: SearchBar + LobbyFilters + GameGrid (из GameTile) + Pagination + EmptyState.
Турнир: TournamentLeaderboard + MissionProgress + BonusBanner.
Verantwortungsvolles Spielen: ResponsibleGamingBanner + LimitsControl + FAQ-Link.

8) Accessibility (A11y)

Der sichtbare Fokus ist immer (auch im dunklen Thema).
Navigieren Sie mit der Tastatur durch alle interaktiven Elemente.
„aria-live =“ polite/assertive „“ für Toast/Status.
Die Kontraste sind nicht niedriger als WCAG 2. 1 AA.
Der Text in den Icons ist nicht der einzige Bedeutungsträger.
RTL-Modi, 320-px-Check und laut lesbar.

9) Lokalisierung und Formate

Alle benutzerdefinierten Zeichenfolgen sind über i18n-Schlüssel.

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

Datums-/Währungsformatierung - Dienstprogramme, nicht Zeichenfolgen.
Der Ton in den Sprachen ist durch tone-map (neutral/unterstützend/offiziell).

10) Leistung und Qualität

Virtualisierung von Listen (Spiele, Tabellen).
Faules Laden von Illustrationen, Code-Spliting durch Seiten.
Bundle-Größen: Budget für UI-Paket, keine schweren Abhängigkeiten.
Skeleton für Geschwindigkeitswahrnehmung, Spinner minimal.
Tests: Einheit, visuelle Schnappschüsse, Interaktion, A11y, E2E für kritische Flows.

11) Versionierung und Freigaben

SemVer: patch - Fehler; minor - zerstörungsfrei; major - mit Migrationen.
Release Notes: Token/API/Verhalten, Vorher/Nachher Screenshots.
Deprecations: Markierungen im Dock, Codemoden und Linterregeln.
Storybook/Playground: Live-Beispiele, Barrierefreiheit-Panel, RTL-Toggle.

12) Mitwirken (Input)

RFC auf die neue Komponente: das Problem → die Varianten → die gewählte Lösung → A11y → i18n → API → die Risiken.
PR-Checkliste: Doc, Story, Tests, visuelle Schnappschüsse, Kontraste, i18n, dark/RTL.
Definition of Done: Komponente + Dokumentation + Tests + Musterbeispiele.

13) MVP-Rekrutierung und Roadmap

• Button, Input, Select, Checkbox, Radio, Switch, Modal, Toast, Tooltip, Progress, Skeleton, Card, EmptyState, Tabs, Pagination, Breadcrumbs, Table, GameTile, LobbyFilters, BonusBanner, WalletCard, PaymentMethodCard, DepositForm, KYCStatusBadge.

Далее: TournamentLeaderboard, JackpotTicker, MissionProgress, LimitsControl, SystemStatus, Drawer/Sidebar, DatePicker, Combobox, FileUpload.

14) Beispiele für Mikrokopie (fertige Einsätze)

CTA: „Änderungen speichern“, „Verifizierung bestehen“, „Zahlungsmethode hinzufügen“.

Fehler: "Ungültiges Datumsformat. Verwenden Sie DD. MM. JJJJ. ", "Die Datei ist zu groß (max. 10 MB)"

Erfolg: "Die Zahlung wurde akzeptiert. Die Bilanz wurde aktualisiert. „, „Fertig! Die Unterlagen sind geprüft"

Leere Zustände: "Durch "{query}" wurde nichts gefunden. Setzen Sie die Filter zurück oder verfeinern Sie die Abfrage"

15) Anti-Muster

Geschäftslogik innerhalb der UI-Komponenten (bricht die Wiederverwendbarkeit).
Unsichtbarer Fokus oder Bedeutungsabhängigkeit nur von Farbe.
In den Komponentencode eingenähte Zeichenfolgen (ohne i18n).
Semantikverletzung (Button auf 'div', Listen ohne' ul/ol/li').
Varianten ohne klare Regeln (Reproduktion 'ButtonPrimaryBlueBig2').

16) Checklisten

• Zweck, Varianten, APIs werden beschrieben.
• A11y: Rolle, Fokus, Aria-Attribute, Kontrast.
• i18n: Alle Zeilen werden herausgenommen, lange Sprachen und RTL geprüft.
• Story/Demo: normal, Download, Fehler, leer.
• Tests: Einheit + visuell + Interaktion + A11y.
• Keine Geschäftslogik, nur Benutzeroberfläche/Verhalten.

• Es gibt ein Schema der Komponenten und die Reihenfolge des Fokus.
• Microcopy und Fehler-/Erfolgstexte sind definiert.
• Die Schlüsselmetriken (Step Conversion, Error Rate, Time-to-Complete) wurden gemessen.

17) Dokumentenskelett für Bauteil (Vorlage)

Titel und Zweck

Wann zu verwenden/nicht zu verwenden

Varianten und Zustände

API (Props, Events, Slots)

Zugänglichkeit (Rolle, Tastatur, Aria, Kontrast)

i18n (Schlüssel, Formate, Längen, RTL)

Microcopy (Beispiele)

Codebeispiele (Typical und Edge)

Test-Matrix

Anti-Beispiele

Summe

Gamble Hub UI ist nicht nur eine Sammlung von Blöcken, sondern eine Disziplin: Token → Komponenten → Muster → Dokumentation → Metriken. Im Anschluss an diese Hyde liefern Teams Fichies schneller, Benutzer erhalten eine vorhersehbare und zugängliche Schnittstelle und das Produkt skaliert ohne visuelle Verpflichtung. Bei Bedarf werde ich die ersten Seiten des Docks durch das MVP-Set mit Beispielen und i18n-Schlüsseln sammeln.