Gamble Hub UI Bileşen Kitaplığı

1) Hedefler ve ilkeler

Neden: Özellik dağıtımını hızlandırın, tutarlı UX sağlayın ve desteği basitleştirin.

• Anlambilim ve tarafsızlık. Bileşen, iş mantığında dikiş yapmadan UI problemini çözer.
• A11y-by-default. Roller, odak halkaları, arya nitelikleri ve kontrast bileşenlere dikilir.
• i18n-ilk. Satır uzunlukları, sayısal formatlar, RTL - kutudan çıkar.
• Temizasyon. Açık/koyu temalar ve belirteçler aracılığıyla markalı vurgular.
• Ölçeklenebilirlik. Tekdüze API'ler, küçük sürümlerin kararlılığı, majör altındaki geçişler.

2) Zemin: tasarım belirteçleri (temel)

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

Kurallar: anlamsal belirteçler (örn. 'color. aksanlı. başarı ') bileşenler tarafından kullanılır; palet - iç.

3) Bileşen kategorileri

1. Базовые (Primitives): Düğme, Simge, Tipografi, Bağlantı, Rozet, Bölücü, Avatar.
2. Формы: Input, PasswordInput, NumberInput, Select, Combobox, DatePicker, Checkbox, Radio, Switch, Slider, Textarea, FileUpload.
3. Gezinme: AppBar, Sekmeler, Ekmek kırıntıları, Sayfalama, Çekmece/Kenar Çubuğu, Adım.
4. Фидбек: Alert, InlineError, Tooltip, Toast, Snackbar, Modal, Popover, Skeleton, Progress, StatusDot.
5. Veri ve tablolar: Tablo, DataList, Kart, Akordeon, Etiket, EmptyState.

• GameTile (oyun kartı)
• ProviderBadge
• JackpotTicker
• LiveBadge (canlı tablo/gösteri)
• LobbyFilters (sağlayıcı/tür/limit)
• BonusBanner/BonusCard
• MissionProgress/AchievementBadge
• TurnuvaLeaderboard
• WalletCard/BalanceWidget
• PaymentMethodCard
• DepositForm/Para ÇekmeForm
• KYCStatusBadge/KYCChecklist
• ResponsibleGamingBanner/LimitsControl
• AgeGate/SessionTimer/RiskAlert
• SystemStatus/MaintenanceBanner

4) Bileşen Sayfası: Gerekli İçerik

Amaç ve ne zaman kullanılacağı/kullanılmayacağı.
Kompozisyon ve çeşitleri. Boyutlar, durumlar, değiştiriciler.
API. Aksesuarlar, etkinlikler, slotlar, kontrollü/kontrolsüz modlar.
A11y. Roller, odak, arya bağlantıları, canlı bölgeler.
i18n. Uzunluklar, biçimler, yerelleştirilebilir imzalar.
Mikrokopi. Önerilen metinler (CTA, ipuçları, hatalar).
Kod örnekleri. Tipik durumlar, kenar durumları (hatalar, yükleme, boş).
Testler. Görsel matrix/unit/interaction/A11y.
Anti-örnekler. Sık kullanım hataları.

5) Temel Bileşenler: Hızlı Özellikler

5. 1 Düğme

Varyantlar: 'Birincil | ikincil | hayalet | yıkıcı' Boyutlar: 'sm | md | lg'

Durumlar: normal, vurgulu, odak görünür, aktif, yükleme, devre dışı

A11y: görünür focus-ring, "yükleme" için "aria-busy", geçiş için "aria-pressed"

Mikrokopi: eylem + nesne (Değişiklikleri Kaydet, Doğrula)

Anti-örnek: "Tamam"

5. 2 Giriş/Alan

Malzemeler: etiket, alan, yardımcı, hata, önek/sonek

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

Hata deseni: yanlış olan nedir + nasıl düzeltilir ("+ 380 biçiminde numarayı girin"..)

Yuvalar: 'önek' (simge), 'sonek' (düğme "parolayı göster")

5. 3 Seç/Combobox

Özellikler: liste arama, klavye, uzun liste sanallaştırma

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

Boş sonuçlar: "Hiçbir şey bulunamadı. Talebi değiştirin"

5. 4 Modal/Çekmece

Kurallar: bindirme odağı, ESC/bindirme kapatma, odağı başlatıcıya döndürme

Kullanım: Ödeme Onayları, İndirim Kuralları, KYC Adımları

5. 5 Tost/Snackbar

Zaman: 2-4 s, akış engelleme yok

Canlı bölgeler: Başarı için 'aria-live =' kibar ', hatalar için' iddialı '

Örnekler: "Ödeme kabul edildi. Denge güncellendi"

5. 6 BoşDevlet

Şablon: bağlam + değer + CTA + ikincil CTA

Örnek: "Seçilen oyunlar, ilkini eklediğinizde burada görünecektir. [Favorilere ekle]»

6) iGaming bileşenleri: özellikler ve API

6. 1 GameTile

Amaç: Lobi/katalogdaki oyun kartı.
Kompozisyon: kapak, sağlayıcı, etiketler (Yeni/Sıcak/Jackpot/Canlı), RTP (toptan), hızlı eylem.

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

Durumlar: hover (hızlı başlangıç), iskelet, kullanılamaz (bölge/saat).
A11y: alt-text, keyboard start, 'aria-label =' Play Lightning Roulette ''.

6. 2 LobiFiltreler

Amaç: Lobi filtreleri (tür, sağlayıcı, limitler, volatilite).
Özellikler: kaydedilmiş hazır ayarlar, filtreleri sıfırlama, sonuç sayacı.
Mikrokopi: "Filtreler", "Filtreleri sıfırla", "Bulundu: 128".

6. 3 BonusBanner/BonusCard

Seçenekler: hoşgeldin, yeniden yükleme, para iadesi, freespins, turnuva.
Alanlar: başlık, koşullar, geçerlilik süresi, CTA ("Activate bonus").
A11y: koşullara yapılan referanslar okunabilir, 'aria-describby' - koşulların ayrıntıları.
Anti-pattern: Anahtar kısıtlamalarını gizler.

6. 4 JackpotTicker

Amaç: Otomatik yenileme jackpot koşu miktarı.
API: veri kaynağı, güncelleme süresi, para birimi biçimi.
A11y: 'role =' status '', ekran okuyucunun okunabilirliğini ihlal etmez.

6. 5 TurnuvaLeaderboard

Kompozisyon: pozisyon tablosu, puanlar, ödüller, zamanlayıcı, kendi pozisyonu.
Özellik: sayfalama/sanallaştırma, hattınızı sabitleme.
A11y: 'th'/' scope', okunabilir sütunlar, ok gezintisi.

6. 6 WalletCard/BalanceWidget

Alanlar: bakiye, bloke edilmiş fonlar, bonus bakiyesi, para birimi.
Eylemler: "Top up", "Ekran", "Geçmiş".
Güvenlik: Sakla/göster miktarı, ortak alanlarda maskeleme.

6. 7 PaymentMethodCard

Alanlar: sağlayıcı logosu, limitler, komisyonlar, ETA, bölgesel kullanılabilirlik.
Durumlar: mevcut değil (bölge/durum), işlem sırasında sınır uyarısı.

Mikrokopi: "1. Sağlayıcı tarafından %5 komisyon kesilir," "Ödeme - 15 dakikaya kadar"

6. 8 DepositForm/Para ÇekmeForm

Desenler: satır içi doğrulama, miktar sınırları, aynı yöntem kuralı istemleri.
A11y: Hata bildirme ('iddialı'), odağı ilk hataya çevirme.
Hizmet alanları: "Fon kaynağı", "Amaç", AML gerekiyorsa.

6. 9 KYCStatusBadge/KYCChecklist

Devletler: 'none | basic | extended | rejected | pending'.
Metinler: "~ 2 dakika sürecek", "Parlamayan fotoğraf, köşeler ve metin görünür".
CTA: "Doğrulandı", ikincil: "Bu neden önemli? ».

6. 10 LimitlerKontrol/SorumluGamingBanner

Amaç: mevduat/oran/zaman sınırları, molalar, kendini dışlama.
А11у/Tone: tarafsız, baskı yok, yardımla ilgili.

7) Düzen desenleri (Tarifler)

Kayıt/ACC: Stepper + Form + InlineError + PageAlert + SuccessToast.
Депозит: PaymentMethodCard + AmountInput + Limitsİpucu + ConfirmModal + StatusToast.
Лобби: SearchBar + LobbyFilters + GameGrid (из GameTile) + Pagination + EmptyState.
Турнир: TournamentLeaderboard + MissionProgress + BonusBanner.
Sorumlu: ResponsibleGamingBanner + LimitsControl + SSS-link.

8) Erişilebilirlik (A11y)

Görünür odak her zaman (karanlık bir tema dahil).
Tüm etkileşimli öğeler arasında klavye navigasyonu.
'aria-live = "kibar/iddialı"' tostlar/durumlar için.
WCAG 2'den daha düşük olmayan kontrastlar. 1 AA.
Simgelerdeki metin tek anlam taşıyıcısı değildir.
RTL modları, 320 px kontrol ve okunabilirlik yüksek sesle.

9) Yerelleştirme ve formatlar

Tüm kullanıcı dizeleri i18n tuşlarından geçer.

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

Tarihleri/para birimlerini biçimlendirme - yardımcı programlarla, dizelerle değil.
Dillerde ton - ton haritası aracılığıyla (nötr/destekleyici/resmi).

10) Performans ve kalite

Liste sanallaştırma (oyunlar, tablolar).
Çizimlerin tembel yüklenmesi, sayfalara göre kod ekleme.
Paket boyutları: UI paket bütçesi, ağır bağımlılık yok.
Hız algısı için iskelet, iplikçiler - minimum.
Testler: birim, görsel anlık görüntüler, etkileşim, A11y, kritik akış için E2E.

11) Sürüm ve sürümler

SemVer: yama - hatalar; Minör - tahribatsız; Binbaşı - göçlerle.
Sürüm Notları: belirteçler/API/davranış, ekran görüntülerinden önce/sonra.
Kullanımdan kaldırmalar: Dock işaretleri, kod modları ve linter kuralları.
Storybook/Playground: canlı örnekler, erişilebilirlik paneli, RTL geçiş.

12) Katkıda bulunmak

Yeni bir bileşen üzerinde RFC: bir sorun - seçenekler - seçilen karar - A11y - i18n - API - riskler.
PR kontrol listesi: rıhtımlar, hikayeler, testler, görsel anlık görüntüler, kontrastlar, i18n, karanlık/RTL.
Bitti'nin tanımı: bileşen + dokümantasyon + testler + desen örnekleri.

13) MVP seti ve yol haritası

• 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 örnekleri (bitmiş ekler)

CTA: "Değişiklikleri kaydet", "Doğrulandı", "Ödeme yöntemi ekle".

Hatalar: "Geçersiz tarih biçimi. DD kullan. MM. YYYY. ", "Dosya çok büyük (maks. 10 MB)"

Başarı: "Ödeme kabul edildi. Denge güncellendi. »,Tamam! Belgeler doğrulandı"

Boş durumlar: "By "{query}" hiçbir şey bulunamadı. Filtreleri sıfırlayın veya sorguyu hassaslaştırın"

15) Anti-desenler

UI bileşenleri içindeki iş mantığı (aşırı kullanımı keser).
Görünmez odak veya anlam bağımlılığı sadece renge bağlıdır.
Bileşen koduna gömülü dizeler (i18n olmadan).
Semantik ihlali ('div' üzerindeki düğme,'ul/ol/li 'içermeyen listeler).
Açık kuralları olmayan değişkenler (çarpma 'ButtonPrimaryBlueBig2').

16) Kontrol listeleri

• Amaç, varyantlar, API açıklanmıştır.
• A11y: rol, odak, arya nitelikleri, kontrast.
• i18n: tüm satırlar işlenir, uzun diller ve RTL kontrol edilir.
• Hikaye/Demo: Normal, İndirme, Hata, Boş.
• Testler: birim + görsel + etkileşim + A11y.
• İş mantığı yok, sadece UI/davranış.

• Bileşenlerin bir şeması ve bir odak sırası vardır.
• Mikrokopi ve hata/başarı metinleri tanımlanmıştır.
• Ölçülen temel metrikler (adım dönüştürme, hata oranı, tamamlama süresi).

17) Bileşen için belge iskeleti (şablon)

Adı ve amacı

Ne zaman kullanılmalı/kullanılmamalı

Seçenekler ve durumlar

API (sahne, etkinlikler, yuvalar)

Erişilebilirlik (rol, klavye, arya, kontrast)

i18n (tuşlar, formatlar, uzunluklar, RTL)

Mikrokopi (örnekler)

Kod örnekleri (tipik ve kenar)

Test matrisi

Anti-örnekler

Toplam

Gamble Hub UI sadece bir dizi blok değil, bir disiplindir: belirteçler, bileşenler, desenler, dokümantasyon, metrikler. Bu kılavuzun ardından ekipler daha hızlı özellikler sunar, kullanıcılar öngörülebilir ve uygun fiyatlı bir arayüz elde eder ve ürün görsel borç olmadan ölçeklenir. Gerekirse, rıhtımın ilk sayfalarını MVP setine göre örnekler ve i18n anahtarlarıyla toplayacağım.