مكتبة مكونات Gamble Hub UI

1) الأهداف والمبادئ

لماذا: تسريع تسليم الميزات، وتوفير UX متسق، وتبسيط الدعم.

• الدلالات والحياد. يحل المكون مشكلة واجهة المستخدم دون الخياطة في منطق العمل.
• A11y-by-default. يتم خياطة الأدوار وحلقات التركيز وسمات الأغنية والتباين في المكونات.
• i18n-first. أطوال الخط، التنسيقات العددية، RTL - تأخذ في الاعتبار خارج الصندوق.
• تمجيد. الموضوعات الفاتحة/المظلمة واللهجات ذات العلامات التجارية من خلال الرموز المميزة.
• قابلية التوسع. واجهات برمجة التطبيقات الموحدة، واستقرار الإطلاقات الصغيرة، والهجرات تحت التخصص.

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): Button، Icon، Typography، Link، Badge، Divider، Avatar.
2. Формы: إدخال، PasswordInput، NumberInput، Select، Combobox، DatePicker، Checkbox، Radio، Switch، Slider، Textarea، FileUpload.
3. التنقل: AppBar و Tabs و Breadcumbs و Pagination و Drawer/Sidebar و Stepper.
4. Фидбек: تنبيه، InlineError، Tooltip، Toast، Snackbar، Modal، Popover، Skeleton، Progress، StatusDot.
5. البيانات والجداول: الجدول، قائمة البيانات، البطاقة، الأكورديون، العلامة، الدولة الفارغة.

• GameTile (بطاقة لعبة)
• مزود شارة
• JackpotTicker
• LiveBadge (طاولة/عرض مباشر)
• مرشحات اللوبي (مزود/نوع/حد)
• BonusBanner/BonusCard
• MissionProgress/AchievementBadge
• TournamentLeaderboard
• WalletCard/BalanceWidget
• PaymentMethodCard
• نموذج الإيداع/نموذج السحب
• KYCStatusBadge/KYCChecklist
• راية الألعاب المسؤولة/LimitsControl
• AgeGate/SessionTimer/RiskAlert
• SystemStatus/الصيانة

4) صفحة المكون: المحتوى المطلوب

الغرض ومتى تستخدم/لا تستخدم.
التكوين والمتغيرات. الأبعاد والحالات والمعدلات.
واجهة برمجة التطبيقات. الدعائم والأحداث والفتحات والأوضاع الخاضعة للرقابة/غير المنضبطة.
A11y. الأدوار والتركيز واتصالات الأغنية والمناطق الحية.

i18 ن. أطوال، تنسيقات، توقيعات قابلة للتوزيع

المجهرية. النصوص الموصى بها (CTA، تلميحات، أخطاء).
أمثلة الشفرة. حالات نموذجية، حالات حافة (أخطاء، تحميل، فارغة).
الاختبارات. matrix/unit/interaction/A11y بصرية.
أمثلة مضادة. أخطاء الاستخدام المتكررة.

5) المكونات الرئيسية: المواصفات السريعة

5. 1 زر

المتغيرات: «الأساسي | الثانوي | الشبح | المدمر» الأبعاد: «sm | md | lg»

الدول: عادية، تحوم، تركيز مرئي، نشطة، تحميل، معطلة

A11y: حلقة تركيز مرئية، «أغنية مشغولة» لـ «تحميل»، «أغنية مضغوطة» للتبديل

Microcopy: action + object (حفظ التغييرات، تحقق)

مثال مضاد: «حسنًا»

5. 2 المدخلات/الميدان

المكونات: ملصق، حقل، مساعد، خطأ، بادئة/لاحقة

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

نمط الخطأ: ما الخطأ + كيفية الإصلاح («أدخل الرقم في التنسيق + 380»..)

الفتحات: «بادئة» (أيقونة)، «لاحقة» (زر «عرض كلمة مرور»)

5. 3 حدد/كومبوبوكس

الميزات: بحث القائمة، لوحة المفاتيح، افتراضية القائمة الطويلة

A11y: «role =» combobox «،» aria-ended «،» aria-activedescend'

نتائج فارغة: "لم يتم العثور على شيء. تغيير الطلب"

5. 4 مودال/درج

القواعد: تركيز الفخ، إغلاق ESC/التراكب، إعادة التركيز إلى البادئ

الاستخدام: تأكيدات الدفع، قواعد الخصم، خطوات KYC

5. 5 توست/سناك بار

الوقت: 2-4 ث، لا يوجد حظر للتدفق

المناطق الحية: "aria-live =" مهذب "من أجل النجاح،" حازم "للأخطاء

أمثلة: "الدفع مقبول. وتم تحديث الرصيد"

5. 6 دولة فارغة

القالب: السياق + القيمة + CTA + CTA الثانوي

مثال: "ستظهر ألعاب مختارة هنا عند إضافة الأولى. إضافة إلى مفضل

6) مكونات iGaming: التفاصيل وواجهة برمجة التطبيقات

6. 1 GameTile

الغرض: بطاقة لعبة في الردهة/الكتالوج.
التكوين: الغلاف، المزود، العلامات (New/Hot/Jackpot/Live)، RTP (البيع بالجملة)، العمل السريع.

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

الدول: تحوم (بداية سريعة)، هيكل عظمي، غير متاح (منطقة/وقت).
A11y: النص البديل، بدء لوحة المفاتيح، 'aria-label = «Play Lightning Roulette».

6. 2 مرشحات اللوبي

الغرض: مرشحات الضغط (النوع، المزود، الحدود، التقلب).
الميزات: التجهيزات المسبقة المحفوظة، مرشحات إعادة الضبط، عداد النتائج.
Microcopy: «Filters' و» Reset filters' و «Found: 128».

6. 3 BonusBanner/BonusCard

الخيارات: مرحبًا، إعادة تحميل، استرداد نقدي، مسابير حرة، بطولة.
الحقول: رأسية، شروط، فترة صلاحية، CTA («تنشيط المكافأة»).
A11y: الإشارات إلى الشروط قابلة للقراءة، → تفاصيل الشروط.
مضاد النمط: إخفاء القيود الرئيسية.

6. 4 JackpotTicker

الغرض: تحديث تلقائي لمبلغ الجائزة الكبرى.
API: مصدر البيانات، فترة التحديث، تنسيق العملة.
A11y: "الدور =" الحالة "، لا تنتهك إمكانية قراءة قارئ الشاشة.

6. 5 TournamentLeaderboard

التكوين: جدول الموقع والنقاط والجوائز والمؤقت والوضع الخاص.
الميزة: الوثب/الافتراضية، إصلاح خطك.
A11y: 'ث '/' نطاق'، أعمدة قابلة للقراءة، ملاحة السهم.

6. 6 WalletCard/BalanceWidget

الحقول: الرصيد، الأموال المحظورة، رصيد المكافأة، العملة.
الأفعال: «زيادة»، «عرض»، «تاريخ».
الأمن: إخفاء/عرض الكمية، إخفاء في مناطق مشتركة.

6. 7 PaymentMethodCard

الحقول: شعار مقدم الخدمة، الحدود، العمولات، إيتا، التوافر الإقليمي.
الدول: غير متاحة (المنطقة/الحالة)، قيد الإعداد، الحد من الإنذار.

ميكروكوبي: "1. 5٪ عمولة يحجبها مقدم الخدمة، «الدفع - حتى 15 دقيقة»

6. 8 نموذج الإيداع/نموذج السحب

الأنماط: التحقق الداخلي، حدود الكمية، مطالبات قاعدة الطريقة نفسها.
A11y: إعلان الأخطاء ('حازمة')، وتحويل التركيز إلى الخطأ الأول.
مجالات الخدمات: «مصدر الأموال»، «الغرض»، إذا لزم الأمر.

6. 9 KYCStatusBadge/KYCChecklist

الدول: «لا شيء | | الأساسية الممددة | المرفوضة | المعلقة».
النصوص: «سيستغرق الأمر ~ 2 دقائق»، «الصورة بدون وهج والزوايا والنص مرئية».
CTA: "تحقق" ثانوي: "لماذا هذا مهم ؟ ».

6. 10 LimitsControl/ResponsibleGamingBanner

الغرض: حدود الودائع/الأسعار/الوقت، فترات الراحة، الاستبعاد الذاتي.
А11у/Tone: محايد، بدون ضغط، مع الإشارة إلى المساعدة.

7) أنماط التخطيط (وصفات)

التسجيل/ACC: Stepper + Form + InlineError + PageAlert + SuccessToast.
Депозит: PaymentMethodCard + PublicInput + LimitsHint + ConfirmeModal + StatusToast.
Лобби: SearchBar + LobbyFilters + GameGrid (из GameTile) + Pagination + EmptyState.
Турнир: TournamentLeaderboard + MissionProgress + BonusBanner.
المسؤول: ResponsibleGamingBanner + LimitsControl + FAQ-link.

8) إمكانية الوصول (A11y)

التركيز المرئي دائمًا (بما في ذلك في موضوع مظلم).
تنقل لوحة المفاتيح من خلال جميع العناصر التفاعلية.
«aria-live =» مهذب/حازم «» للنخب/الحالات.
تناقضات لا تقل عن 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

تنسيق التواريخ/العملات - مع المرافق وليس الأوتار.
النغمة باللغات - عبر خريطة النغمة (محايد/داعم/رسمي).

10) الأداء والجودة

افتراضية القائمة (ألعاب، جداول).
تحميل كسول للرسوم التوضيحية، ربط الرموز بالصفحات.
أحجام الحزم: ميزانية حزمة واجهة المستخدم، لا توجد اعتمادات كبيرة.
هيكل عظمي لإدراك السرعة، المغازل - الحد الأدنى.
الاختبارات: الوحدة، اللقطات المرئية، التفاعل، A11y، E2E للتدفق الحرج.

11) الإصدارات والإصدارات

SemVer: التصحيح - الحشرات ؛ طفيفة - غير مدمرة ؛ كبير - مع الهجرات.
ملاحظات الإصدار: الرموز/واجهة برمجة التطبيقات/السلوك، قبل/بعد لقطات الشاشة.
الاستنكاف: علامات الرصيف وتعديلات الرمز وقواعد البطانة.
Storybook/Playground: أمثلة حية، لوحة إمكانية الوصول، تبديل RTL.

12) المساهمة

RFC على مكون جديد: مشكلة الخيارات القرار المختار i18n API المخاطر.
قائمة مرجعية للعلاقات العامة: أرصفة، قصص، اختبارات، لقطات بصرية، تناقضات، i18 ن، مظلمة/RTL.
تعريف الانتهاء: المكون + التوثيق + الاختبارات + أمثلة النمط.

13) مجموعة MVP وخريطة طريق

• الزر، الإدخال، حدد، صندوق الشيكات، الراديو، التبديل، المودال، الخبز المحمص، تلميح الأدوات، التقدم، الهيكل العظمي، البطاقة، الدولة الفارغة، علامات التبويب، التثبيت، فتات الخبز، الطاولة، GameTile، LobbyFilters، Bonus Banner، WalletCard، PaymentMethodCard، DepositForm، KYCStatusBadge.

Далее: TournamentLeaderboard و JackpotTicker و MissionProgress و LimitsControl و SystemStatus و Drawer/Sidebar و DatePicker و Combobox و fileupload.

14) أمثلة الميكروكوبي (الإدخالات النهائية)

CTA: «وفر التغييرات»، «تحقق»، «أضف طريقة الدفع».

الأخطاء: "تنسيق التاريخ غير صالح. استخدم DD. MM. YYYY.، ""الملف كبير جدًا (بحد أقصى 10 ميجابايت)"

النجاح: "الدفع مقبول. تحديث الرصيد. تم الوثائق التي تم التحقق منها"

يقول الفارغ: "بواسطة "{استعلام}" لم يتم العثور على شيء. أعد تعيين المرشحات أو صقل الاستعلام"

15) الأنماط المضادة

منطق الأعمال داخل مكونات واجهة المستخدم (يكسر الاستخدام المفرط).
التركيز غير المرئي أو الاعتماد على المعنى فقط على اللون.
سلاسل مضمنة في رمز المكون (بدون i18n).
انتهاك الدلالات (زر «div»، قوائم بدون «ul/ol/li»).
المتغيرات بدون قواعد واضحة (الضرب «ButtonPrimaryBlueBig2»).

16) القوائم المرجعية

• الغرض، المتغيرات، واجهة برمجة التطبيقات موصوفة.
• A11y: الدور والتركيز وخصائص الأغنية والتباين.
• i18n: يتم تقديم جميع الخطوط، ويتم فحص اللغات الطويلة و RTL.
• القصة/العرض التوضيحي: عادي، تنزيل، خطأ، فارغ.
• الاختبارات: الوحدة + البصرية + التفاعل + A11y.
• لا يوجد منطق تجاري، فقط واجهة المستخدم/السلوك.

• هناك مخطط من المكونات ونظام تركيز.
• يتم تعريف النصوص المجهرية والخطأ/النجاح.
• قياس المقاييس الرئيسية (تحويل الخطوة، معدل الخطأ، وقت الإكمال).

17) هيكل عظمي للوثيقة للمكون (نموذج)

الاسم والغرض

متى تستخدم/لا تستخدم

الخيارات والدول

واجهة برمجة التطبيقات (الدعائم والأحداث والفتحات)

إمكانية الوصول (الدور، لوحة المفاتيح، الأغنية، التباين)

i18n (مفاتيح، تنسيقات، أطوال، RTL)

المجهرية (أمثلة)

عينات الشفرة (نموذجية وحافة)

مصفوفة الاختبار

أمثلة مضادة

المجموع

واجهة مستخدم Gamble Hub ليست مجرد مجموعة من الكتل، ولكنها تخصص: الرموز → المكونات → والأنماط → التوثيق → المقاييس. باتباع هذا الدليل، تقدم الفرق ميزات أسرع، ويحصل المستخدمون على واجهة يمكن التنبؤ بها وبأسعار معقولة، ومقياس المنتج بدون ديون بصرية. إذا لزم الأمر، سأجمع الصفحات الأولى من قفص الاتهام بواسطة مجموعة MVP مع أمثلة ومفاتيح i18n.