Gamble Hub UI komponentler kitaphanasy

1) Maksatlar we ýörelgeler

Näme üçin: fich üpjünçiligini çaltlaşdyrmak, tutanýerli UX üpjün etmek we goldawy ýönekeýleşdirmek.

• Semantika we bitaraplyk. Komponent UI meselesini iş logikasyny goşman çözýär.
• A11y-by-default. Rollar, fokus halkalary, aria atributlary we kontrast - komponentlere tikilýär.
• i18n-first. Setirleriň uzynlygyny, san formatlaryny, RTL - gutudan göz öňünde tutýarys.
• Temizleme. Bellikler arkaly açyk/garaňky temalar we marka aksentleri.
• Ululygy. Ýeke-täk API, minor relizleriniň durnuklylygy, major döwründe migrasiýa.

2) Esaslar: dizaýn-bellikler (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 }
}

Düzgünler: semantik tokenler (mysal üçin 'color. accent. success ') komponentler tarapyndan ulanylýar; palitra - içki.

3) Komponentleriň kategoriýalary

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

• GameTile
• ProviderBadge
• JackpotTicker
• LiveBadge
• LobbyFilters (üpjün ediji/reanr/çäk)
• BonusBanner / BonusCard
• MissionProgress / AchievementBadge
• TournamentLeaderboard
• WalletCard / BalanceWidget
• PaymentMethodCard
• DepositForm / WithdrawalForm
• KYCStatusBadge / KYCChecklist
• ResponsibleGamingBanner / LimitsControl
• AgeGate / SessionTimer / RiskAlert
• SystemStatus / MaintenanceBanner

4) Komponentiň sahypasy: hökmany mazmuny

Maksady we haçan ulanylmaly/ulanylmaly däl.
Düzümi we wariantlary. Ölçegler, şertler, modifikatorlar.
API. Propslar, wakalar, slotlar, gözegçilik edilýän/gözegçilik edilmeýän reimesimler.
A11y. Rollar, fokus, aria-baglanyşyklar, durmuş sebitleri.
i18n. Uzynlyklar, formatlar, lokallaşdyrylan gollar.
Microcopy. Maslahat berlen tekstler (CTA, maslahatlar, ýalňyşlyklar).
Kod mysallary. Adaty wakalar, edge-wakalar (ýalňyşlyklar, ýüklemeler, boş).
Synaglar. Wizual matrisa/birlik/interaction/A11y.
Anti-mysallar. Ulanmagyň ýygy-ýygydan ýalňyşlyklary.

5) Esasy komponentler: çalt aýratynlyklar

5. 1 Button

Wariantlar: 'primary | secondary | ghost | destructive' Ölçegler: 'sm | md | lg'

Ýagdaýlar: adaty, hower, focus-visible, active, loading, disabled

A11y: görünýän focus-ring, 'aria-busy' -da 'loading', 'aria-pressed' toggle

Microcopy: Hereket + obýekt ("Üýtgeşmeleri sakla", "Barlagy geçir")

Anti-mysal: "OK"

5. 2 Input / Field

Düzümi: label, field, helper, error, prefix/suffix

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

Ýalňyşlyklaryň nusgasy: näme nädogry + nädip düzetmeli ("Nomeri + 380 formatda giriň"...)

Slots: 'prefix' (nyşan), 'suffix' ("paroly görkezmek" düwmesi)

5. 3 Select / Combobox

Aýratynlyklary: sanawdan gözlemek, klawiatura, uzyn sanawlary wirtuallaşdyrmak

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

Boş netijeler: "Hiç zat tapylmady. Soragy üýtgediň"

5. 4 Modal / Drawer

Düzgünler: trap focus, ESC/overlay boýunça ýapmak, fokusy inisiatora gaýtarmak

Ulanmak: tölegleri tassyklamak, bonus düzgünleri, KYC-ädimler

5. 5 Toast / Snackbar

Wagt: 2-4 s, akymy petiklemän

Durmuş sebitleri: 'aria-live = "polite"' üstünlik üçin, 'assertive' 'ýalňyşlyklar üçin

Mysal üçin: "Töleg kabul edildi. Balans täzelendi"

5. 6 EmptyState

Şablon: kontekst + gymmatlyk + CTA + ikinji derejeli CTA

Mysal: "Bu ýerde birinjisini goşanyňyzda saýlanan oýunlar peýda bolar. [Halanýanlaryňyza goşuň]"

6) iGaming-komponentler: aýratynlyklar we API

6. 1 GameTile

Maksady: lobbide/katalogda oýun kartoçkasy.
Kompozisiýa: örtük, üpjün ediji, bellikler (Täze/Hot/Jackpot/Live), RTP (ops.) , çalt hereketler.

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

Şertler: hower (çalt başlamak), skeleton, elýeterli däl (sebit/wagt).
A11y: alt-tekst, klawiatura başlangyjy, 'aria-label = "Lightning Roulette oýnamak"'.

6. 2 LobbyFilters

Maksady: lobbi süzgüçleri (reanr, üpjün ediji, çäkler, üýtgewsizlik).
Çeňňekler: saklanan presetler, süzgüçleri taşlamak, netijeleri sanamak.
Microcopy: "Süzgüçler", "Süzgüçleri taşla", "Tapyldy: 128".

6. 3 BonusBanner / BonusCard

Saýlawlar: salam, reload, nagt pul, frispinler, ýaryş.
Meýdanlar: sözbaşy, şertler, hereket ediş möhleti, CTA ("Bonusy işjeňleşdirmek").
A11y: okalýan şertlere salgylanmalar, 'aria-describedby' → şertleriň jikme-jiklikleri.
Anti-pattern: esasy çäklendirmeleri gizlemek.

6. 4 JackpotTicker

Maksady: awto täzelenme bilen jekpotyň işleýän mukdary.
API: maglumatlaryň çeşmesi, täzeleniş döwri, walýuta görnüşi.
A11y: 'role =' status ', skrinrider bilen okalyşyňyzy bozmaň.

6. 5 TournamentLeaderboard

Düzümi: pozisiýalaryň tablisasy, äýnekler, baýraklar, taýmer, öz pozisiýasy.
Fiçler: paginasiýa/wirtualizasiýa, öz setirini berkitmek.
A11y: 'th '/' scope', okalýan sütünler, oklar bilen nawigasiýa.

6. 6 WalletCard / BalanceWidget

Meýdanlar: balans, petiklenen serişdeler, bonus balansy, walýuta.
Hereketler: "Doldurmak", "Çykarmak", "Taryh".
Howpsuzlyk: jemi gizlemek/görkezmek, umumy zolaklarda gizlemek.

6. 7 PaymentMethodCard

Meýdanlar: üpjün edijiniň nyşany, çäkleri, komissiýalary, ETA, sebitleýin elýeterliligi.
Döwletler: Elýeterli däl (sebit/status), işlenýär, çäklendirmeleriň öňüni alýar.
Microcopy: "1,5% komissiýa üpjün ediji tarapyndan saklanylýar", "Töleg - 15 minuda çenli".

6. 8 DepositForm / WithdrawalForm

Patternler: inline-validasiýa, jemi çäkler, same-method rule maslahatlar.
A11y: hatalary yglan etmek ('assertive'), fokusy ilkinji ýalňyşlyga geçirmek.
Hyzmat meýdançalary: "Serişdeleriň çeşmesi", "Maksady", eger AML talap edilse.

6. 9 KYCStatusBadge / KYCChecklist

Şertler: 'none | basic | extended | rejected | pending'.
Tekstler: "Bu ~ 2 minut dowam eder", "Suratlar şöhlesiz, burçlar we tekst görünýär".
CTA: "Tassyklamany geçiň", ikinjisi: "Näme üçin bu möhüm? ».

6. 10 LimitsControl / ResponsibleGamingBanner

Maksady: goýumlaryň/stawkalaryň/wagtyň çäkleri, arakesmeler, öz-özüni aýyrmak.
A11u/Ton: bitarap, basyşsyz, salgylanma bilen.

7) Ýerleşiş nusgalary (Recipes)

Hasaba alyş/KUS: Stepper + Form + InlineError + PageAlert + SuccessToast.
Депозит: PaymentMethodCard + AmountInput + LimitsHint + ConfirmModal + StatusToast.
Лобби: SearchBar + LobbyFilters + GameGrid (из GameTile) + Pagination + EmptyState.
Турнир: TournamentLeaderboard + MissionProgress + BonusBanner.
Jogapkär oýun: ResponsibleGamingBanner + LimitsControl + FAQ-link.

8) Accessibility (A11y)

Hemişe görünýän fokus (şol sanda garaňky temada).
Interaktiw elementleriň hemmesine klawiatura arkaly nawigasiýa.
'aria-live = "polite/assertive"' tost/status üçin.
WCAG-dan pes bolmadyk gapma-garşylyklar 2. 1 AA.
Nyşanlaryň içindäki tekst ýeke-täk many göteriji däl.
RTL-re modeimleri, 320 px synagy we sesli okamak ukyby.

9) Lokalizasiýa we formatlar

Ulanyjy setirleriniň hemmesi i18n-açarlary arkaly.

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

Seneleri/walýutalary setirler bilen däl-de, utilitler bilen formatlamak.
Dillerde äheň - tone-map arkaly (bitarap/goldaýan/resmi).

10) Çykyş we hil

Sanlaşdyrma sanawlary (oýunlar, tablisalar).
Suratlary ýaltalyk bilen ýüklemek, sahypalara kod bölmek.
Bandlyň ölçegleri: UI bukjasynyň býudjeti, agyr garaşlylyksyz.
Tizligi kabul etmek üçin skeleton, spinner - iň az.
Synaglar: unitit, wizual snapshotlar, interaction, A11y, kritiki flow üçin E2E.

11) Wersiýalaşdyrmak we goýbermek

SemVer: patch - bökdençlikler; minor - ýok etmeýän; major - göçmek bilen.
Release Notes: bellikler/API/özüni alyp barşy, öň/soň ekran suratlary.
Deprecations: dokda bellikler, kod-moda we linter-düzgünler.
Storybook/Playground: janly mysallar, accessibility paneli, RTL toggle.

12) Contributing (goýum)

RFC täze komponent üçin: mesele → wariantlar → saýlanan çözgüt → A11y → i18n → API → töwekgelçilikler.
PR-barlag sanawy: doka, hekaýalar, synaglar, wizual snapshotlar, kontrastlar, i18n, dark/RTL.
"Definition of Done": komponent + resminamalar + synaglar + pattern mysallary.

13) MVP-toplum we ýol kartasy

• 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) Mikrokopiýa mysallary (taýýar goşmalar)

CTA: "Üýtgeşmeleri tygşytlamak", "Tassyklamany geçmek", "Töleg usulyny goşmak".

Hatalar: "Senäniň formaty nädogry. DD ulanyň. MM. GGGG. ", "Faýl gaty uly (iň ýokary 10 MB)"

Üstünlik: "Töleg kabul edildi. Balans täzelendi. ", "Taýýar! Resminamalar barlandy"

"{query}" üçin hiç zat tapylmady. Süzgüçleri taşlaň ýa-da soragy anyklaň"

15) Anti-patternler

UI komponentleriniň içindäki işewürlik logikasy (gaýtadan ulanylmagyny bozýar).
Göze görünmeýän fokus ýa-da manynyň diňe reňkine baglylygy.
Komponentleriň koduna tikilen setirler (i18n däl).
Semantikanyň bozulmagy ('div' düwmesi, 'ul/ol/li' -siz sanawlar).
Düzgünsiz wariantlar ('ButtonPrimaryBlueBig2' köpelýär).

16) Çek-listler

• Maksady, wariantlary, API-leri beýan edilýär.
• A11y: rol, fokus, aria atributlary, kontrast.
• i18n: ähli setirler çykaryldy, uzyn diller we RTL barlandy.
• Hekaýa/demo: adaty, ýüklemek, ýalňyşlyklar, boş.
• Synaglar: birlik + wizual + interaction + A11y.
• Iş logikasy ýok, diňe UI/özüni alyp barşy.

• Komponentleriň shemasy we üns tertibi bar.
• Microcopy we ýalňyşlyklaryň/üstünlikleriň tekstleri kesgitlenildi.
• Ölçenen esasy metrikler (ädimiň öwrülişigi, error rate, time-to-complete).

17) Komponent üçin resminamanyň skeleti (şablon)

Ady we maksady

Haçan ulanmaly/ulanmaly

Wariantlar we şertler

API (props, waka, slot)

Accessibility (rol, klawiatura, aria, kontrast)

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

Microcopy (mysallar)

Kod mysallary (edge)

Test matrisi

Anti-mysallar

Jemi

Gamble Hub UI diňe bir bloklaryň toplumy däl, eýsem tertip-düzgün: bellikler → komponentler → nusgalar → resminamalar → metrikler. Bu gollanmany ýerine ýetirip, toparlar çeňňekleri has çalt eltýärler, ulanyjylar öňünden aýdyp boljak we elýeterli interfeýsi alýarlar we önüm wizual borçsyz ulalýar. Zerur bolsa, i18n mysallary we açarlary bolan MVP toplumy boýunça dokuň ilkinji sahypalaryny ýygnaýaryn.