کتابخانه کامپوننت Gamble Hub UI

1) اهداف و اصول

چرا: سرعت بخشیدن به تحویل ویژگی، ارائه UX سازگار و ساده سازی پشتیبانی.

• معناشناسی و بیطرفی این جزء مشکل UI را بدون دوختن در منطق کسب و کار حل می کند.
• A11y-by-default است. نقش ها، حلقه های تمرکز، ویژگی های آریا و کنتراست به اجزای سازنده دوخته شده است.
• i18n-first. طول خط، فرمت های عددی، RTL - را به حساب از جعبه.
• وسوسه کردن تم های روشن/تاریک و لهجه های مارک دار از طریق نشانه ها.
• مقیاس پذیری. 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 }
}

قوانین: نشانه معنایی (به عنوان مثال،. رنگ آمیزی لهجه است. موفقیت) توسط اجزاء استفاده می شود ؛ پالت - داخلی.

3) دسته بندی کامپوننت

1. Базовые (Primitives): دکمه، آیکون، تایپوگرافی، لینک، نشان، تقسیم، آواتار.
2. Формы: ورودی، PasswordInput، NumberInput، Select، Combobox، DatePicker، Checkbox، رادیو، سوئیچ، لغزان، Textarea، FileUpload.
3. ناوبری: AppBar، زبانه ها، خرده نان، صفحه بندی، کشو/نوار کناری، پله.
4. Фидбек: هشدار، InlineError، Tooltip، Toast، Snackbar، Modal، Popover، اسکلت، پیشرفت، StatusDot.
5. داده ها و جداول: جدول، DataList، کارت، آکاردئون، برچسب، EmptyState.

• GameTile (کارت بازی)
• ارائه دهنده نشان
• برنده تمام پولها
• LiveBadge (جدول زنده/نمایش)
• LobbyFilters (ارائه دهنده/ژانر/حد)
• پاداش بنر/پاداش کارت
• مأموریتپیشرفت/موفقیت
• رهبر مسابقات
• کیف پول کارت/بالانس ویجت
• روش پرداخت کارت
• فرم واریز/برداشت
• KYCStatusBadge/KYCChecklist
• مسئول بازی بنر/محدودیت کنترل
• AgeGate/SessionTimer/RiskAlert
• وضعیت سیستم/تعمیر و نگهداری بنر

4) صفحه کامپوننت: محتوای مورد نیاز

هدف و زمان استفاده/عدم استفاده

ترکیب و انواع. ابعاد، ایالت ها، اصلاح کننده ها.
رابط برنامه نویسی غرفه ها، رویدادها، اسلات ها، حالت های کنترل شده/کنترل نشده.
A11y است. نقش ها، تمرکز، اتصالات آریا، مناطق زنده.
i18n. طول، فرمت، امضای محلی.
ميکروکپي. متون توصیه شده (CTA، نکات، خطاها).
مثال های کد موارد معمول، موارد لبه (خطاها، بارگیری، خالی).

تست ها matrix/unit/interaction/A11y تصویری

ضد مثال ها خطاهای استفاده مکرر

5) اجزای کلیدی: مشخصات سریع

5. 1 دکمه

انواع: «اولیه | ثانویه | شبح | مخرب» ابعاد: «sm | md | lg»

ایالات: عادی، شناور، تمرکز قابل مشاهده، فعال، بارگیری، غیر فعال

A11y: حلقه تمرکز قابل مشاهده، «aria-busy» برای «بارگیری»، «aria-pressed» برای جابجایی

میکروکپی: عمل + شی (ذخیره تغییرات، تأیید)

ضد مثال: «خوب»

5. 2 ورودی/زمینه

عناصر: برچسب، زمینه، یاور، خطا، پیشوند/پسوند

A11y: «aria-invalid»، «aria-describedby»، связка «for/id»

الگوی خطا: چه چیزی اشتباه است + چگونه رفع شود («شماره را در قالب + 380 وارد کنید»..)

شکافها: 'پیشوند' (آیکون), 'پسوند' (دکمه «نشان دادن رمز عبور»)

5. 3 انتخاب کنید/جعبه ترکیبی

ویژگی ها: جستجوی لیست، صفحه کلید، مجازی سازی لیست طولانی

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

نتایج سفید: "چیزی یافت نشد. درخواست را تغییر دهید"

5. 4 معین/کشو

قوانین: تله تمرکز، ESC/پوشش نزدیک، بازگشت تمرکز به آغازگر

استفاده: تایید پرداخت، قوانین تخفیف، مراحل KYC

5. 5 نان تست/اسنک بار

زمان: 2-4 ثانیه، بدون مسدود کردن جریان

مناطق زنده: "aria-live" = "مودبانه" برای موفقیت، "قاطعانه" "برای اشتباهات

مثال: "پرداخت پذیرفته شده است. تعادل به روز شده است"

5. 6 حالت خالی

الگو: context + value + CTA + CTA ثانویه

به عنوان مثال: "بازی های انتخاب شده هنگام اضافه کردن اولین مورد در اینجا ظاهر می شوند. [اضافه کردن به علاقه مندی ها]

6) اجزای iGaming: مشخصات و API

6. 1 بازی کاشی

هدف: کارت بازی در لابی/کاتالوگ.
ترکیب: پوشش، ارائه دهنده، برچسب ها (جدید/داغ/برنده تمام پولها/زنده)، RTP (عمده فروشی)، اقدام سریع.

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

ایالات: شناور (شروع سریع)، اسکلت، در دسترس نیست (منطقه/زمان).
A11y: alt-text, شروع صفحه کلید, 'aria-label = «بازی رولت رعد و برق»'.

6. 2 لابی فیلترها

هدف: فیلترهای لابی (ژانر، ارائه دهنده، محدودیت ها، نوسانات).
ویژگی ها: ایستگاه از پیش تنظیم شده ذخیره شده، تنظیم مجدد فیلترها، شمارنده نتیجه.
میکروکپی: «فیلترها»، «تنظیم مجدد فیلترها»، «پیدا شد: 128».

6. 3 پاداش بنر/پاداش کارت

گزینه ها: خوش آمدید، بازنگری، بازپرداخت، freespins، مسابقات.
زمینه ها: هدر، شرایط، مدت اعتبار، CTA («فعال کردن پاداش»).
A11y: اشاره به شرایط قابل خواندن است، «aria-describby» → جزئیات شرایط.
Anti-pattern: محدودیت های کلیدی را پنهان کنید.

6. 4 برنده تمام پولها

هدف: خودکار تازه کردن مقدار برنده تمام پولها در حال اجرا.
API: منبع داده، دوره به روز رسانی، فرمت ارز.
A11y: 'role = «status»'، خوانایی خواننده صفحه را نقض نکنید.

6. 5 تورنمنتلیدربرد

ترکیب بندی: جدول موقعیت، نقاط، جوایز، تایمر، موقعیت خود.
ویژگی: صفحه بندی/مجازی سازی، رفع خط شما.
A11y: 'th '/' scope'، ستون های قابل خواندن، ناوبری فلش.

6. 6 کیف پول کارت/تعادل ویجت

زمینه ها: تعادل، وجوه مسدود شده، تعادل پاداش، ارز.
اقدامات: «بالا بردن»، «نمایش»، «تاریخ».
امنیت: پنهان کردن/نشان دادن مقدار، پوشش در مناطق مشترک.

6. 7 روش پرداخت کارت

زمینه ها: آرم ارائه دهنده، محدودیت ها، کمیسیون ها، ETA، در دسترس بودن منطقه ای.
ایالات: در دسترس نیست (منطقه/وضعیت)، در حال پردازش، هشدار محدود.

میکروکپی: "1. 5% کمیسیون توسط ارائه دهنده خودداری", "پرداخت - تا 15 دقایق"

6. 8 فرم واریز/برداشت

الگوها: اعتبارسنجی درون خطی، محدودیت مقدار، دستورالعمل های همان روش.
A11y: اعلان خطاها ('قاطعانه')، تبدیل تمرکز به اولین خطا.
زمینه های خدمات: «منبع بودجه»، «هدف»، اگر AML مورد نیاز است.

6. 9 KYCStatusBadge/KYCChecklist

ایالتها: «none | basic | extended | rejected | pending».
متن: «~ 2 دقیقه طول می کشد»، «عکس بدون تابش خیره کننده، گوشه ها و متن قابل مشاهده است».
CTA: "تأیید کنید"، ثانویه: "چرا این مهم است ؟ ».

6. 10 LimitsControl/ResponsibleGamingBanner

هدف: محدودیت سپرده/نرخ/زمان، معافیت، خود حذفی.
А11у/Tone: خنثی، بدون فشار، با اشاره به کمک.

7) طرح بندی الگوهای (دستور العمل)

ثبت نام/ACC: Stepper + فرم + InlineError + PageAlert + SuccessToast.
Депозит: PaymentMethodCard + AmountInput + LimitsHint + ConfirmModal + StatusToast.
Лобби: SearchBar + LobbyFilters + GameGrid (из GameTile) + صفحه بندی + EmptyState.
Турнир: TournamentLeaderboard + MissionProgress + BonusBanner.
مسئول: ResponsibleGamingBanner + LimitsControl + پرسش و پاسخ لینک.

8) دسترسی (A11y)

همیشه تمرکز قابل مشاهده (از جمله در یک موضوع تاریک).
ناوبری صفحه کلید از طریق تمام عناصر تعاملی.
'aria-live = «مودبانه/قاطعانه» برای تست ها/وضعیت ها.

کمتر از WCAG 2 نیست. 1 AA

متن در آیکون ها تنها حامل معنی نیست.
حالت RTL، 320 پیکسل چک و خوانایی با صدای بلند.

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

قالب بندی تاریخ/ارز - با آب و برق، نه رشته.
تن در زبانها - از طریق نقشه تن (خنثی/حمایتی/رسمی).

10) عملکرد و کیفیت

مجازی سازی لیست (بازی ها، جداول).
بارگذاری تنبل از تصاویر، کد پیرایش توسط صفحات.
اندازه بسته نرم افزاری: بودجه بسته UI، هیچ وابستگی سنگین.
اسکلت برای ادراک سرعت، اسپینر - حداقل.
تست ها: واحد، عکس های فوری بصری، تعامل، A11y، E2E برای جریان بحرانی.

11) نسخه و انتشار

SemVer: پچ - اشکالات ؛ جزئی - غیر مخرب ؛ بزرگ - با مهاجرت

یادداشت انتشار: نشانه/API/رفتار، قبل/بعد از تصاویر.
استهلاک: نشانه های بارانداز، مدهای کد و قوانین لینتر.
Storybook/زمین بازی: نمونه های زنده، پانل دسترسی، تغییر RTL.

12) مشارکت

RFC در یک جزء جدید: مشکل → گزینه → تصمیم انتخاب شده → A11y → i18n → خطرات →

چک لیست روابط عمومی: اسکله، داستان، آزمون، عکس های فوری بصری، تضاد، i18n، تاریک/RTL.
تعریف انجام شده: جزء + مستندات + تست + نمونه های الگوی.

13) مجموعه MVP و نقشه راه

• دکمه، ورودی، انتخاب، جعبه چک، رادیو، سوئیچ، معین، نان تست، نکته ابزار، پیشرفت، اسکلت، کارت، EmptyState، زبانه ها، صفحه بندی، خرده نان، جدول، GameTile، LobbyFilters، BonusBanner، WalletCard، PaymentMethodCard، فرم سپرده، KYCStatusBadge.

Далее: TournamentLeaderboard، JackpotTicker، MissionProgress، LimitsControl، SystemStatus، کشو/نوار کناری، DatePicker، Combobox، FileUpload.

14) نمونه های Microcopy (درج به پایان رسید)

CTA: «Save changes»، «Get verified»، «Add a payment method».

خطاها: "قالب تاریخ نامعتبر. استفاده از DD MM. YYYY "., "پرونده خیلی بزرگ است (حداکثر 10 مگابایت)"

موفقیت: "پرداخت پذیرفته شده است. تعادل به روز شد "انجام شد! اسناد تایید شده"

حالتهای خالی: "By "{query}" هیچ چیزی یافت نشد. تنظیم مجدد فیلترها یا اصلاح پرس و جو"

15) ضد الگوهای

منطق کسب و کار در اجزای UI (استفاده بیش از حد از شکاف).
تمرکز نامرئی یا وابستگی معنی تنها به رنگ.
رشته های جاسازی شده در کد جزء (بدون i18n).
نقض معانی (دکمه در 'div'، لیست بدون 'ul/ol/li').
انواع بدون قوانین روشن (ضرب 'ButtonPrimaryBlueBig2').

16) چک لیست

• هدف، انواع، API شرح داده شده است.
• A11y: نقش، تمرکز، ویژگی های آریا، کنتراست.
• i18n: تمام خطوط رندر می شوند، زبان های طولانی و RTL بررسی می شوند.
• داستان/نسخه ی نمایشی: عادی، دانلود، خطا، خالی.
• تست ها: واحد + بصری + تعامل + A11y.
• بدون منطق کسب و کار، فقط UI/رفتار.

• یک طرح از اجزای و یک نظم تمرکز وجود دارد.
• متون میکروکپی و خطا/موفقیت تعریف شده است.
• معیارهای کلیدی اندازه گیری شده (تبدیل مرحله، نرخ خطا، زمان تکمیل).

17) سند اسکلت برای جزء (قالب)

نام و هدف

چه زمانی استفاده کنیم/استفاده نکنیم

گزینه ها و ایالت ها

API (غرفه ها، رویدادها، اسلات ها)

قابلیت دسترسی (نقش، صفحه کلید، آریا، کنتراست)

i18n (کلید، فرمت، طول، RTL)

میکروکپی (مثال)

نمونه کد (معمولی و لبه)

ماتریس تست

ضد نمونه

مجموع

رابط کاربری Gamble Hub فقط مجموعه ای از بلوک ها نیست، بلکه یک رشته است: نشانه ها → الگوها → مستندات → معیارها. پس از این راهنما، تیم ارائه ویژگی های سریع تر، کاربران یک رابط قابل پیش بینی و مقرون به صرفه، و مقیاس محصول بدون بدهی بصری. در صورت لزوم، من اولین صفحات بارانداز را با مجموعه MVP با نمونه ها و کلید های i18n جمع آوری می کنم.