Gamble Hub UI komponent kutubxonasi

1) Maqsad va prinsiplar

Nima uchun: fich yetkazib berishni tezlashtirish, konsistent UXni ta’minlash va qo’llab-quvvatlashni soddalashtirish.

• Semantika va betaraflik. Komponent UI vazifasini biznes mantig’ini qo’shmasdan hal qiladi.
• A11y-by-default. Rollar, fokus halqalar, aria-atributlar va kontrast - komponentlarga tikilgan.
• i18n-first. Satr uzunligi, raqamli formatlar, RTL - qutidan hisobga olinadi.
• Temizatsiya. Yorqin/qorong’u mavzular va brend urg’ulari tokenlar orqali.
• Kattalashtirish. Yagona API, minor relizlar barqarorligi, major migratsiyasi.

2) Asoslari: dizayn-tokenlar (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 }
}

Qoidalar: semantik tokenlar (masalan,’color. accent. success’) komponentlar bilan foydalaniladi; palitra - ichki palitra.

3) Komponentlar toifalari

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

• GameTile
• ProviderBadge
• JackpotTicker
• LiveBadge (jonli stol/shou)
• 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 sahifasi: majburiy mazmuni

Vazifa va qachon foydalanish/ishlatmaslik.
Tarkibi va variantlari. O’lchamlari, holatlari, modifikatorlari.
API. Propslar, hodisalar, slotlar, nazorat qilinadigan/nazorat qilinmaydigan rejimlar.
A11y. Rollar, fokus, aria-aloqalar, hayot-mintaqalar.
i18n. Uzunliklar, formatlar, lokalizatsiya qilinadigan imzolar.
Microcopy. Tavsiya etilgan matnlar (CTA, maslahatlar, xatolar).
Kod namunalari. Namunaviy keyslar, edge-keyslar (xatolar, yuklash, boʻsh).
Testlar. Vizual matritsasi/unit/interaction/A11y.
Anti-misollar. Foydalanish xatolari.

5) Asosiy komponentlar: tezkor spetsifikatsiyalar

5. 1 Button

Variantlar: ’primary | secondary | ghost | destructive’O’lchamlari:’sm | md | lg ’

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

A11y: koʻrinadigan focus-ring,’aria-busy’bilan’loading’,’aria-pressed’uchun toggle

Microcopy: amal + obyekt («Oʻzgarishlarni saqlash», «Tasdiqlash»)

Anti-misol: «OK»

5. 2 Input / Field

Tarkibi: label, field, helper, error, prefix/suffix

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

Xato namunasi: nima notoʻgʻri + qanday tuzatish mumkin («Raqamni + 380 formatiga kiriting»...)

Slotlar: ’prefix’(ikonka),’suffix’(maxfiy soʻzni koʻrsatish tugmasi)

5. 3 Select / Combobox

Xususiyatlar: ro’yxat bo’yicha qidirish, klaviatura, uzun ro’yxatlarni virtuallashtirish

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

Boʻsh natijalar: "Hech narsa topilmadi. Soʻrovni oʻzgartiring"

5. 4 Modal / Drawer

Qoidalar: trap focus, ESC/overlay orqali yopish, fokusni tashabbuskorga qaytarish

Foydalanish: to’lovlarni tasdiqlash, bonus qoidalari, KYC-qadamlar

5. 5 Toast / Snackbar

Vaqt: 2-4 s, oqimni to’smasdan

Hayot mintaqalari: ’aria-live =’polite’muvaffaqiyatlar uchun,’assertive’xatolar uchun

Misollar: "To’lov qabul qilindi. Balans yangilandi"

5. 6 EmptyState

Namuna: kontekst + qiymat + CTA + ikkilamchi CTA

Misol: "Birinchisini qoʻshganingizda, bu yerda tanlangan oʻyinlar paydo boʻladi. [Tanlanganlarga qoʻshish]"

6) iGaming-komponentlar: o’ziga xos xususiyatlar va API

6. 1 GameTile

Maqsadi: lobbi/katalogdagi oʻyin kartochkasi.
Tarkibi: muqovasi, provayderi, belgilari (New/Hot/Jackpot/Live), RTP (opts.) , tezkor harakatlar.

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

Holatlar: hover (tez boshlash), skeleton, mavjud emas (mintaqa/vaqt).
A11y: alt-matn, klaviatura boshlanishi,’aria-label = «Lightning Roulette o’ynash».

6. 2 LobbyFilters

Maqsadi: lobbi filtrlari (janr, provayder, limitlar, o’zgaruvchanlik).
Fichlar: saqlangan presetlar, filtrlarni qayta tiklash, natijalar hisoblagichi.
Microcopy: «Filtrlar», «Filtrlarni olib tashlash», «Topildi: 128».

6. 3 BonusBanner / BonusCard

Variantlar: tabrik, reload, keshbek, frispinlar, turnir.
Maydonlar: sarlavha, shartlar, amal qilish muddati, CTA («Bonusni faollashtirish»).
A11y: shartlarga havolalar,’aria-describedby’→ shartlar tafsilotlari.
Anti-pattern: asosiy cheklovlarni yashirish.

6. 4 JackpotTicker

Maqsadi: avtomatik yangilanish bilan jekpotning yuguruvchi summasi.
API: maʼlumot manbai, yangilanish davri, valyuta formati.
A11y:’role =’status’, skrining bilan oʻqishni buzmaslik.

6. 5 TournamentLeaderboard

Tarkibi: pozitsiyalar jadvali, ochkolar, sovrinlar, taymer, o’z pozitsiyasi.
Fichlar: paginatsiya/virtuallashtirish, o’z satrini mustahkamlash.
A11y:’th ’/’ scope’, oʻqiladigan ustunlar, koʻrsatgichlar orqali navigatsiya.

6. 6 WalletCard / BalanceWidget

Maydonlar: balans, bloklangan mablag’lar, bonus balansi, valyuta.
Harakatlar: «Toʻldirish», «Chiqarish», «Tarix».
Xavfsizlik: umumiy zonalarda yashirish/koʻrsatish.

6. 7 PaymentMethodCard

Maydonlar: provayder logotipi, limitlar, komissiyalar, ETA, hududiy foydalanish imkoniyati.
Holatlar: mavjud emas (hudud/maqom), ishlov berilmoqda, chegaralarni ogohlantirish.
Microcopy: «1,5% komissiya provayder tomonidan ushlab qolinadi», «To’lov - 15 daqiqagacha».

6. 8 DepositForm / WithdrawalForm

Patternlar: inline-validatsiya, summa limitlari, same-method rule maslahatlar bilan.
A11y: xato eʼlon qilish (’assertive’), fokusni birinchi xatoga tarjima qilish.
Xizmat maydonlari: «Mablag’manbai», «Maqsad», agar AML talab qilinsa.

6. 9 KYCStatusBadge / KYCChecklist

Holatlar:’none | basic | extended | rejected | pending’.
Matnlar: «Bu ~ 2 daqiqa davom etadi», «Yorqinliksiz surat, burchaklar va matn ko’rinadi».
CTA: "Tekshiruvdan o’tish", ikkinchisi: "Nega bu muhim? ».

6. 10 LimitsControl / ResponsibleGamingBanner

Maqsadi: depozitlar/stavkalar/vaqt limitlari, tanaffuslar, o’z-o’zidan chiqarib tashlash.
A11u/Ton: neytral, bosimsiz, ma’lumotnomaga tayanib.

7) Tuzilma patternlari (Recipes)

Ro’yxatdan o’tish/KS: Stepper + Form + InlineError + PageAlert + SuccessToast.
Депозит: PaymentMethodCard + AmountInput + LimitsHint + ConfirmModal + StatusToast.
Лобби: SearchBar + LobbyFilters + GameGrid (из GameTile) + Pagination + EmptyState.
Турнир: TournamentLeaderboard + MissionProgress + BonusBanner.
Mas’uliyatli o’yin: ResponsibleGamingBanner + LimitsControl + FAQ-link.

8) Accessibility (A11y)

Har doim koʻrinadigan fokus (shu jumladan qorong’u mavzuda).
Barcha interaktiv elementlar boʻyicha klaviatura yordamida navigatsiya qilish.
’aria-live =’ polite/assertive’’tost/maqom uchun.
WCAG 2 dan past bo’lmagan kontrastlar. 1 AA.
Ikonkalardagi matn yagona ma’no manbai emas.
RTL rejimlari, 320 px tekshirish va ovozli o’qish qobiliyati.

9) Mahalliylashtirish va formatlar

Barcha foydalanuvchi satrlari - i18n kalitlari orqali.

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

Sanalarni/valyutalarni formatlash - satrlar bilan emas, balki utilitlar bilan.
Tillarda - tone-map orqali (neytral/qo’llab-quvvatlovchi/rasmiy).

10) Spektakl va sifat

Roʻyxatlarni (oʻyinlar, jadvallar) virtuallashtirish.
Rasmlarni dangasa yuklash, sahifalar bo’yicha kod-spliting.
Bandlning o’lchamlari: og’ir qaramliklarsiz UI paketiga budjet.
Tezlikni sezish uchun Skeleton, spinner - minimal.
Testlar: yunit, vizual snapshotlar, interaction, A11y, tanqidiy floular uchun E2E.

11) Versiyalash va relizlar

SemVer: patch - bagi; minor - buzmaydigan; major - migratsiyalar bilan.
Release Notes: tokenlar/API/xulq-atvor, skrinshotlar oldin/keyin.
Deprecations: dokdagi belgilar, kod-modalar va linter-qoidalar.
Storybook/Playground: jonli misollar, accessibility paneli, RTL toggle.

12) Contributing (hissa)

RFC yangi komponent uchun: muammo → variantlar → tanlangan yechim → A11y → i18n → API → xavflar.
PR chek-listi: doka, storis, testlar, vizual snapshotlar, kontrastlar, i18n, dark/RTL.
Definition of Done: komponent + hujjatlar + testlar + pattern namunalari.

13) MVP-to’plam va yo’l xaritasi

• 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) Misollar microcopy (tayyor qo’shimchalar)

CTA: «O’zgartirishlarni saqlash», «Tekshiruvdan o’tish», «To’lov usulini qo’shish».

Xatolar: "Xato sana formati. DDdan foydalaning. MM. GGGG ", "Fayl juda katta (maksimal 10 MB)"

Muvaffaqiyat: "To’lov qabul qilindi. Balans yangilandi. «, «Tayyor! Hujjatlar tekshirildi"

«{query}» uchun hech narsa topilmadi. Filtrlarni olib tashlang yoki soʻrovni aniqlashtiring"

15) Anti-patternlar

UI-komponentlar ichidagi biznes-mantiq (qayta foydalanishni buzadi).
Koʻrinmas fokus yoki maʼnoning faqat rangga bogʻliqligi.
Komponent kodiga tikilgan satrlar (i18n’siz).
Semantikaning buzilishi (’div’tugmasi,’ul/ol/li’-siz ro’yxatlar).
Aniq qoidalarsiz variantlar (’ButtonPrimaryBlueBig2’nusxasi).

16) Chek varaqlari

• Maqsad, variantlar, API tavsiflangan.
• A11y: rol, fokus, aria atributlari, kontrast.
• i18n: barcha satrlar chiqarildi, uzun tillar va RTL tekshirildi.
• Hikoya/demo: oddiy, yuklash, xatolar, bo’sh.
• Testlar: birlik + vizual + interaction + A11y.
• Biznes mantig’i yo’q, faqat UI/xulq-atvor.

• Komponent sxemasi va fokus tartibi mavjud.
• Aniqlangan microcopy va xato/muvaffaqiyat matnlari.
• Asosiy metriklar o’lchangan (qadam konvertatsiyasi, error rate, time-to-complete).

17) Komponent uchun hujjat skeleti (shablon)

Nomi va vazifasi

Qachon ishlatish/ishlatmaslik

Variantlar va holatlar

API (propslar, hodisalar, slotlar)

Accessibility (rol, klaviatura, aria, kontrast)

i18n (kalitlar, formatlar, uzunliklar, RTL)

Microcopy (misollar)

Kod namunalari (namunaviy va edge)

Test matritsasi

Anti-misollar

Jami

Gamble Hub UI - bu shunchaki bloklar to’plami emas, balki fanlar: tokenlar → komponentlar → patternlar → hujjatlar → metrika. Ushbu g’idga amal qilgan holda, buyruqlar chichlarni tezroq yetkazib beradi, foydalanuvchilar oldindan aytib bo’ladigan va arzon interfeysga ega bo’ladi va mahsulot vizual qarzsiz ko’payadi. Agar kerak boʻlsa, dokning birinchi sahifalarini i18n namunalari va kalitlari bilan MVP toʻplami boʻyicha yigʻaman.