Biblioteca componentelor Gamble Hub UI

1) Obiective și principii

De ce: Accelerați livrarea caracteristicilor, oferiți UX consecvent și simplificați suportul.

• Semantică şi neutralitate. Componenta rezolvă problema UI fără cusut în logica de afaceri.
• A11y-by-default. Rolurile, inelele de focalizare, atributele ariei și contrastul sunt cusute în componente.
• i18n-primul. Lungimi de linie, formate numerice, RTL - ia în considerare din cutie.
• Temizare. Teme ușoare/întunecate și accente de marcă prin jetoane.
• Scalabilitate. API-uri uniforme, stabilitatea eliberărilor minore, migrațiile în condiții majore.

2) Motive: jetoane de proiectare (fundație)

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

Reguli: jetoane semantice (ex. "culoare. accent. succesul ") sunt utilizate de componente; paleta - internă.

3) Categorii de componente

1. Базовые (Primitive): Buton, Icon, Tipografie, Link, Insignă, Divizor, Avatar.
2. Формы: Intrare, PasswordInput, NumberInput, Select, Combobox, DatePicker, Casetă de selectare, Radio, Switch, Slider, Textarea, FileUpload.
3. Navigare: AppBar, Tabs, Breadcrumbs, Paginare, Sertar/Bara laterală, Stepper.
4. Фидбек: Alert, InlineError, Tooltip, Toast, Snackbar, Modal, Popover, Skeleton, Progress, StatusDot.
5. Date și tabele: Tabel, DataList, Card, Acordeon, Tag, EmptyState.

• GameTile (carte de joc)
• FurnizorInsignă
• JackpotTicker
• LiveBadge (live table/show)
• LobbyFilters (furnizor/gen/limită)
• BonusBanner/BonusCard
• MisiuneProgres/RealizareInsignă
• TournamentLeaderboard
• WalletCard/BalanceWidget
• PlatăMetodăCard
• Formular de depunere/retragere
• KYCStatusBadge/KYCChecklist
• ResponsibleGamingBanner/LimiteControl
• AgeGate/SessionTimer/RiskAlert
• SystemStatus/IntretinereBanner

4) Pagina componentă: Conținut necesar

Scopul și când să utilizați/să nu utilizați.
Compoziție și variante. Dimensiuni, stări, modificatori.
API. Recuzită, evenimente, sloturi, moduri controlate/necontrolate.
A11y. Roluri, concentrare, conexiuni Aria, regiuni vii.
i18n. Lungimi, formate, semnături localizabile.
Microcopie. Texte recomandate (CTA, sugestii, erori).
Exemple de coduri. Cazuri tipice, cazuri de margine (erori, încărcare, gol).
Teste. matrix/unit/interaction/A11y vizuală.
Anti-exemple. Erori frecvente de utilizare.

5) Componente cheie: Specificații rapide

5. 1 Buton

Variante: 'primară | secundară | fantomă | distructivă' Dimensiuni: 'sm | md | lg'

State: normal, hover, focus-vizibil, activ, încărcare, cu handicap

A11y: inel de focalizare vizibil, „aria-ocupat” pentru „încărcare”, „aria-presat” pentru comutare

Microcopie: acţiune + obiect (Salvare modificări, Verificare)

Anti-exemplu: „OK”

5. 2 Intrare/câmp

Ingrediente: etichetă, câmp, ajutor, eroare, prefix/sufix

A11y: 'aria-invalid', 'aria-descriptby', связка 'for/id'

Model de eroare: ce este greșit + cum să se stabilească („Introduceți numărul în formatul + 380”..)

Sloturi: 'prefix' (pictogramă), 'sufix' (buton „arată parola”)

5. 3 Selectează/Combobox

Caracteristici: căutare listă, tastatură, virtualizare listă lungă

A11y: 'rol =' combobox '', 'aria-expanded', 'aria-activedescendent'

Rezultate necompletate: "Nu s-a găsit nimic. Schimbă cererea"

5. 4 Modal/sertar

Reguli: focalizare capcană, închidere CES/suprapunere, focalizare retur la inițiator

Utilizare: Confirmări de plată, Reguli de rabat, Pași KYC

5. 5 Toast/Snackbar

Timp: 2-4 s, fără blocare a debitului

Regiuni vii: 'aria-live =' politicos '' pentru succes ',' asertiv "'pentru greșeli

Exemple: "Plata acceptată. Soldul a fost actualizat"

5. 6 EmptyState

Format: context + valoare + CTA + CTA secundar

Exemplu: "Jocurile selectate vor apărea aici când îl adăugați pe primul. [Adaugă la favorite]"

6) componente iGaming: specificul și API

6. 1 GameTile

Scop: carte de joc în lobby/catalog.
Compoziție: copertă, furnizor, etichete (New/Hot/Jackpot/Live), RTP (en-gros), acțiune rapidă.

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

State: hover (start rapid), schelet, indisponibil (regiune/timp).
A11y: alt-text, tastatură start, 'aria-label =' Play Lightning Roulette ''.

6. 2 LobbyFiltre

Scop: filtre de lobby (gen, furnizor, limite, volatilitate).
Caracteristici: presetări salvate, filtre de resetare, contor de rezultate.
Microcopie: „Filtre”, „Resetare filtre”, „Găsit: 128”.

6. 3 BonusBanner/BonusCard

Opțiuni: bun venit, reîncărcare, cashback, freespins, turneu.
Campuri: antet, conditii, perioada de valabilitate, CTA („Activeaza bonus”).
A11y: referințele la condiții pot fi citite, „aria-descriptive” → detalii ale condițiilor.
Anti-model: Ascundeți constrângerile cheie.

6. 4 JackpotTicker

Scop: Refresh automat jackpot-ul rulează suma.
API: sursa de date, perioada de actualizare, formatul valutar.
A11y: „rol =” stare „”, nu încalcă lizibilitatea cititorului de ecran.

6. 5 TournamentLeaderboard

Compoziție: tabel de poziție, puncte, premii, cronometru, poziție proprie.
Caracteristică: paginare/virtualizare, fixarea liniei.
A11y: „th ”/„ scope”, coloane lizibile, navigare săgeată.

6. 6 WalletCard/BalanceWidget

Domenii: echilibru, fonduri blocate, sold bonus, valută.
Acțiuni: „Reîncărcare”, „Afișare”, „Istorie”.
Securitate: ascunde/arată suma, mascarea în zonele comune.

6. 7 Modalitate de platăCard

Domenii: logo furnizor, limite, comisioane, ETA, disponibilitate regională.
Statele: nu sunt disponibile (regiune/statut), în proces, limită de avertizare.

Microcopie: "1. 5% comision este reținut de către furnizor", "Plata - până la 15 minute"

6. 8 DepositForm/RetragereForm

Modele: validare inline, limite de cantitate, solicită regula aceleiași metode.
A11y: declararea erorilor ('asertive'), orientarea focalizării către prima eroare.
Câmpurile de servicii: „Sursa de fonduri”, „Scop”, dacă este necesară AML.

6. 9 KYCStatusBadge/KYCChecklist

Statele: „nici unul | | de bază prelungit | respins | în așteptare”.
Texte: „Va dura ~ 2 minute”, „Fotografia fără orbire, colțurile și textul sunt vizibile”.
CTA: "Verificați", secundar: "De ce este important? ».

6. 10 LimiteControl/ResponsibleGamingBanner

Scop: limite de depozite/rate/timp, pauze, auto-excludere.
А11у/Tone: neutru, fără presiune, cu referire la ajutor.

7) Modele de aspect (Rețete)

Înregistrare/ACC: Formular Stepper + InlineError + PageAlert + SuccessToast.
Депозит: PaymentMethodCard + CantitateInput + LimiteSugt + ConfirmModal + StatusToast.
Лобби: SearchBar + LobbyFilters + GameGrid (из GameTile) + Pagination + EmptyState.
Турнир: TournamentLeaderboard + MissionProgress + BonusBanner.
Responsabil: ResponsibleGamingBanner + LimiteControl + FAQ-link.

8) Accesibilitate (A11y)

Focalizare vizibilă întotdeauna (inclusiv într-o temă întunecată).
Tastatură de navigare prin toate elementele interactive.
'aria-live = "politicos/asertiv" "pentru toasturi/stări.
Contraste nu mai mici decât WCAG 2. 1 AA.
Textul din icoane nu este singurul purtător de înțeles.
Moduri RTL, verificare 320 px și lizibilitate cu voce tare.

9) Localizare și formate

Toate șirurile de utilizatori sunt prin tastele 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

Formatarea datelor/valutelor - cu utilități, nu șiruri.
Ton în limbi - prin ton-map (neutru/susținător/oficial).

10) Performanță și calitate

Lista virtualizare (jocuri, tabele).
Încărcarea leneșă a ilustrațiilor, despicarea codurilor pe pagini.
Dimensiuni pachet: bugetul pachetului UI, fără dependențe grele.
Schelet pentru percepția vitezei, spinners - minim.
Teste: unitate, instantanee vizuale, interacțiune, A11y, E2E pentru fluxul critic.

11) Versioning și eliberări

SemVer: patch-uri - bug-uri; minor - nedistructiv; major - cu migrații.
Note de lansare: jetoane/API/comportament, înainte/după capturi de ecran.
Deprecieri: marcaje de andocare, moduri de cod și reguli de linter.
Storybook/Loc de joacă: exemple live, panou de accesibilitate, comutare RTL.

12) Contribuind

RFC pe o componentă nouă: o problemă opțiunile decizia aleasă i18n API riscuri.
Lista de verificare PR: docuri, povești, teste, instantanee vizuale, contraste, i18n, dark/RTL.
Definiția Done: componentă + documentație + teste + exemple de model.

13) Set MVP și foaie de parcurs

• Buton, Intrare, Selectați, Casetă de selectare, Radio, Switch, Modal, Toast, Tooltip, Progress, Skeleton, Card, EmptyState, File, Paginare, Breadcrumbs, Tabel, GameTile, LobbyFilters, BonusBanner, WalletCard, PaymentMethodCard, DepositForm, KYCStatusBadge.

Далее: TournamentLeaderboard, JackpotTicker, MissionProgress, LimiteControl, SystemStatus, Sertar/Bară laterală, DatePicker, Combobox, FileUpload.

14) Exemple de microcopie (inserții finite)

CTA: „Salvați modificări”, „Verificați”, „Adăugați o metodă de plată”.

Erori: "Format de dată nevalid. Utilizați DD. MM. YYYY "., "Fișierul este prea mare (max. 10 MB)"

Succes: "Plata acceptată. Echilibru actualizat. ", Gata! Documente verificate"

Goală afirmă: "Prin "{query}" nu a fost găsit nimic. Resetați filtrele sau rafinați interogarea"

15) Anti-modele

Logica de afaceri în cadrul componentelor UI (pauze de utilizare excesivă).
Concentrarea invizibilă sau dependența de sens numai pe culoare.
Șiruri încorporate în codul componentei (fără i18n).
Încălcarea semanticii (butonul de pe „div”, listele fără „ul/ol/li”).
Variante fără reguli clare (multiplicare „ButtonPrimaryBlueBig2”).

16) Liste de verificare

• Scop, variante, API sunt descrise.
• A11y: rol, concentrare, atribute Aria, contrast.
• i18n: toate liniile sunt redate, limbile lungi și RTL sunt verificate.
• Poveste/Demo: Normal, Descărcare, Eroare, Gol.
• Teste: unitate + vizual + interacțiune + A11y.
• Nici o logică de afaceri, doar UI/comportament.

• Există o schemă de componente și o ordine de focalizare.
• Microcopia și textele de eroare/succes sunt definite.
• Măsurarea măsurătorilor cheie (conversia treptată, rata de eroare, timpul până la finalizare).

17) Scheletul documentului pentru componentă (șablon)

Nume și scop

Când se utilizează/nu se utilizează

Opțiuni și stări

API (recuzită, evenimente, sloturi)

Accesibilitate (rol, tastatură, arie, contrast)

i18n (chei, formate, lungimi, RTL)

Microcopie (exemple)

Mostre de cod (tipic și muchie)

Matricea de încercare

Anti-exemple

Total

Gamble Hub UI nu este doar un set de blocuri, ci o disciplină: token-uri → componente → modele → documentație → metrică. Urmând acest ghid, echipele oferă funcții mai rapide, utilizatorii obțin o interfață previzibilă și accesibilă, iar produsul scalează fără datorii vizuale. Dacă este necesar, voi colecta primele pagini ale docului de MVP-set cu exemple și tastele i18n.