Gamble Hub UI компоненттеринин китепканасы

1) Максаттары жана принциптери

Эмне үчүн: фич жеткирүүнү тездетүү, консистенттик UX менен камсыз кылуу жана колдоону жөнөкөйлөтүү.

• Семантика жана нейтралитет. Компонент бизнес-логикага кирбестен UI маселесин чечет.
• A11y-by-default. Ролдор, фокус шакектер, ария атрибуттары жана контраст - компоненттерге тигилген.
• i18n-first. Саптардын узундугу, сандык форматтар, RTL - кутудан эске алуу.
• Темификация. Жарык/караңгы темалар жана бренддик акценттер токендер аркылуу.
• Масштабдуулугу. Бирдиктүү API, минор релиздердин туруктуулугу, негизги көчүрүү.

2) негиздери: дизайн-токендер (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 }
}

Эрежелер: семантикалык токендер (мисалы, 'color. accent. success ') компоненттери менен колдонулат; палитра - ички.

3) компоненттеринин категориялары

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

• GameTile (оюн картасы)
• ProviderBadge
• JackpotTicker
• LiveBadge (Live-стол/шоу)
• LobbyFilters (провайдер/жанр/лимит)
• BonusBanner / BonusCard
• MissionProgress / AchievementBadge
• TournamentLeaderboard
• WalletCard / BalanceWidget
• PaymentMethodCard
• DepositForm / WithdrawalForm
• KYCStatusBadge / KYCChecklist
• ResponsibleGamingBanner / LimitsControl
• AgeGate / SessionTimer / RiskAlert
• SystemStatus / MaintenanceBanner

4) Компоненттин бети: милдеттүү мазмун

Максаты жана качан колдонуу/колдонулбайт.
Курамы жана параметрлери. өлчөмдөрү, шарттары, модификаторлор.
API. Props, окуялар, Slots, көзөмөлгө/көзөмөлсүз режимдер.
A11y. Rols, Focus, aria-байланыш, Live-региондор.
i18n. Узундуктар, форматтар, локализацияланган кол тамгалар.
Microcopy. Сунушталган тексттер (CTA, кыйытма, каталар).
Коддун мисалдары. Типтүү учурларда, edge-учурларда (каталар, жүктөө, бош).
Тесттер. Matrix көрүү/бирдик/interaction/A11y.
Анти-мисалдар. Көп пайдалануу каталар.

5) негизги компоненттери: тез өзгөчөлүктөрү

5. 1 Button

Параметрлери: 'primary | secondary | ghost | destructive' Өлчөмү: 'sm | md | lg'

Шарттар: кадимки, hover, focus-visible, active, loading, disabled

A11y: Көрүнгөн focus-ring, 'aria-busy' качан 'loading', 'aria-pressed' үчүн toggle

Microcopy: иш-аракет + объект ("өзгөртүү сактоо", "текшерүү")

Анти-мисал: "OK"

5. 2 Input / Field

Курамы: label, field, helper, error, prefix/suffix

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

Каталардын үлгүсү: эмне туура эмес + кантип ("+ 380 форматындагы номерди киргизиңиз"...)

Slots: 'prefix' (сөлөкөт), 'suffix' ("сырсөздү көрсөтүү" баскычы)

5. 3 Select / Combobox

Өзгөчөлүктөрү: тизме боюнча издөө, клавиатура, узун тизмелерди виртуалдаштыруу

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

Бош жыйынтыктар: "Эч нерсе табылган жок. Өтүнүчтү өзгөртүңүз"

5. 4 Modal / Drawer

Эрежелер: trap focus, ESC/overlay боюнча жабуу, демилгечиге көңүл кайтаруу

Колдонуу: төлөмдөрдү ырастоо, бонус эрежелери, KYC-кадам

5. 5 Toast / Snackbar

Убакыт: 2-4 с, эч кандай тоскоолдук агымы

Live региондор: 'aria-live = "polite"' ийгилик үчүн, 'assertive' 'ката үчүн

Мисалдар: "Төлөм кабыл алынды. Баланс жаңыланды"

5. 6 EmptyState

Шаблон: контекст + баалуулук + CTA + экинчилик CTA

Мисал: "Бул жерде сиз биринчисин кошкондо тандалган оюндар пайда болот. [Тандалгандарга кошуу]"

6) iGaming компоненттери: өзгөчөлүктөрү жана API

6. 1 GameTile

Максаты: лобби/каталогдогу оюн картасы.
Курамы: Cover, провайдер, белгилер (New/Hot/Jackpot/Live), RTP (опц.) , тез иш-аракет.

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

Шарттар: hover (тез баштоо), skeleton, жеткиликтүү эмес (аймак/убакыт).
A11y: alt-текст, клавиатура башталышы, 'aria-label = "Lightning Roulette ойноо"'.

6. 2 LobbyFilters

Максаты: лобби чыпкалары (жанр, провайдер, лимиттер, туруксуздук).
Fiches: сакталган алдын ала жазуулар, чыпкалоо, натыйжалары эсептегич.
Microcopy: "Чыпкалар", "Чыпкаларды өчүрүү", "Табылды: 128".

6. 3 BonusBanner / BonusCard

Жолдор: салам, релоад, кэшбэк, фриспиндер, турнир.
Талаалар: аталышы, шарттары, жарактуу мөөнөтү, CTA ("бонусту активдештирүү").
A11y: шарттары окулат шилтемелер, 'aria-describedby' → шарттары майда-чүйдөсүнө чейин.
Анти-үлгү: негизги чектөөлөрдү жашыруу.

6. 4 JackpotTicker

Максаты: автоматтык жаңыртуу менен джекпоттун чуркоо суммасы.
API: маалымат булагы, жаңылануу мөөнөтү, валюта форматы.
A11y: 'role =' status ', скринридер менен окулууну үзгүлтүккө учуратпаңыз.

6. 5 TournamentLeaderboard

Курамы: кызмат орундарынын таблицасы, упайлар, байгелер, таймер, өз орду.
Fich: pagination/virtualization, анын сапты бекитүү.
A11y: 'th '/' scope', окуу тилкелери, жебелер менен багыттоо.

6. 6 WalletCard / BalanceWidget

Талаалар: баланс, бөгөттөлгөн каражаттар, бонустук баланс, валюта.
Иш-аракеттер: "Толуктоо", "Чыгаруу", "Тарых".
Коопсуздук: сумманы жашыруу/көрсөтүү, жалпы аймактарда жашыруу.

6. 7 PaymentMethodCard

Талаалар: провайдердин логотиби, лимиттер, комиссиялар, ETA, аймактык жеткиликтүүлүк.
Шарттар: жеткиликсиз (аймак/статус), иштетүүдө, лимиттерди эскертүү.
Microcopy: "Комиссия 1,5% провайдер тарабынан кармалып турат", "Төлөм - 15 мүнөткө чейин".

6. 8 DepositForm / WithdrawalForm

Паттерндер: inline-валидация, суммардык лимиттер, same-method руль кеңештери.
A11y: каталарды жарыялоо ('assertive'), фокусту биринчи катага которуу.
Кызматтык талаалар: "Каражат булагы", "Максаты", эгерде AML талап кылынса.

6. 9 KYCStatusBadge / KYCChecklist

Шарттар: 'none | basic | extended | rejected | pending'.
Тексттер: "Бул ~ 2 мүнөт талап кылынат", "Эч кандай жарык Сүрөт, бурчтар жана текст көрүнүп турат".
CTA: "Текшерүүдөн өтүү", экинчилик: "Бул эмне үчүн маанилүү? ».

6. 10 LimitsControl / ResponsibleGamingBanner

Максаты: депозиттердин/чендердин/убакыттын лимиттери, тыныгуулар, өзүн-өзү жоюу.
A11u/Тон: бейтарап, кысым жок, шилтеме менен.

7) Дизайн үлгүлөрү (Recipes)

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

8) Accessibility (A11y)

Көрүнгөн көңүл дайыма (анын ичинде караңгы темада).
Бардык интерактивдүү элементтер боюнча клавиатура менен навигация.
'aria-live = "polite/assertive"' тосттор/статустар үчүн.
WCAG кем эмес карама-каршылыктар 2. 1 AA.
Сөлөкөттөгү текст маанинин жалгыз алып жүрүүчүсү эмес.
RTL режимдери, 320 px текшерүү жана үн менен окуу жөндөмдүүлүгү.

9) Локализация жана форматтар

Бардык колдонуучу саптар - 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

Даталарды/валюталарды форматтоо - саптар менен эмес, утилиттер менен.
Тилдердеги тон - tone-map аркылуу (нейтралдуу/колдоочу/расмий).

10) аткаруу жана сапаты

Тизмелерди виртуалдаштыруу (оюндар, таблицалар).
Иллюстрацияларды жалкоо жүктөө, беттер боюнча код-сплитинг.
Bandla өлчөмдөрү: UI пакетинин бюджети, эч кандай оор көз карандылык.
Skeleton ылдамдыгын кабылдоо үчүн, жип - минималдуу.
Сыноолор: unit, визуалдык snapshots, interaction, A11y, E2E үчүн маанилүү flow.

11) Чыгаруу жана релиздер

SemVer: patch - баги; minor - бузулбаган; major - миграция менен.
Release Notes: Токендер/API/жүрүм-туруму, скриншоттор чейин/кийин.
Deprecations: доктогу белгилер, код-мода жана линтер-эрежелер.
Storybook/Playground: жандуу мисалдар, accessibility панели, RTL тоголок.

12) Contributing (салым)

жаңы компоненти боюнча RFC: көйгөй → параметрлери → тандалган чечим → A11y → i18n → API → тобокелдиктер.
PR чек тизмеси: Dock, окуялар, тесттер, визуалдык snapshots, контрасттар, i18n, dark/RTL.
Definition of Done: компонент + документтер + тесттер + үлгүлөрү.

13) MVP топтому жана жол картасы

• 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 мисалдар (даяр киргизүү)

CTA: "Өзгөрүүлөрдү сактоо", "Текшерүүдөн өтүү", "Төлөм ыкмасын кошуу".

Каталар: "Датанын туура эмес форматы. DD колдонуу. ММ. GGGG. ", "Файл өтө чоң (макс. 10 МБ)"

Ийгилик: "Төлөм кабыл алынды. Баланс жаңыланды. ", "бүттү! Документтер текшерилди"

Бош шарттар: "{query}" боюнча эч нерсе табылган жок. Фильтрлерди ыргытыңыз же суроо-талапты тактаңыз"

15) Анти-үлгүлөрү

UI компоненттеринин ичиндеги бизнес-логика (ашыкча пайдаланууну бузат).
Көрүнбөгөн фокус же маанинин түстөн көз карандылыгы.
Компоненттердин кодуна тигилген саптар (i18n жок).
Семантиканын бузулушу ('div' баскычы, тизмеси жок 'ul/ol/li').
так эрежелери жок параметрлери (көбөйтүү 'ButtonPrimaryBlueBig2').

16) Чек-баракчалар

• сүрөттөлгөн максаты, параметрлери, API.
• A11y: роль, фокус, ария атрибуттары, контраст.
• i18n: бардык саптар чыгарылган, узак тилдер жана RTL текшерилет.
• Окуя/демо: кадимки, жүктөп алуу, каталар, бош.
• Сыноолор: бирдик + көрүү + байланыш + A11y.
• эч кандай бизнес-логика, бир гана UI/жүрүм-туруму.

• компоненттеринин схемасы жана фокус тартиби бар.
• Аныкталган microcopy жана тексттер каталар/ийгиликтер.
• Негизги метриктер өлчөнөт (кадам конверсиясы, error rate, time-to-complete).

17) компонент үчүн документтин скелети (шаблон)

Аталышы жана максаты

Качан колдонуу керек/колдонулбайт

Параметрлери жана шарттары

API (Пропс, окуялар, Slots)

Accessibility (ролу, клавиатура, ария, контраст)

i18n (ачкычтар, форматтар, узундугу, RTL)

Microcopy

Коддун үлгүлөрү (типтүү жана edge)

Тест-матрица

Анти-мисалдар

Жыйынтык

Gamble Hub UI - бул жөн гана блоктордун жыйындысы эмес, тартип: белгилер → компоненттер → үлгүлөр → документтер → метрика. Бул гидди ээрчип, буйруктар тезирээк чыпкаларды жеткирет, колдонуучулар алдын ала жана жеткиликтүү интерфейсти алышат жана продукт визуалдык карызы жок масштабдалат. керек болсо, Мен мисалдар жана i18n ачкычтары менен MVP топтому боюнча доктун биринчи барактарын чогултуу.