Gamble Hub UI Komponent Kitabxanası

1) Məqsədlər və prinsiplər

Niyə: phich tədarükünü sürətləndirmək, konsistent UX təmin etmək və dəstəyi sadələşdirmək.

• Semantika və neytrallıq. Komponent biznes məntiqi daxil etmədən UI problemini həll edir.
• A11y-by-default. Rollar, fokus halqaları, aria atributları və kontrast - komponentlərə tikilir.
• i18n-first. Sətir uzunluğu, ədədi formatlar, RTL - qutudan nəzərə alınır.
• Temizləşmə. Açıq/qaranlıq mövzular və markalı aksentlər tokenlər vasitəsilə.
• Miqyaslı. Vahid API, minor relizlərin sabitliyi, major miqrasiyası.

2) Əsaslar: dizayn-tokenlər (foundation)

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

Qaydalar: semantik tokenlər (məsələn, 'color. accent. success ') komponentləri istifadə; palitra - daxili.

3) Komponentlərin kateqoriyaları

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

• GameTile (oyun kartı)
• ProviderBadge
• JackpotTicker
• LiveBadge (canlı masa/şou)
• LobbyFilters (provayder/janr/limit)
• BonusBanner / BonusCard
• MissionProgress / AchievementBadge
• TournamentLeaderboard
• WalletCard / BalanceWidget
• PaymentMethodCard
• DepositForm / WithdrawalForm
• KYCStatusBadge / KYCChecklist
• ResponsibleGamingBanner / LimitsControl
• AgeGate / SessionTimer / RiskAlert
• SystemStatus / MaintenanceBanner

4) Komponent səhifəsi: məcburi məzmun

Təyinat və nə vaxt istifadə etmək/istifadə etmək.
Tərkibi və variantları. Ölçülər, şərtlər, modifikatorlar.
API. Props, hadisələr, slots, nəzarət/nəzarətsiz rejimlər.
A11y. Rollar, fokus, aria-links, live-regionlar.
i18n. Uzunluqlar, formatlar, lokallaşdırıla bilən imzalar.
Microcopy. Tövsiyə olunan mətnlər (CTA, ipuçları, səhvlər).
Kod nümunələri. Tipik cases, edge cases (səhvlər, yükləmə, boş).
Testlər. Matris vizual/vahid/interaction/A11y.
Anti-nümunələr. Tez-tez istifadə səhvləri.

5) Əsas komponentlər: sürətli spesifikasiyalar

5. 1 Button

Variantlar: 'primary | secondary | ghost | destructive' Ölçülər: 'sm | md | lg'

Hallar: normal, hover, focus-visible, active, loading, disabled

A11y: görünən focus-ring, 'aria-busy' ilə 'loading', 'aria-pressed' üçün toggle

Microcopy: hərəkət + obyekt («Dəyişikliklər saxla», «Yoxlama keçmək»)

Anti-nümunə: «OK»

5. 2 Input / Field

Tərkibi: label, field, helper, error, prefix/suffix

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

Səhv nümunəsi: səhv nə + necə düzəldilir («+ 380 formatında nömrəni daxil edin»...)

Slots: 'prefix' (ikon), 'suffix' («parolu göstər» düyməsi)

5. 3 Select / Combobox

Xüsusiyyətlər: siyahı axtarış, klaviatura, uzun siyahıların virtuallaşdırılması

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

Boş nəticələr: "Heç bir şey tapılmadı. Sorğunu dəyişdirin"

5. 4 Modal / Drawer

Qaydalar: trap focus, ESC/overlay-in bağlanması, fokusun təşəbbüsçüyə qaytarılması

Istifadə: ödəniş təsdiqi, bonus qaydaları, KYC addımlar

5. 5 Toast / Snackbar

Vaxt: 2-4s, heç bir blok axını

Həyat bölgələri: 'aria-live = "polite' uğur üçün, 'assertive' səhvlər üçün

Nümunələr: "Ödəniş qəbul edildi. Balans yenilənib"

5. 6 EmptyState

Şablon: kontekst + dəyər + CTA + ikincil CTA

Nümunə: "Burada birinci əlavə etdiyiniz zaman seçilmiş oyunlar olacaq. [Favoritlərə əlavə et]"

6) iGaming komponentləri: spesifiklik və API

6. 1 GameTile

Təyinat: lobbi/kataloq oyun kartı.
Tərkibi: üz qabığı, provayder, etiketlər (New/Hot/Jackpot/Live), RTP (ops.) , sürətli hərəkətlər.

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

Hallar: hover (sürətli başlanğıc), skeleton, əlçatmaz (region/vaxt).
A11y: alt-mətn, klaviatura başlanğıcı, 'aria-label =' Lightning Roulette oynayır '.

6. 2 LobbyFilters

Təyinatı: lobbi filtrləri (janr, provayder, limitlər, dəyişkənlik).
Fiçlər: saxlanılan presetlər, filtrlərin sıfırlanması, nəticələrin sayğacı.
Microcopy: «Filtrlər», «Filtrləri sıfırla», «Tapıldı: 128».

6. 3 BonusBanner / BonusCard

Seçimlər: salamlama, reload, cashback, frispins, turnir.
Sahələr: başlıq, şərtlər, etibarlılıq müddəti, CTA («Bonusu aktivləşdirin»).
A11y: şərtlərə istinadlar oxunur, 'aria-describedby' → şərtlərin təfərrüatları.
Anti-model: əsas məhdudiyyətləri gizlətmək.

6. 4 JackpotTicker

Məqsəd: avtomatik yeniləmə ilə jekpotun qaçış məbləği.
API: məlumat mənbəyi, yeniləmə müddəti, valyuta formatı.
A11y: 'role =' status ', skrinrider tərəfindən oxunuşu pozmayın.

6. 5 TournamentLeaderboard

Tərkibi: mövqelər cədvəli, xallar, mükafatlar, taymer, öz mövqeyi.
Fiçlər: paginasiya/virtuallaşdırma, öz xəttini bağlamaq.
A11y: 'th '/' scope', oxunan sütunlar, oxlarla naviqasiya.

6. 6 WalletCard / BalanceWidget

Sahələr: balans, bloklanmış vəsait, bonus balans, valyuta.
Fəaliyyət: «Doldurmaq», «Çıxarmaq», «Tarix».
Təhlükəsizlik: gizlətmək/ümumi zonalarda gizli məbləği göstərmək.

6. 7 PaymentMethodCard

Sahələr: provayder loqosu, limitlər, komissiyalar, ETA, regional mövcudluq.
Hallar: əlçatmaz (region/status), emal, limit xəbərdarlığı.
Microcopy: «1,5% komissiya provayder tərəfindən tutulur», «Ödəniş - 15 dəqiqəyə qədər».

6. 8 DepositForm / WithdrawalForm

Nümunələr: inline-validasiya, ümumi limitlər, same-method rule ipuçları.
A11y: səhv elan ('assertive'), fokusun ilk xətaya çevrilməsi.
Xidmət sahələri: «Vəsait mənbəyi», «Təyinat», əgər AML tələb olunarsa.

6. 9 KYCStatusBadge / KYCChecklist

Hallar: 'none | basic | extended | rejected | pending'.
Mətnlər: «Bu ~ 2 dəqiqə çəkəcək», «Heç bir parıltı, görünən bucaqlar və mətn».
CTA: "Yoxlama keçmək", ikinci: "Niyə vacibdir? ».

6. 10 LimitsControl / ResponsibleGamingBanner

Məqsəd: depozitlər/dərəcələr/vaxt limitləri, fasilələr, özünü istisna.
A11u/Ton: neytral, təzyiq olmadan, istinad ilə.

7) Düzən nümunələri (Recipes)

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

8) Accessibility (A11y)

Görünən fokus həmişə (o cümlədən qaranlıq mövzuda).
Bütün interaktiv elementlər üzrə klaviatura ilə naviqasiya.
'aria-live = «polite/assertive»' tost/status üçün.
WCAG 2-dən aşağı olmayan təzadlar. 1 AA.
İkonalardakı mətn yeganə məna daşıyıcısı deyil.
RTL rejimləri, 320 px yoxlama və oxuma qabiliyyəti.

9) Lokalizasiya və formatlar

Bütün xüsusi sətirlər - i18n-açarları vasitəsilə.

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

Tarixlərin/valyutaların formatlaşdırılması - utilitlərlə, sətirlərlə deyil.
Dillərdə ton - tone-map vasitəsilə (neytral/dəstəkləyici/rəsmi).

10) Performans və keyfiyyət

Siyahıların virtuallaşdırılması (oyunlar, cədvəllər).
tənbəl yükləmə illüstrasiyalar, kod-spliting səhifələr.
Bandla ölçüləri: UI paketi üçün büdcə, heç bir ağır asılılıq.
Skeleton sürəti qavramaq üçün, spinner - minimal.
Testlər: vahid, vizual snapshot, interaction, A11y, kritik flow üçün E2E.

11) Version və buraxılışlar

SemVer: patch - yük; minor - dağıdıcı deyil; major - miqrasiya ilə.
Release Notes: tokenlər/API/davranış, əvvəl/sonra ekran görüntüləri.
Deprecations: dock qeydlər, kod-moda və linter-qaydalar.
Storybook/Playground: canlı nümunələr, accessibility panel, RTL toggle.

12) Contributing (əmanət)

RFC yeni komponent üçün: problem → variantları → seçilmiş həll → A11y → i18n → API → risklər.
PR çek siyahısı: doka, hekayələr, testlər, vizual snapshotlar, təzadlar, i18n, dark/RTL.
Definition of Done: komponent + sənədləşmə + testlər + nümunə nümunələri.

13) MVP dəsti və yol xəritəsi

• 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) Microcopy nümunələri (hazır əlavələr)

CTA: «Dəyişiklikləri saxla», «Yoxlamadan keçin», «Ödəniş üsulunu əlavə et».

Səhvlər: "Səhv tarix formatı. DD istifadə edin. MM. GGGG. ", "Fayl çox böyükdür (maksimum 10 MB)"

Uğur: "Ödəniş qəbul edildi. Balans yenilənib. «, «Bitdi! Sənədlər yoxlanılıb"

Boş hallar: «{query}» üçün heç bir şey tapılmadı. Filtrləri sıfırlayın və ya sorğunu dəqiqləşdirin"

15) Anti-nümunələr

UI komponentləri daxilində biznes məntiqi (həddindən artıq istifadəni pozur).
Görünməz fokus və ya mənanın yalnız rəngdən asılılığı.
Komponent koduna tikilmiş sətirlər (i18n olmadan).
Semantikanın pozulması ('div' düyməsi, 'ul/ol/li' olmadan siyahılar).
Dəqiq qaydaları olmayan variantlar ('ButtonPrimaryBlueBig2' çoxalması).

16) Çek vərəqləri

• təyinat, variantları, API təsvir.
• A11y: rol, fokus, aria atributları, kontrast.
• i18n: Bütün sətirlər çıxarılır, uzun dillər və RTL yoxlanılır.
• Hekayə/demo: adi, yükləmə, səhv, boş.
• Testlər: vahid + vizual + interaction + A11y.
• Heç bir iş məntiqi, yalnız UI/davranış.

• Komponentlərin sxemi və fokus qaydası var.
• Microcopy və səhv/uğur mətnləri müəyyən edilmişdir.
• Ölçülmüş əsas metriklər (addım dönüşümü, error rate, time-to-complete).

17) Komponent üçün sənəd skeleti (şablon)

Adı və təyinatı

Nə zaman istifadə etmək/istifadə etmək

Variantlar və şərtlər

API (props, hadisələr, slots)

Accessibility (rol, klaviatura, aria, kontrast)

i18n (açarlar, formatlar, uzunluqlar, RTL)

Microcopy (nümunələr)

Kod nümunələri (tipik və edge)

Test matrisi

Anti-nümunələr

Yekun

Gamble Hub UI yalnız bir blok dəsti deyil, nizam-intizamdır: tokenlər → komponentlər → nümunələr → sənədlər → metriklər. Bu bələdçiyə əməl edərək, komandalar daha sürətli çini çatdırır, istifadəçilər proqnozlaşdırıla bilən və əlverişli interfeys əldə edirlər və məhsul vizual borc olmadan ölçülür. Lazım gələrsə, MVP dəsti və i18n açarları ilə dokun ilk səhifələrini toplayacağam.