Biblioteka elementów interfejsu użytkownika Gamble Hub

1) Cele i zasady

Dlaczego: Przyspieszenie dostarczania funkcji, zapewnienie spójnego UX i uproszczenie wsparcia.

• Semantyka i neutralność. Komponent rozwiązuje problem interfejsu użytkownika bez szycia w logice biznesowej.
• A11y-by-default. Role, pierścienie ostrości, atrybuty arii i kontrast są szyte do komponentów.
• i18n-pierwszy. Długości linii, formaty numeryczne, RTL - wziąć pod uwagę poza pudełkiem.
• Temizacja. Jasne/ciemne motywy i markowe akcenty przez żetony.
• Skalowalność. Jednolite API, stabilność drobnych uwolnień, migracje pod dużym.

2) Podstawy: żetony projektowe (fundament)

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

Zasady: żetony semantyczne (np. 'kolor. akcent. sukces ") są wykorzystywane przez komponenty; paleta - wewnętrzna.

3) Kategorie komponentów

1. Мабова (Primitives): Przycisk, Ikona, Typografia, Link, Badge, Divider, Avatar.
2. Морка: Wejście, Hasło, Urządzenie wejściowe, Wybierz, Combobox, Picker, Pole wyboru, Radio, Przełącznik, Suwak, Textarea, FileUpload.
3. Nawigacja: AppBar, Zakładki, Bułki chlebowe, Paginacja, Szuflada/Pasek boczny, Stepper.
4. Мидбей: Alert, In, Error, Tooltip, Toast, Snackbar, Modal, Popover, Skeleton, Progress, Dot.
5. Dane i tabele: Tabela, Lista stron, Karta, Akordeon, Tag, EmptyState.

• GameTile (karta gry)
• Odznaka
• JackpotTicker
• • Odznaka (stół/pokaz na żywo)
• LobbyFilters (dostawca/gatunek/limit)
• BonusBanner/BonusCard
• Progress/Achievement Badge
• TournamentLeaderboard
• Karta portfelowa/Widget
• Karta metodologiczna
• Formularz depozytowy/formularz
• KYCStatusBadge/KYCChecklist
• GamingBanner/Kontrola
• PowerGate/ Timer/ Alert
• Status/Baner systemowy

4) Strona składowa: Wymagana zawartość

Cel i kiedy używać/nie używać.
Skład i warianty. Wymiary, stany, modyfikatory.
API. Rekwizyty, wydarzenia, szczeliny, tryby kontrolowane/niekontrolowane.
A11y. Role, skupienie, połączenia arii, żywe regiony.
i18n. Długość, formaty, sygnatury lokalizacyjne.
Mikrokopia. Zalecane teksty (CTA, wskazówki, błędy).
Przykłady kodów. Typowe przypadki, przypadki krawędzi (błędy, załadunek, puste).
Badania. Wizualne matrix/unit/interaction/A11y.
Anty-przykłady. Częste błędy użytkowania.

5) Kluczowe elementy: Szybkie specyfikacje

5. 1 przycisk

Warianty: „pierwotny | wtórny duch | | destrukcyjny” Wymiary: „sm | md | lg”

Stany: normalne, zawisłe, widoczne, aktywne, załadunek, wyłączone

A11y: widoczny pierścień ostrości, „aria-busy” do „załadunku”, „aria-naciśnięty” do przełączania

Mikrokopia: akcja + obiekt (Zapisz zmiany, Sprawdź)

Anty-przykład: „OK”

5. 2 Wejście/pole

Składniki: etykieta, pole, pomocnik, błąd, przedrostek/przyrostek

A11y: "aria-invalid", "aria-descredby", свебка "dla/id'

Wzór błędu: co jest złe + jak naprawić („Wprowadź numer w formacie + 380”..)

Sloty: 'prefix' (ikona), 'sufiks' (przycisk „pokaż hasło”)

5. 3 Wybierz/Combobox

Funkcje: wyszukiwanie listy, klawiatura, wirtualizacja długiej listy

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

Puste wyniki: "Nic nie znaleziono. Zmień żądanie"

5. 4 Modal/szuflada

Zasady: ostrość pułapki, zamknięcie ESC/nakładka, zwrócenie uwagi na inicjatora

Użycie: Potwierdzenia płatności, Zasady rabatu, Kroki KYC

5. 5 Toast/Snackbar

Czas: 2-4 s, brak blokowania przepływu

Regiony żywe: 'aria-live =' grzeczny 'dla sukcesu,' asertywny 'dla błędów

Przykłady: "Płatność zaakceptowana. Saldo zostało zaktualizowane"

5. 6 EmptyState

Szablon: kontekst + wartość + CTA + wtórna CTA

Przykład: "Wybrane gry pojawią się tutaj po dodaniu pierwszej. [Dodaj do ulubionych]"

6) Komponenty iGaming: specyfiki i API

6. 1 GameDachówka

Przeznaczenie: karta gry w holu/katalogu.
Skład: okładka, dostawca, tagi (New/Hot/Jackpot/Live), RTP (hurtownia), szybkie działanie.

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

Stany: zawiska (szybki start), szkielet, niedostępny (region/czas).
A11y: alt-text, keyboard start, 'aria-label = „Play Lightning Roulette”'.

6. 2 Lobbyfiltry

Cel: filtry lobby (gatunek, dostawca, limity, zmienność).
Funkcje: zapisane ustawienia wstępne, filtry resetujące, licznik wyników.
Mikrokopia: „Filtry”, „Filtry resetowe”, „Znalezione: 128”.

6. 3 BonusBanner/Bonus Card

Opcje: welcome, reload, cashback, freespins, turniej.
Pola: nagłówek, warunki, okres ważności, CTA („Aktywuj bonus”).
A11y: odniesienia do warunków są czytelne, „aria-description” → szczegóły warunków.
Anty-wzór: Ukryj ograniczenia klucza.

6. 4 JackpotTicker

Cel: Automatyczne odświeżanie jackpota uruchomionej kwoty.
API: źródło danych, okres aktualizacji, format waluty.
A11y: 'role = „status”, nie naruszaj czytelności czytnika ekranu.

6. 5 TournamentLeaderboard

Skład: tabela pozycji, punkty, nagrody, timer, pozycja własna.
Funkcja: paginacja/wirtualizacja, naprawa linii.
A11y: 'th '/' scope', czytelne kolumny, nawigacja strzałkowa.

6. 6 Karta portfelowa/Widget

Pola: saldo, zablokowane środki, saldo bonusowe, waluta.
Akcje: „Doładowanie”, „Wyświetlanie”, „Historia”.
Bezpieczeństwo: ukryj/pokaż ilość, maskowanie w obszarach wspólnych.

6. 7 Karta metodologiczna

Pola: logo dostawcy, limity, prowizje, ETA, dostępność regionalna.
Stany: niedostępne (region/status), w procesie, ostrzeżenie limitu.

Mikrokopia: "1. 5% prowizji jest wstrzymywane przez dostawcę", "Płatność - do 15 minut"

6. 8 Formularz depozytowy/formularz

Wzory: walidacja inline, limity kwot, wiersze reguły tej samej metody.
A11y: zgłaszanie błędów („asertywnych”), zwracanie uwagi na pierwszy błąd.
Pola usług: „Źródło środków”, „Cel”, jeśli wymagana jest licencja AML.

6. 9 KYCStatusBadge/KYCChecklist

Stwierdza: „żaden | podstawowych | rozszerzonych | odrzuconych | oczekujących”.
Teksty: „Potrwa ~ 2 minuty”, „Zdjęcie bez blasku, narożniki i tekst są widoczne”.
CTA: "Poddaj się weryfikacji", wtórne: "Dlaczego to jest ważne? ».

6. 10 Kontrola / GamingBanner

Cel: limity depozytów/stawek/czasu, przerw, samodzielnego wykluczenia.
А11у/Tone: neutralny, bez nacisku, w odniesieniu do pomocy.

7) Wzory układu (Przepisy)

Rejestracja/ACC: Stepper + Formularz + InnyError + Alert + SuccessToast.
Дебовий: MethodCard + ΔInput + Hint + Modal + Toast.
Лоска: SearchBar + LobbyFilters + GileGrid (и, GileTile) + Pagination + EmptyState.
Турнина: TournamentLeaderboard + Progress + BonusBanner.
Odpowiedzialny: GamingBanner + Control + FAQ-link.

8) Dostępność (A11y)

Widoczne skupienie zawsze (w tym w ciemnym motywie).
Nawigacja klawiatury przez wszystkie interaktywne elementy.
"aria-live =" grzeczny/asertywny "dla tostów/statusów.
Kontrasty nie niższe niż WCAG 2. 1 AA.
Tekst w ikonach nie jest jedynym nośnikiem znaczenia.
Tryby RTL, 320 px sprawdzić i czytelność na głos.

9) Lokalizacja i formaty

Wszystkie łańcuchy użytkownika są przez klucze 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

Daty formatowania/waluty - z narzędziami, a nie ciągami.
Ton w językach - przez ton-mapa (neutralny/pomocniczy/urzędowy).

10) Wydajność i jakość

Wirtualizacja listy (gry, tabele).
Leniwe ładowanie ilustracji, łączenie kodów przez strony.
Rozmiary pakietów: UI pakiet budżetu, bez ciężkich zależności.
Szkielet do percepcji prędkości, kręgosłupy - minimalne.
Testy: jednostka, migawki wizualne, interakcja, A11y, E2E dla przepływu krytycznego.

11) Wersioning i wydania

SemVer: plaster - błędy; drobne - nieniszczące; główne - z migracjami.
Uwagi do wydania: żetony/API/zachowanie, przed/po zrzutach ekranu.
Deprecacje: oznaczenia doku, moduły kodu i zasady lintera.
Storybook/Plac zabaw: przykłady na żywo, panel dostępności, przełącznik RTL.

12) Wnoszenie wkładu

RFC na nowy składnik: problem → opcje → wybrana decyzja → A11y → i18n → API → ryzyka.
Lista kontrolna PR: doki, historie, testy, migawki wizualne, kontrasty, i18n, dark/RTL.
Definicja Wykonanego: komponent + dokumentacja + testy + przykłady wzorów.

13) Zestaw MVP i mapa drogowa

• Przycisk, Wejście, Wybierz, Pole wyboru, Radio, Przełącznik, Modal, Toast, Tooltip, Progress, Szkielet, Karta, EmptyState, Zakładki, Pagination, Bułki chlebowe, Stół, Płytka, LobByFilters, Bonter usBanner, WalletCard, MethodCard, DepositForm, KYCStatusBadge.

Далевич: TournamentLeaderboard, JackpotTicker, لProgress, Control, SystemStatus, Drawer/Sidebar, Picker, Combobox, FileUpload.

14) Przykłady mikrokopii (gotowe wkładki)

CTA: „Zapisz zmiany”, „Poddaj się weryfikacji”, „Dodaj formę płatności”.

Błędy: "Nieprawidłowy format daty. Użyj DD. MM. RRRR "., "Plik jest zbyt duży (maks. 10 MB)"

Sukces: "Płatność zaakceptowana. Saldo zaktualizowane. "Skończyłem! Dokumenty zweryfikowane"

Puste stwierdzenie: "Przez "{zapytanie}" nic nie znaleziono. Zresetuj filtry lub dopracuj zapytanie"

15) Anty-wzory

Logika biznesowa w komponentach UI (przerywa nadmierne wykorzystanie).
Niewidzialne skupienie lub zależność znaczenia tylko od koloru.
Ciągi wbudowane w kod komponentu (bez i18n).
Naruszenie semantyki (przycisk na ', listy bez' ul/ol/li ').
Warianty bez jasnych reguł (pomnożenie „Button BlueBig2”).

16) Listy kontrolne

• Cel, warianty, API są opisane.
• A11y: rola, skupienie, atrybuty arii, kontrast.
• i18n: wszystkie linie są renderowane, długie języki i RTL są sprawdzane.
• Story/Demo: Normal, Download, Error, Blank.
• Testy: jednostka + wizualna + interakcja + A11y.
• Brak logiki biznesowej, tylko interfejs użytkownika/zachowanie.

• Istnieje schemat komponentów i zlecenie ostrości.
• Zdefiniowano mikrokopię i teksty błędów/sukcesów.
• Mierzone mierniki kluczy (konwersja kroków, wskaźnik błędów, czas do końca).

17) Szkielet dokumentu dla komponentu (szablon)

Nazwa i cel

Kiedy stosować/nie stosować

Warianty i państwa

API (rekwizyty, wydarzenia, sloty)

Dostępność (rola, klawiatura, aria, kontrast)

i18n (klawisze, formaty, długości, RTL)

Mikrokopia (przykłady)

Próbki kodowe (typowe i krawędziowe)

Matryca badawcza

Anty-przykłady

Razem

Gamble Hub UI to nie tylko zestaw bloków, ale dyscyplina: żetony → komponenty → wzory → dokumentacja → metryki. Zgodnie z tym przewodnikiem zespoły dostarczają funkcje szybciej, użytkownicy uzyskują przewidywalny i przystępny cenowo interfejs, a skale produktów bez długu wizualnego. W razie potrzeby, będę zbierać pierwsze strony doku przez MVP-set z przykładami i i18n klawiszy.