Libreria componenti Gamble Hub UI

1) Obiettivi e principi

Perché accelerare la fornitura di FIC, fornire un UX consistente e semplificare il supporto.

• Semantica e neutrale. Il componente risolve l'attività UI senza la logica aziendale.
• A11y-by-default. Ruoli, anelli di fuoco, attributi aria e contrasto sono composti nei componenti.
• i18n-first. Lunghezze di righe, formati numerici, RTL - prendiamo in considerazione dalla scatola.
• La tematizzazione. Temi chiari/scuri e accenti di marca attraverso i token.
• Scalabilità. API unificate, stabilità dei rilasci minori, migrazioni a major.

2) Basi: token di design (fondazione)

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

Regole: token semantici (ad esempio, 'color. accent. success ') utilizzati dai componenti la tavolozza è interna.

3) Categorie di componenti

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

• GameTile (scheda di gioco)
• ProviderBadge
• JackpotTicker
• LiveBadge (tavolo live/show)
• LobbyFilters (provider/genere/limite)
• BonusBanner / BonusCard
• MissionProgress / AchievementBadge
• TournamentLeaderboard
• WalletCard / BalanceWidget
• PaymentMethodCard
• DepositForm / WithdrawalForm
• KYCStatusBadge / KYCChecklist
• ResponsibleGamingBanner / LimitsControl
• AgeGate / SessionTimer / RiskAlert
• SystemStatus / MaintenanceBanner

4) Pagina componente: contenuto obbligatorio

Assegnazione e quando utilizzare/non usare.
Composizione e opzioni. Dimensioni, stati, modificatori.
API. Props, eventi, slot, modalità controllate/incontrollate.
A11y. Ruoli, trucchi, comunicazioni aria, regioni lave.
i18n. Lunghezze, formati, firme localizzate.
Microcopy. Testo consigliato (CTA, suggerimenti, errori).
Esempi di codice. Valigette tipiche, edge valigette (errori, caricamento, vuoto).
I test. Matrice visiva/unit/interaction/A11y.
Anti - esempi. Errori di utilizzo frequenti.

5) Componenti chiave: specifiche veloci

5. 1 Button

Le varianti sono "primary | secondary | ghost | distruttive'Dimensioni: 'sm | md | lg'

Stati: normale, hover, focus-visual, active, loading, disabled

A11y: focus-ring visibile, «aria-busy» a «loading», «aria-pressed» a toggle

Microcopy - Azione + oggetto (Salva modifiche, Convalida)

Anti-esempio: «OK»

5. 2 Input / Field

Composizione: label, field, helper, errore, prefix/suffix

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

Pattern errori: cosa non è più come correggere («Inserisci numero + 380»...)

Slot: «preferix» (icona), «suffix» (pulsante Mostra password)

5. 3 Select / Combobox

Caratteristiche: ricerca di elenco, tastiera, virtualizzazione di elenchi lunghi

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

Risultati vuoti: "Niente trovato. Modificare la query"

5. 4 Modal / Drawer

Regole: trap focus, chiusura ESC/overlay, restituzione del focus all'iniziatore

Utilizzo: conferma dei pagamenti, regole del bonus, passi KYC

5. 5 Toast / Snackbar

Tempo: 2-4 s, nessun blocco di flusso

Regioni Lave: "aria-live =" polite "per il successo," assistenziale "per gli errori

Esempi: "Pagamento accettato. Bilanciamento aggiornato"

5. 6 EmptyState

Modello: contesto + valore + CTA + CTA secondario

Esempio: "Ci saranno i giochi preferiti quando aggiungi il primo. [Aggiungi ai preferiti] '

6) Componenti iGaming specifici e API

6. 1 GameTile

Assegnazione: scheda di gioco nella lobby/directory.
Composizione: copertina, provider, etichette (New/Hot/Jackpot/Live), RTP (opz.) Azioni veloci.

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

Stati: hover (avvio rapido), skeleton, non disponibile (regione/ora).
A11y: alt-testo, inizio tastiera, 'aria-label = «Gioca a Lightning Roulette».

6. 2 LobbyFilters

Destinazione: filtri lobby (genere, provider, limiti, volatilità).
Files - Preimpostati salvati, reimpostazione filtri, conteggio risultati.
Microcopy: Filtri, Reimposta filtri, Trovato: 128.

6. 3 BonusBanner / BonusCard

Le opzioni sono benvenuto, reload, cache, frivole, torneo.
Campi: titolo, condizioni, scadenza, CTA («Attiva bonus»).
A11y - I riferimenti alle condizioni sono leggibili, 'aria-describedby'i dettagli delle condizioni.
Anti-pattern - nascondere i vincoli chiave.

6. 4 JackpotTicker

Destinazione: il jackpot in corsa con l'aggiornamento automatico.
API: origine dati, periodo di aggiornamento, formato valuta.
A11y: 'role = status', non compromettere la lettura con lo screener.

6. 5 TournamentLeaderboard

Composizione: tabella delle posizioni, punti, premi, timer, posizione personale.
Ficci: paginazione/virtualizzazione, fissazione della riga.
A11y: «th »/« scope», colonne leggibili, navigazione freccia.

6. 6 WalletCard / BalanceWidget

Campi: saldo, fondi bloccati, saldo bonus, valuta.
Azioni Aggiungi, Rilascia, Cronologia.
Protezione - Nascondi/mostra la somma, la maschera nelle aree comuni.

6. 7 PaymentMethodCard

I campi sono il logo del provider, i limiti, le commissioni, ETA, la disponibilità regionale.
Stato non disponibile (regione/stato), in elaborazione, avviso di limite.
Microcopy: «Commissione 1,5% detenuta dal provider», «Pagamento fino a 15 minuti».

6. 8 DepositForm / WithdrawalForm

Pattern: inline-validazione, limiti sommari, suggerimenti same-method rule.
A11y - Dichiarazione di errore («assertive»), traduzione del focus al primo errore.
Campi di servizio: Origine fondi, Destinazione, se richiesto AML.

6. 9 KYCStatusBadge / KYCChecklist

Stati: 'none | basic | extended | rejected | pending'.
«Ci vorranno 2 minuti», «Foto senza riflessi, angoli e testo visibili».
CTA: "Passare la verifica", secondario: "Perché è importante? ».

6. 10 LimitsControl / ResponsibleGamingBanner

Assegnazione: limiti di depositi/rate/tempo, interruzioni, auto-esclusione.
A11u/Ton, neutrale, senza pressione, con riferimento al referto.

7) Pattern layout (Recipes)

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

8) Accessibility (A11y)

Attivo visibile sempre (ad esempio in un argomento oscuro).
Navigazione della tastiera su tutti gli elementi interattivi.
"aria-live =" polite/assertive "per toast/states.
Contrasti non inferiori a WCAG 2. 1 AA.
Il testo delle icone non è l'unico portatore di significato.
Modalità RTL, test su 320 px e leggibilità ad alta voce.

9) Localizzazione e formati

Tutte le righe personalizzate sono tramite chiavi 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

Formattazione data/valuta - utilità, non righe.
Il tono in lingue è tone-map (neutro/supporto/ufficiale).

10) Performance e qualità

Virtualizzazione degli elenchi (giochi, tabelle).
Caricamento pigro di immagini, codice spliting per pagina.
Dimensioni bandle: budget per pacchetto UI, senza dipendenze gravi.
Skeleton per la percezione della velocità, spinner è minimo.
Test: unit, snapshot visivi, interaction, A11y, E2E per flow critici.

11) Versioning e release

SemVer: patch - baghi; minor - non distruttivi; Maggiore con le migrazioni.
Release Note: token/API/comportamento, screenshot prima/dopo.
Deprecations: etichette al molo, codice-moda e regole linter.
Storybook/Playground: esempi vivi, accessibility-dashboard, RTL toggle.

12) Contributing (contributo)

RFC per il nuovo componente: il problema → le opzioni → la soluzione → A11y → i18n → API → i rischi.
Foglio di assegno PR: doca, storis, test, snapshot visivi, contrasti, i18n, dark/RTL.
Definition of Done: componente + documentazione + test + esempi di pattern.

13) MVP set e road map

• 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) Esempi di microcopy (Incolla pronta)

CTA: Salva modifiche, Esegui verifica, Aggiungi metodo di pagamento.

Errore: Formato data non valido. Usate il DD. MM. GGG. ", File troppo grande (max. 10 MB)

Successo: "Pagamento accettato. Saldo aggiornato. «, «Pronto! I documenti sono stati controllati"

Non è stato trovato nulla "Per "{query}". Reimpostare i filtri o aggiornare la query

15) Anti-pattern

Logica aziendale all'interno dei componenti UI (che rompe l'utilizzo).
Un trucco invisibile o una dipendenza del significato solo dal colore.
Righe ricucite nel codice dei componenti (senza i18n).
Violazione della semantica (pulsante su «div», elenchi senza «ul/ol/li»).
Opzioni senza regole chiare (riproduzione «ButtonPrimaryBlueBig2»).

16) Assegno fogli

• Assegnazione, opzioni, API descritte.
• A11y: ruolo, attivo, attributi aria, contrasto.
• i18n: tutte le righe sono state rilasciate, testate le lingue lunghe e RTL.
• Storis/demo: normale, caricamento, errori, vuoto.
• Test: unit + visivo + interaction + A11y.
• Nessuna logica aziendale, solo UI/comportamento.

• C'è uno schema di componenti e un ordine di attivazione.
• Definite microcopy e testi di errori/successi.
• Le metriche chiave sono state misurate (conversione del passo, errore rate, time-to-complete).

17) Scheletro del documento per il componente (modello)

Nome e destinazione

Quando usare/non usare

Opzioni e stati

API (Props, Eventi, Slot)

Accessibility (ruolo, tastiera, aria, contrasto)

i18n (chiavi, formati, lunghezze, RTL)

Microcopy (esempi)

Esempi di codice (tipici e edge)

Matrice di prova

Anti-esempi

Totale

Il Gamble Hub UI non è solo un insieme di blocchi, ma una disciplina: i token sono componenti di pattern , la documentazione della metrica. Seguendo questo gyde, i comandi consegnano rapidamente i fili, gli utenti ottengono un'interfaccia prevedibile e accessibile e il prodotto è scalabile senza alcun debito visivo. Se necessario, assemblare le prime pagine del MVP con esempi e chiavi i18n.