Gamble Hub UI კომპონენტების ბიბლიოთეკა

1) მიზნები და პრინციპები

რატომ: დააჩქაროს ფიკების მიწოდება, უზრუნველყოს თანმიმდევრული UX და გაამარტივოს მხარდაჭერა.

• სემანტიკა და ნეიტრალურობა. კომპონენტი წყვეტს UI- ს ამოცანას ბიზნეს ლოგიკის შერწყმის გარეშე.
• A11y-by-default. როლები, ფოკუს რგოლები, aria ატრიბუტები და კონტრასტები კომპონენტებში შეედინება.
• i18n-first. ხაზების სიგრძე, რიცხვითი ფორმატები, RTL - მხედველობაში მიიღება ყუთიდან.
• Temization. მსუბუქი/მუქი თემები და ბრენდის აქცენტები ნიშნების საშუალებით.
• მასშტაბურობა. ერთიანი API, უმცირესობის გამოშვებების სტაბილურობა, მაიორში მიგრაცია.

2) საფუძვლები: დიზაინის ნიშნები (ფონდი)

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. sucess ') გამოიყენება კომპონენტები; პალიტრა - შიდა.

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, DataaList, Card, Accordion, Tag, EmptyState.

• GameTile (თამაშის ბარათი)
• ProviderBadge
• JackpotTicker
• LiveBadge (ცოცხალი მაგიდა/შოუ)
• LobbyFilters (პროვაიდერი/ჟანრი/ლიმიტი)
• BonusBanner / BonusCard
• MissionProgress / AchievementBadge
• TournamentLeaderboard
• WalletCard / BalanceWidget
• PaymentMethodCard
• DepositForm / WithdrawalForm
• KYCStatusBadge / KYCChecklist
• ResponsibleGamingBanner / LimitsControl
• AgeGate / SessionTimer / RiskAlert
• SystemStatus / MaintenanceBanner

4) კომპონენტის გვერდი: სავალდებულო შინაარსი

დანიშნულება და როდის უნდა გამოიყენოთ/არ გამოიყენოთ.
შემადგენლობა და პარამეტრები. ზომები, მდგომარეობა, მოდიფიკატორები.
API. უფსკრული, მოვლენები, სლოტები, კონტროლირებადი/უკონტროლო რეჟიმები.
A11y. როლები, ფოკუსი, aria კომუნიკაციები, ლაივ რეგიონები.
i18n. სიგრძე, ფორმატები, ლოკალიზებული ხელმოწერები.
Microcopy. რეკომენდებული ტექსტები (CTA, მინიშნებები, შეცდომები).
კოდის მაგალითები. ტიპიური შემთხვევები, edge შემთხვევები (შეცდომები, დატვირთვა, ცარიელი).
ტესტები. ვიზუალური/ერთეულის/ინტერაქტიული/A11y მატრიცა.
Anti მაგალითები. ხშირი გამოყენების შეცდომები.

5) ძირითადი კომპონენტები: სწრაფი სპეციფიკაციები

5. 1 Button

პარამეტრები: 'primary | secondary | ghost | destructive' ზომები: 'sm | md | lg'

სახელმწიფოები: normal, hover, focus-visible, active, loading, disabled

A11y: ხილული focus-ring, 'aria-busy' in 'loading', 'aria-pressed' toggle- ისთვის

მიკროკოპი: მოქმედება + ობიექტი („შენახვა ცვლილებები“, „გადამოწმება“)

ანტი მაგალითი: „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 წმ, ნაკადის დაბლოკვის გარეშე

ლაივ რეგიონები: 'aria-live = „polite“ წარმატებისთვის,' assertive 'შეცდომებისთვის

მაგალითები: "გადახდა მიიღება. ბალანსი განახლებულია"

5. 6 EmptyState

შაბლონი: კონტექსტი + CTA + მეორადი CTA

მაგალითი: "აქ იქნება შერჩეული თამაშები, როდესაც პირველს დაამატებთ. [დაამატეთ არჩეული]"

6) iGaming კომპონენტები: სპეციფიკა და API

6. 1 GameTile

მიზანი: ლობის/კატალოგის თამაშის ბარათი.
შემადგენლობა: გარეკანი, პროვაიდერი, ეტიკეტები (New/Hot/Jackpot/Live), RTP (opc.) , სწრაფი მოქმედებები.

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

სახელმწიფოები: hover (სწრაფი დასაწყისი), skeleton, მიუწვდომელია (რეგიონი/დრო).
A11y: ალტის ტექსტი, კლავიატურის დასაწყისი, 'aria-label = „თამაში Lightning Roulette- ში“.

6. 2 LobbyFilters

დანიშნულება: ლობის ფილტრები (ჟანრი, პროვაიდერი, ლიმიტები, ცვალებადობა).
ფიჩები: შენახული პრესეტები, ფილტრების გამონადენი, შედეგების მრიცხველი.
მიკროკოპი: „ფილტრები“, „ფილტრების ამოღება“, „ნაპოვნია: 128“.

6. 3 BonusBanner / BonusCard

პარამეტრები: მისასალმებელი, რელიეფი, ფულადი სახსრები, ფრისპინები, ტურნირი.
ველები: სათაური, პირობები, მოქმედების ვადა, CTA („გააქტიურება პრემია“).
A11y: პირობების ბმულები იკითხება, 'aria-describedby' - პირობების დეტალები.
ანტი პატრონი: დამალვა ძირითადი შეზღუდვები.

6. 4 JackpotTicker

დანიშვნა: ჯეკპოტის გაშვებული თანხა მანქანის განახლებით.
API: მონაცემთა წყარო, განახლების პერიოდი, ვალუტის ფორმატი.
A11y: 'role = „status“', არ დაარღვიოთ ეკრანი.

6. 5 TournamentLeaderboard

შემადგენლობა: პოზიციების ცხრილი, ქულები, პრიზები, ტაიმერი, საკუთარი პოზიცია.
ფიჩი: პაგინაცია/ვირტუალიზაცია, მისი ხაზის კონსოლიდაცია.
A11y: 'th '/' scope', წაკითხული სვეტები, ისრების ნავიგაცია.

6. 6 WalletCard / BalanceWidget

ველები: დაბლოკილი სახსრების ბალანსი, ბონუსის ბალანსი, ვალუტა.
მოქმედებები: „შევსება“, „გამოყვანა“, „ისტორია“.
უსაფრთხოება: თანხის დამალვა/ჩვენება, შენიღბვა საერთო ზონებში.

6. 7 PaymentMethodCard

ველები: პროვაიდერის ლოგო, ლიმიტები, საკომისიო, ETA, რეგიონალური წვდომა.
სახელმწიფოები: მიუწვდომელი (რეგიონი/სტატუსი), დამუშავებისას, ლიმიტების გაფრთხილება.
მიკროკოპი: „კომისიას 1,5% უჭირავს პროვაიდერი“, „გადახდა - 15 წუთამდე“.

6. 8 DepositForm / WithdrawalForm

ნიმუშები: inline შესაბამისობა, მთლიანი limites, same-method rule რჩევები.
A11y: შეცდომების გამოცხადება, ფოკუსის თარგმნა პირველი შეცდომისთვის.
სამსახურის ველები: „სახსრების წყარო“, „დანიშვნა“, თუ საჭიროა AML.

6. 9 KYCStatusBadge / KYCChecklist

სახელმწიფოები: 'none | basic | extended | rejected | pending'.
ტექსტები: „ამას დასჭირდება 2 წუთი“, „ფოტო ბლიკის გარეშე, კუთხეები და ტექსტი ჩანს“.
CTA: გადამოწმება, მეორადი: "რატომ არის ეს მნიშვნელოვანი? ».

6. 10 LimitsControl / ResponsibleGamingBanner

დანიშვნა: დეპოზიტების/განაკვეთების/დროის შეზღუდვები, შესვენებები, თვითკმაყოფილება.
A11u/Ton: ნეიტრალური, ზეწოლის გარეშე, მოწმობის მითითებით.

7) განლაგების ნიმუშები (Recipes)

რეგისტრაცია/CUS: 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) შესრულება და ხარისხი

სიების ვირტუალიზაცია (თამაშები, ცხრილები).
ილუსტრაციების ზარმაცი დატვირთვა, გვერდებზე კოდირება.
ბანდლის ზომა: ბიუჯეტი UI პაკეტისთვის, მძიმე დამოკიდებულების გარეშე.
Skeleton სიჩქარის აღქმისთვის, spinners მინიმალურია.
ტესტები: ერთეული, ვიზუალური სლაიდები, ინტერაქტია, A11y, E2E კრიტიკული ფლეიტებისთვის.

11) ვერსიები და გამოშვებები

SemVer: patch - შეცდომები; minor - დაუზიანებელი; მაიორი - მიგრაციებით.
Release Notes: ნიშნები/API/ქცევა, ეკრანის კადრები/შემდეგ.
Deprecations: შენიშვნები დოქში, კოდისა და ლინტერის წესებში.
Storybook/Playground: ცოცხალი მაგალითები, accessibility პანელი, RTL toggle.

12) კონტრიბუტინგი (წვლილი)

RFC ახალი კომპონენტისთვის: პრობლემა - ვარიანტები, შერჩეული გამოსავალი A11y - i18n - API - რისკები.
PR შემოწმების სია: dock, storis, ტესტები, ვიზუალური snepshots, კონტრასტები, i18n, dark/RTL.
Done 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) მიკროკოპის მაგალითები (მზა ჩანართები)

CTA: „დაზოგეთ ცვლილებები“, „გადამოწმება“, „დაამატეთ გადახდის მეთოდი“.

შეცდომები: "თარიღის არასწორი ფორმატი. გამოიყენეთ DD. მმ. GGG. "", ფაილი ძალიან დიდია (მაქს. 10 MB)"

წარმატება: "გადახდა მიღებულია. ბალანსი განახლებულია. „„, მზად! დოკუმენტები შემოწმებულია"

ცარიელი სახელმწიფოები: "თითო "{query}" ვერაფერი იპოვნეს. ჩამოიბანეთ ფილტრები ან დააკონკრეტეთ მოთხოვნა"

15) ანტი შაბლონები

ბიზნეს ლოგიკა UI კომპონენტების შიგნით (არღვევს ხელახალი გამოყენებას).
უხილავი ფოკუსი ან მნიშვნელობის დამოკიდებულება მხოლოდ ფერზე.
კომპონენტების კოდში ჩასმული ხაზები (i18n გარეშე).
სემანტიკის დარღვევა (ღილაკი 'div', სიები 'ul/ol/li') გარეშე.
ვარიანტები მკაფიო წესების გარეშე (რეპროდუქცია 'ButtonPrimaraBlueBig2').

16) ჩეკის ფურცლები

• აღწერილია დანიშნულება, ვარიანტები, API.
• A11y: როლი, ფოკუსი, aria ატრიბუტები, კონტრასტი.
• i18n: გამოიცა ყველა სტრიქონი, შემოწმებულია გრძელი ენები და RTL.
• Storis/demo: ჩვეულებრივი, დატვირთვა, შეცდომები, ცარიელი.
• ტესტები: ერთეული + ვიზუალური + ინტერაქტიული + A11y.
• არ არსებობს ბიზნეს ლოგიკა, მხოლოდ UI/ქცევა.

• არსებობს კომპონენტების სქემა და ფოკუსის რიგი.
• განსაზღვრულია microcopy და შეცდომების/წარმატებების ტექსტები.
• ძირითადი მეტრიკა იზომება (ნაბიჯის კონვერტაცია, error rate, დრო-კომპლექტი).

17) ჩონჩხი კომპონენტისთვის (შაბლონი)

სახელი და დანიშნულება

გამოყენების/გამოყენების დროს

პარამეტრები და მდგომარეობა

API (პროპაგანდა, მოვლენები, სლოტები)

Accessibility (როლი, კლავიატურა, არია, კონტრასტი)

i18n (გასაღებები, ფორმატები, სიგრძე, RTL)

მიკროკოპი (მაგალითები)

კოდის მაგალითები (ტიპიური და edge)

ტესტის მატრიცა

ანტი მაგალითები

შედეგი

Gamble Hub UI არ არის მხოლოდ ბლოკების ერთობლიობა, არამედ დისციპლინა: ნიშნები - კომპონენტები, ნიმუშები, დოკუმენტაცია და მეტრიკა. ამ ჰაიდის შემდეგ, გუნდები უფრო სწრაფად აწვდიან ფიჩხებს, მომხმარებლები იღებენ პროგნოზირებულ და ხელმისაწვდომი ინტერფეისს, ხოლო პროდუქტი მასშტაბურია ვიზუალური დავალიანების გარეშე. საჭიროების შემთხვევაში, მე ვაგროვებ dock- ის პირველ გვერდებს MVP კომპლექტის მიხედვით i18n მაგალითებითა და კლავიშებით.